/* global React */
const { useState: useS, useEffect: useE, useMemo: useM } = React;

function ExplainBlock({ option }) {
  const data = {
    A: {
      eyebrow: 'Opção A · Color Picker',
      title: 'Picker individual de ~20 cores',
      text: 'O editor escolhe cada cor uma a uma no backoffice. <strong>Cada alteração afeta TODAS as páginas e módulos do hotel</strong> — máxima flexibilidade, mas todas as páginas mudam ao mesmo tempo. Risco de combinações sem contraste, exige formação.',
      hours: '80h', tags: [['Máx. flexibilidade','good'],['Risco contraste','bad'],['Sem temas pré-validados','bad']],
      flag: 'no', flagText: 'Não recomendada — alto esforço, alto risco visual.'
    },
    B: {
      eyebrow: 'Opção B · Temas Globais',
      title: 'Editor escolhe entre paletas pré-validadas',
      text: 'O Design entrega <strong>3–5 paletas aprovadas</strong> (Original, Sunset, Ocean, Festive). O editor seleciona <strong>uma</strong> e ela aplica-se a <strong>todas as páginas e módulos</strong> em conjunto. Simples, seguro, qualidade visual garantida.',
      hours: '24h', tags: [['Qualidade garantida','good'],['UI simples','good'],['Mudança global','']],
      flag: '', flagText: 'Ponto de partida recomendado — Fase 1.'
    },
    C: {
      eyebrow: 'Opção C · Tema por Módulo',
      title: 'Cada secção pode ter o seu tema',
      text: 'Mesmas paletas validadas da Opção B, mas a escolha é feita <strong>por módulo</strong>. O editor pode misturar paletas dentro da mesma página — Hero em Sunset, Cards em Ocean, etc. Composições visuais variadas, mantendo qualidade.',
      hours: '40h', tags: [['Granularidade fina','good'],['Composições ricas','good'],['Mais decisões editoriais','']],
      flag: 'rec', flagText: 'Recomendada pela WYcreative — Fase 2.'
    },
    D: {
      eyebrow: 'Opção D · Theme Builder',
      title: 'Editor cria as suas próprias paletas',
      text: 'Painel de gestão onde o editor define <strong>~10 variáveis</strong> e cria novos temas (Halloween, Black Friday, Aniversário). Os temas criados ficam disponíveis no seletor por módulo da Opção C. Self-service para campanhas sazonais.',
      hours: '+40h', hoursSub: 'requer Opção C (40h)', tags: [['Self-service','good'],['Sem ciclo design','good'],['Requer Opção C','']],
      flag: 'req', flagText: 'Complemento opcional — Fase 3, requer C.'
    }
  };
  const d = data[option];
  return (
    <>
      <div className="explain-eyebrow">{d.eyebrow}</div>
      <h1 className="explain-title">{d.title}</h1>
      <p className="explain-text" dangerouslySetInnerHTML={{__html: d.text}}></p>
      <div className="metrics-row">
        <div className="metric" style={{gridColumn: '1 / -1'}}>
          <div className="metric-label">Granularidade</div>
          <div className="metric-value">
            {option === 'A' ? 'Global · cor a cor' : option === 'B' ? 'Global · por tema' : option === 'C' ? 'Por módulo' : 'Por módulo + temas custom'}
          </div>
          <div className="metric-sub">{option === 'A' ? '~20 cores soltas' : option === 'B' ? '4 temas pré-definidos' : option === 'C' ? '4+ temas, escolha por secção' : 'Editor cria temas'}</div>
        </div>
      </div>
      <div className="tags">
        {d.tags.map(([t, k], i) => <span key={i} className={`tag ${k}`}>{t}</span>)}
      </div>
      {d.flag && (
        <div className={`rec-block ${d.flag}`}>
          <div className="rec-head">
            {d.flag === 'rec' ? '★ Recomendada' : d.flag === 'no' ? '⚠ Não recomendada' : '↳ Requer Opção C'}
          </div>
          <p className="rec-text">{d.flagText}</p>
        </div>
      )}
    </>
  );
}

