// Shared hero-layout helpers used by the public portal and the admin editor.

export const DEFAULT_HERO_IMAGE = '/assets/img/uomysticmoon-main-hero.png'

// The original hand-tuned multi-gradient hero background (used only for the
// untouched default so the live page is byte-for-byte unchanged until edited).
export const HERO_BG =
  "linear-gradient(90deg,rgba(11,15,20,0.34) 0%,rgba(11,15,20,0.5) 36%,rgba(11,15,20,0.78) 62%,rgba(11,15,20,0.66) 100%),linear-gradient(180deg,rgba(11,15,20,0.08) 0%,rgba(11,15,20,0.72) 100%),url('" +
  DEFAULT_HERO_IMAGE +
  "')"

// Single-stop dark overlay driven by the editor's opacity slider.
export function buildOverlay(opacity) {
  return `linear-gradient(180deg,rgba(11,15,20,${opacity * 0.15}) 0%,rgba(11,15,20,${opacity}) 100%)`
}

// Background style for a layout. When `isDefault` and no custom image is set, use
// the exact original gradient stack; otherwise compose the overlay over the image.
export function heroBackground(layout, { isDefault = false } = {}) {
  const bg = layout.background || {}
  const backgroundImage =
    isDefault && !bg.image_url
      ? HERO_BG
      : `${buildOverlay(layout.overlay?.opacity ?? 0.72)}, url('${bg.image_url || DEFAULT_HERO_IMAGE}')`
  return {
    backgroundColor: 'var(--bg-deep)',
    backgroundImage,
    backgroundPosition: `${bg.position_x || 'left'} ${bg.position_y || 'center'}`,
    backgroundRepeat: 'no-repeat',
    backgroundSize: bg.size || 'cover',
  }
}

// Parse a stored layout string; return null if missing/malformed/wrong version.
export function parseLayout(str) {
  try {
    const l = str ? JSON.parse(str) : null
    return l && l.version === 1 && Array.isArray(l.elements) ? l : null
  } catch {
    return null
  }
}

// The current hardcoded hero as a HeroLayout, so the page is unchanged until
// staff publish their own. Font sizes use the existing clamp() strings so the
// default stays responsive (editor-created text uses px).
export function defaultLayout(teaser) {
  return {
    version: 1,
    background: { image_url: null, position_x: 'left', position_y: 'center', size: 'cover' },
    overlay: { opacity: 0.72 },
    elements: [
      {
        id: 'default-text',
        type: 'text_block',
        x: 50,
        y: 42,
        z: 1,
        anchor: 'center',
        props: {
          align: 'center',
          width: 760,
          lines: [
            { text: 'Private shard project', tag: 'span', fontSize: '0.74rem', color: '#c2d2e6', weight: 700, letterSpacing: '0.22em', transform: 'uppercase', font: 'sans' },
            { text: 'UOMysticmoon', tag: 'h1', fontSize: 'clamp(3rem,8.5vw,5.75rem)', color: 'var(--head)', weight: 600, letterSpacing: '0.02em', lineHeight: 1, font: 'display', marginTop: 14 },
            { text: 'A private Ultima Online world in progress', tag: 'p', fontSize: '1.32rem', color: '#dbe2ea', italic: true, marginTop: 22 },
            { text: teaser, tag: 'p', fontSize: '1.06rem', color: '#c4cdd8', maxWidth: 600, marginTop: 22 },
          ],
        },
      },
      {
        id: 'default-buttons',
        type: 'buttons',
        x: 50,
        y: 72,
        z: 2,
        anchor: 'center',
        props: {
          align: 'center',
          gap: 12,
          items: [
            { label: 'Enter the Website', to: '/site', variant: 'primary' },
            { label: 'Open the Wiki', to: '/wiki', variant: 'ghost' },
          ],
        },
      },
    ],
  }
}