// ============== OPTION A — Color Picker ==============
function PanelA({ customVars, setCustomVars, resetVars }) {
  const groups = [
    { head: 'Página', vars: [
      ['--t-bg', 'Fundo página'],
      ['--t-surface', 'Superfície'],
      ['--t-text', 'Texto principal'],
      ['--t-text-muted', 'Texto secundário'],
      ['--t-border', 'Bordas']
    ]},
    { head: 'Marca', vars: [
      ['--t-primary', 'Cor primária'],
      ['--t-primary-fg', 'Texto sobre primária'],
      ['--t-accent', 'Cor de acento']
    ]},
    { head: 'Hero & Cards', vars: [
      ['--t-hero-a', 'Hero gradiente A'],
      ['--t-hero-b', 'Hero gradiente B'],
      ['--t-card-bg', 'Fundo dos cards']
    ]},
    { head: 'CTA', vars: [
      ['--t-cta-bg', 'CTA banner fundo'],
      ['--t-cta-fg', 'CTA banner texto']
    ]}
  ];

  // contrast helper (luminance-based)
  function lum(hex) {
    const m = hex.replace('#', '').match(/.{2}/g);
    if (!m) return 0;
    const [r, g, b] = m.map(h => {
      const v = parseInt(h, 16) / 255;
      return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
    });
    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
  }
  function contrast(a, b) {
    const la = lum(a), lb = lum(b);
    return ((Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05)).toFixed(2);
  }

  const orig = window.THEMES.original.vars;
  const bg = customVars['--t-bg'] || orig['--t-bg'];
  const text = customVars['--t-text'] || orig['--t-text'];
  const ratio = contrast(bg, text);
  const ratioOk = parseFloat(ratio) >= 4.5;

  return (
    <div className="bo">
      <div className="bo-bar">
        <div className="bo-bar-dots"><i></i><i></i><i></i></div>
        <div className="bo-umb">UMBRACO</div>
        <div className="bo-path">Hotel Next › <b>Color Picker</b></div>
      </div>
      <div className="bo-body">
        {groups.map((g, gi) => (
          <div key={gi} className="bo-section">
            <div className="bo-section-head">{g.head}</div>
            <div className="color-grid-2">
              {g.vars.map(([cssVar, label]) => {
                const val = customVars[cssVar] || orig[cssVar] || '#000000';
                const hex = val.startsWith('#') ? val : '#1a1426';
                return (
                  <div key={cssVar} className="color-row">
                    <div className="color-swatch" style={{background: val}}>
                      <input type="color" value={hex}
                             onChange={e => setCustomVars({...customVars, [cssVar]: e.target.value})} />
                    </div>
                    <div className="color-name">{label}</div>
                    <div className="color-val">{hex.toUpperCase()}</div>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
        <div className={`contrast-warn`} style={{borderColor: ratioOk ? 'rgba(108,196,161,0.25)' : 'rgba(229,123,107,0.25)', color: ratioOk ? 'var(--app-good)' : 'var(--app-bad)', background: ratioOk ? 'rgba(108,196,161,0.06)' : 'rgba(229,123,107,0.06)'}}>
          <span>{ratioOk ? '✓' : '⚠'}</span>
          <span>Contraste texto/fundo: <b>{ratio}:1</b> · {ratioOk ? 'WCAG AA OK' : 'Abaixo de WCAG AA (4.5:1)'}</span>
        </div>
        <div style={{display:'flex', gap:6, marginTop:10}}>
          <button className="btn-primary" style={{flex:1}}>Publicar em todas as páginas</button>
          <button className="btn-secondary" onClick={resetVars}>Reset</button>
        </div>
        <p style={{fontSize:10.5, color:'var(--app-text-3)', fontFamily:'var(--mono)', margin:'10px 0 0', lineHeight:1.5}}>
          ⓘ Ao publicar, as <b style={{color:'var(--app-text-2)'}}>4 páginas</b> e todos os módulos atualizam para esta paleta personalizada.
        </p>
      </div>
    </div>
  );
}

// ============== OPTION B — Theme picker (global) ==============
function PanelB({ globalTheme, setGlobalTheme }) {
  const themes = Object.values(window.THEMES);
  return (
    <div className="bo">
      <div className="bo-bar">
        <div className="bo-bar-dots"><i></i><i></i><i></i></div>
        <div className="bo-umb">UMBRACO</div>
        <div className="bo-path">Hotel Next › <b>Tema do site</b></div>
      </div>
      <div className="bo-body">
        <div className="bo-section">
          <div className="bo-section-head">Tema global</div>
          <div className="theme-cards">
            {themes.map(t => (
              <div key={t.id}
                   className={`theme-card ${globalTheme === t.id ? 'active' : ''}`}
                   onClick={() => setGlobalTheme(t.id)}>
                <div className="tc-swatches">
                  {t.swatches.map((c, i) => <i key={i} style={{background: c}}></i>)}
                </div>
                <div className="tc-info">
                  <div className="tc-name">{t.name}</div>
                  <div className="tc-desc">{t.desc}</div>
                </div>
                {globalTheme === t.id && <div className="tc-status published">Ativo</div>}
              </div>
            ))}
          </div>
        </div>
        <button className="btn-primary" style={{width:'100%'}}>Publicar tema</button>
        <p style={{fontSize:10.5, color:'var(--app-text-3)', fontFamily:'var(--mono)', margin:'10px 0 0', lineHeight:1.5}}>
          ⓘ A escolha aplica-se a <b style={{color:'var(--app-text-2)'}}>todas as 4 páginas</b> e a todos os módulos em simultâneo.
        </p>
      </div>
    </div>
  );
}

// ============== OPTION C — Per-module theme ==============
function PanelC({ globalTheme, setGlobalTheme, perModuleThemes, setPerModuleThemes, focusedMod, setFocusedMod }) {
  const themes = Object.values(window.THEMES);
  const allModules = [];
  window.PAGES.forEach(p => p.modules.forEach(m => {
    if (m.type === 'nav' || m.type === 'footer') return;
    allModules.push({ key: `${p.id}-${m.id}`, page: p.label, type: m.type });
  }));

  function applyPreset(preset) {
    const next = {};
    if (preset === 'summer') {
      // mostly sunset, cards in ocean for contrast
      window.PAGES.forEach(p => p.modules.forEach(m => {
        const k = `${p.id}-${m.id}`;
        if (m.type === 'cta' || m.type === 'hero') next[k] = 'sunset';
        else if (m.type === 'cards' || m.type === 'gallery') next[k] = 'ocean';
        else next[k] = 'original';
      }));
    } else if (preset === 'xmas') {
      window.PAGES.forEach(p => p.modules.forEach(m => {
        const k = `${p.id}-${m.id}`;
        if (m.type === 'hero' || m.type === 'cta') next[k] = 'festive';
        else next[k] = 'original';
      }));
    } else if (preset === 'spa') {
      window.PAGES.forEach(p => p.modules.forEach(m => {
        const k = `${p.id}-${m.id}`;
        if (p.id === 'spa') next[k] = 'ocean';
        else next[k] = 'original';
      }));
    } else if (preset === 'reset') {
      // empty = uses global
    }
    setPerModuleThemes(next);
  }

  return (
    <div className="bo">
      <div className="bo-bar">
        <div className="bo-bar-dots"><i></i><i></i><i></i></div>
        <div className="bo-umb">UMBRACO</div>
        <div className="bo-path">Hotel Next › <b>Editor de página</b></div>
      </div>
      <div className="bo-body">
        <div className="bo-section">
          <div className="bo-section-head">Tema base do site</div>
          <select className="bo-select" value={globalTheme} onChange={e => setGlobalTheme(e.target.value)}>
            {themes.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
          </select>
        </div>

        <div className="bo-section">
          <div className="bo-section-head">Cenários prontos</div>
          <div className="chip-row">
            <div className="chip" onClick={() => applyPreset('reset')}>Tema base</div>
            <div className="chip" onClick={() => applyPreset('summer')}>☀ Campanha Verão</div>
            <div className="chip" onClick={() => applyPreset('xmas')}>★ Especial Natal</div>
            <div className="chip" onClick={() => applyPreset('spa')}>◐ Só página Spa</div>
          </div>
        </div>

        <div className="bo-section">
          <div className="bo-section-head">Tema por módulo ({allModules.length})</div>
          <div className="module-list">
            {allModules.map(({ key, page, type }) => (
              <div key={key}
                   className={`module-row ${focusedMod === key ? 'focused' : ''}`}
                   onMouseEnter={() => setFocusedMod(key)}
                   onMouseLeave={() => setFocusedMod(null)}>
                <div className="module-icon">{type[0].toUpperCase()}</div>
                <div>
                  <div className="module-name">{window.MODULE_LABELS[type]}</div>
                  <div className="module-page">{page}</div>
                </div>
                <select value={perModuleThemes[key] || ''}
                        onChange={e => setPerModuleThemes({...perModuleThemes, [key]: e.target.value})}>
                  <option value="">— base —</option>
                  {themes.map(t => <option key={t.id} value={t.id}>{t.name.replace('NEXT ', '')}</option>)}
                </select>
              </div>
            ))}
          </div>
        </div>

        <p style={{fontSize:10.5, color:'var(--app-text-3)', fontFamily:'var(--mono)', margin:'8px 0 0', lineHeight:1.5}}>
          ⓘ Cada módulo pode ter o seu próprio tema. Passa o rato para destacar.
        </p>
      </div>
    </div>
  );
}

// ============== OPTION D — Theme Builder ==============
function PanelD({ customThemes, setCustomThemes, activeCustomId, setActiveCustomId, applyCustom, perModuleThemes, setPerModuleThemes }) {
  const builderVars = [
    ['--t-bg', 'Fundo'],
    ['--t-surface', 'Superfície'],
    ['--t-text', 'Texto'],
    ['--t-text-muted', 'Texto suave'],
    ['--t-primary', 'Primária'],
    ['--t-primary-fg', 'Texto sobre primária'],
    ['--t-accent', 'Acento'],
    ['--t-hero-a', 'Hero A'],
    ['--t-hero-b', 'Hero B']
  ];

  const active = customThemes.find(t => t.id === activeCustomId);

  function updateActiveVar(k, v) {
    setCustomThemes(customThemes.map(t => t.id === activeCustomId ? {...t, vars: {...t.vars, [k]: v}, status: 'draft'} : t));
  }
  function updateActiveName(name) {
    setCustomThemes(customThemes.map(t => t.id === activeCustomId ? {...t, name} : t));
  }
  function publish() {
    setCustomThemes(customThemes.map(t => t.id === activeCustomId ? {...t, status: 'published'} : t));
  }
  function newTheme() {
    const id = 'custom-' + Date.now();
    const base = {...window.THEMES.original.vars};
    const t = { id, name: 'Novo tema', desc: 'Em rascunho', status: 'draft', custom: true, vars: base, swatches: [base['--t-bg'], base['--t-surface'], base['--t-primary'], base['--t-text']] };
    setCustomThemes([...customThemes, t]);
    setActiveCustomId(id);
  }

  return (
    <div className="bo">
      <div className="bo-bar">
        <div className="bo-bar-dots"><i></i><i></i><i></i></div>
        <div className="bo-umb">UMBRACO</div>
        <div className="bo-path">Hotel Next › <b>Theme Builder</b></div>
      </div>
      <div className="bo-body">
        <div className="bo-section">
          <div className="bo-section-head">Os meus temas ({customThemes.length})</div>
          <div className="theme-cards">
            {customThemes.map(t => (
              <div key={t.id}
                   className={`theme-card ${activeCustomId === t.id ? 'active' : ''}`}
                   onClick={() => setActiveCustomId(t.id)}>
                <div className="tc-swatches">
                  {[t.vars['--t-bg'], t.vars['--t-surface'], t.vars['--t-primary'], t.vars['--t-text']].map((c, i) => <i key={i} style={{background: c}}></i>)}
                </div>
                <div className="tc-info">
                  <div className="tc-name">{t.name}</div>
                  <div className="tc-desc">{t.desc}</div>
                </div>
                <div className={`tc-status ${t.status}`}>{t.status === 'published' ? 'Publicado' : 'Rascunho'}</div>
              </div>
            ))}
          </div>
          <button className="btn-secondary" style={{width:'100%', marginTop:6}} onClick={newTheme}>+ Novo tema</button>
        </div>

        {active && (
          <div className="bo-section">
            <div className="bo-section-head">Editar: {active.name}</div>
            <input className="bo-select" style={{marginBottom:8, fontSize:13}}
                   value={active.name}
                   onChange={e => updateActiveName(e.target.value)} />
            <div className="color-grid-2">
              {builderVars.map(([k, label]) => {
                const v = active.vars[k] || '#000';
                return (
                  <div key={k} className="color-row">
                    <div className="color-swatch" style={{background: v}}>
                      <input type="color" value={v} onChange={e => updateActiveVar(k, e.target.value)} />
                    </div>
                    <div className="color-name">{label}</div>
                    <div className="color-val">{v.toUpperCase()}</div>
                  </div>
                );
              })}
            </div>
            <div style={{display:'flex', gap:6, marginTop:10}}>
              <button className="btn-primary" style={{flex:1}} onClick={publish}>Publicar tema</button>
              <button className="btn-secondary" onClick={() => applyCustom(active.id)}>Aplicar a tudo</button>
            </div>
          </div>
        )}

        <p style={{fontSize:10.5, color:'var(--app-text-3)', fontFamily:'var(--mono)', margin:'8px 0 0', lineHeight:1.5}}>
          ⓘ Após publicar, o tema fica disponível no seletor por módulo (Opção C).
        </p>
      </div>
    </div>
  );
}

window.ExplainBlock = ExplainBlock;
window.PanelA = PanelA;
window.PanelB = PanelB;
window.PanelC = PanelC;
window.PanelD = PanelD;