/* Devonew — Painel da Igreja · editor do Site Público */
const { useState: useStateSite } = React;

/* paleta harmônica (oklch · mesma leveza, varia o matiz) */
const CHURCH_PALETTE = [
  { label: 'Oliveira', h: 145, c: 0.055 },
  { label: 'Pinheiro', h: 168, c: 0.060 },
  { label: 'Mar', h: 200, c: 0.070 },
  { label: 'Céu', h: 225, c: 0.075 },
  { label: 'Pomba', h: 245, c: 0.070 },
  { label: 'Índigo', h: 270, c: 0.075 },
  { label: 'Ametista', h: 300, c: 0.070 },
  { label: 'Orquídea', h: 330, c: 0.075 },
  { label: 'Videira', h: 350, c: 0.075 },
  { label: 'Romã', h: 20, c: 0.090 },
  { label: 'Argila', h: 35, c: 0.080 },
  { label: 'Âmbar', h: 55, c: 0.095 },
  { label: 'Alvorada', h: 75, c: 0.100 },
  { label: 'Campo', h: 110, c: 0.070 },
];

/* reduz a imagem da logo e devolve um data URL (PNG, preserva transparência) */
function downscaleLogo(file, max, cb) {
  const reader = new FileReader();
  reader.onload = () => {
    const img = new Image();
    img.onload = () => {
      const scale = Math.min(1, max / Math.max(img.width, img.height));
      const w = Math.max(1, Math.round(img.width * scale)), h = Math.max(1, Math.round(img.height * scale));
      const cv = document.createElement('canvas'); cv.width = w; cv.height = h;
      cv.getContext('2d').drawImage(img, 0, 0, w, h);
      try { cb(cv.toDataURL('image/png')); } catch (e) { cb(null); }
    };
    img.onerror = () => cb(null);
    img.src = reader.result;
  };
  reader.readAsDataURL(file);
}

function LogoUploader({ value, onChange, toast }) {
  const ref = React.useRef(null);
  const pick = (e) => {
    const f = e.target.files && e.target.files[0];
    e.target.value = '';
    if (!f) return;
    if (!/^image\/(png|jpeg|webp)$/.test(f.type)) { toast && toast('Envie um PNG, JPG ou WebP'); return; }
    downscaleLogo(f, 256, (url) => { if (url) onChange(url); else toast && toast('Não consegui ler a imagem'); });
  };
  return (
    <div>
      <span className="field-lab">Logo da igreja</span>
      <div className="logo-up">
        <div className="logo-preview">{value ? <img src={value} alt="logo"/> : <Icon name="image" size={22}/>}</div>
        <div className="logo-up-actions">
          <button className="btn btn-ghost btn-sm" onClick={() => ref.current.click()}><Icon name="image" size={15}/>{value ? 'Trocar logo' : 'Enviar logo'}</button>
          {value && <button className="btn btn-quiet btn-sm" style={{ color: 'oklch(0.55 0.14 35)' }} onClick={() => onChange(null)}><Icon name="trash" size={14}/>Remover</button>}
          <input ref={ref} type="file" accept="image/png,image/jpeg,image/webp" hidden onChange={pick}/>
        </div>
      </div>
      <p className="muted" style={{ fontSize: 12, margin: '8px 0 0' }}>PNG com fundo transparente fica melhor. Sem logo, usamos a sigla.</p>
    </div>
  );
}

function ColorPalette({ value, onChange }) {
  const cur = value || {};
  const h = cur.h != null ? cur.h : 145;
  const c = cur.c != null ? cur.c : 0.055;
  const isPreset = CHURCH_PALETTE.some((p) => p.h === h && p.c === c);
  const hueGrad = 'linear-gradient(90deg,' +
    [0, 40, 80, 120, 160, 200, 240, 280, 320, 360].map((d) => `oklch(0.62 0.13 ${d})`).join(',') + ')';
  return (
    <div>
      <span className="field-lab">Cor de destaque</span>
      <div className="swatches">
        {CHURCH_PALETTE.map((p) => {
          const on = h === p.h && c === p.c;
          return (
            <button key={p.label} type="button" className={`swatch ${on ? 'on' : ''}`} title={p.label}
              style={{ background: `oklch(0.56 ${p.c} ${p.h})` }} onClick={() => onChange({ h: p.h, c: p.c })}>
              {on && <Icon name="check" size={16}/>}
            </button>
          );
        })}
      </div>

      {/* cor personalizada */}
      <div className={`custom-color ${!isPreset ? 'active' : ''}`}>
        <span className="cc-swatch" style={{ background: `oklch(0.56 ${c} ${h})` }} title="Cor personalizada">
          {!isPreset && <Icon name="check" size={15}/>}
        </span>
        <div className="cc-sliders">
          <label className="cc-row">
            <span>Matiz</span>
            <input type="range" min="0" max="360" value={Math.round(h)} className="hue"
              style={{ background: hueGrad }} onChange={(e) => onChange({ h: +e.target.value, c })}/>
          </label>
          <label className="cc-row">
            <span>Intensidade</span>
            <input type="range" min="3" max="12" value={Math.round(c * 100)}
              onChange={(e) => onChange({ h, c: +e.target.value / 100 })}/>
          </label>
        </div>
      </div>

      <p className="muted" style={{ fontSize: 12, margin: '8px 0 0' }}>Use a paleta pronta ou crie a sua cor. Aplicada ao site público, ao app dos membros e a este painel.</p>
    </div>
  );
}

/* seletor de tema do site (fontes) — registry em devonew/site-kit.js */
function ThemePicker({ value, onChange }) {
  const T = window.DEVO_THEMES || {};
  const cur = T[value] ? value : 'classico';
  // carrega as fontes de TODOS os temas só aqui (preview); o site carrega só a escolhida
  React.useEffect(() => {
    if (!window.DEVO_THEME_FONTS_HREF) return;
    const href = window.DEVO_THEME_FONTS_HREF(Object.keys(T));
    if (!href) return;
    let l = document.getElementById('devo-theme-preview-fonts');
    if (!l) { l = document.createElement('link'); l.id = 'devo-theme-preview-fonts'; l.rel = 'stylesheet'; document.head.appendChild(l); }
    if (l.getAttribute('href') !== href) l.setAttribute('href', href);
  }, []);
  return (
    <div>
      <span className="field-lab">Tema do site (fontes)</span>
      <div className="theme-grid">
        {Object.entries(T).map(([id, t]) => (
          <button key={id} type="button" className={`theme-card ${cur === id ? 'on' : ''}`} onClick={() => onChange(id)}>
            <span className="tc-sample" style={{ fontFamily: t.display }}>Ag</span>
            <span className="tc-name">{t.label}</span>
            <span className="tc-desc" style={{ fontFamily: t.text }}>{t.desc}</span>
            {cur === id && <span className="tc-check"><Icon name="check" size={13}/></span>}
          </button>
        ))}
      </div>
      <p className="muted" style={{ fontSize: 12, margin: '8px 0 0' }}>O tema muda as fontes dos títulos e textos do site público. Combine com a cor acima.</p>
    </div>
  );
}

/* preview ao vivo da localização — o mesmo mapa que o visitante vê no site */
function MapPreview({ location }) {
  const url = window.DEVO_MAPS_EMBED ? window.DEVO_MAPS_EMBED(location || {}) : null;
  const [src, setSrc] = useStateSite(url);
  React.useEffect(() => { const t = setTimeout(() => setSrc(url), 700); return () => clearTimeout(t); }, [url]); // espera terminar de digitar
  if (!src) return (
    <p className="muted" style={{ fontSize: 12.5, margin: 0, padding: '14px 16px', border: '1px dashed var(--line-strong)', borderRadius: 'var(--r-md)' }}>
      Preencha o endereço (ou cole o link do Google Maps) e o mapa real aparece aqui — e no site, clicável.
    </p>
  );
  return (
    <div className="map-prev">
      <iframe src={src} loading="lazy" referrerPolicy="no-referrer-when-downgrade" title="Localização no mapa"/>
    </div>
  );
}

function PhotoSlot({ id, label, style }) {
  return (
    <div style={{ marginTop: 6 }}>
      <span className="field-lab">{label}</span>
      <image-slot id={id} shape="rounded" radius="12" placeholder="Arraste uma foto" style={style}></image-slot>
    </div>
  );
}

function SitePublicoScreen({ site, setSite, toast }) {
  const set = (path, value) => setSite((s) => {
    const n = structuredClone(s); const ks = path.split('.'); let o = n;
    while (ks.length > 1) o = o[ks.shift()];
    o[ks[0]] = value; return n;
  });
  const setItem = (key, i, field, value) => setSite((s) => { const n = structuredClone(s); n[key][i][field] = value; return n; });
  const addItem = (key, item) => setSite((s) => { const n = structuredClone(s); n[key].push(item); return n; });
  const delItem = (key, i) => setSite((s) => { const n = structuredClone(s); n[key].splice(i, 1); return n; });

  const [saving, setSaving] = useStateSite(false);
  const saveNow = async () => {
    setSaving(true);
    try {
      const res = window.DEVO_PUBLISH_NOW ? await window.DEVO_PUBLISH_NOW() : { ok: true };
      if (res.ok) toast('Alterações salvas e publicadas no site ✓');
      else toast('Não consegui publicar agora — vou tentar de novo automaticamente.');
    } catch (e) { toast('Falha ao salvar — verifique a conexão.'); }
    finally { setSaving(false); }
  };

  return (
    <div className="awrap" style={{ maxWidth: 880 }}>
      <div className="panel" style={{ marginBottom: 18, background: 'var(--accent-tint)', borderColor: 'transparent' }}>
        <div className="panel-pad" style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
          <Icon name="globe" size={20} style={{ color: 'var(--accent-strong)', flex: 'none' }}/>
          <div style={{ flex: 1, minWidth: 200, fontSize: 13.5, color: 'var(--accent-strong)' }}>
            <b>Tudo aqui aparece no site público da igreja.</b> As alterações são salvas automaticamente.
          </div>
          <a className="btn btn-sm btn-primary" href="/" target="_blank" rel="noopener"><Icon name="eye" size={15}/>Ver site público</a>
        </div>
      </div>

      {/* identidade */}
      <Panel title="Identidade & marca">
        <div className="inp-row">
          <div className="flex1"><span className="field-lab">Nome da igreja</span><input className="inp" value={site.name} onChange={(e) => set('name', e.target.value)}/></div>
          <div style={{ width: 160 }}><span className="field-lab">Sigla (reserva)</span><input className="inp" value={site.logo} maxLength={6} onChange={(e) => set('logo', e.target.value)}/></div>
        </div>
        <div style={{ marginTop: 14 }}>
          <LogoUploader value={site.logoImg} onChange={(url) => set('logoImg', url)} toast={toast}/>
        </div>
        <div style={{ marginTop: 16 }}>
          <ColorPalette value={site.accent} onChange={(acc) => set('accent', acc)}/>
        </div>
        <div style={{ marginTop: 18 }}>
          <ThemePicker value={site.theme} onChange={(t) => set('theme', t)}/>
        </div>
        <div style={{ marginTop: 14 }}><span className="field-lab">Assinatura</span><input className="inp" value={site.tagline} onChange={(e) => set('tagline', e.target.value)}/></div>
      </Panel>

      {/* capa */}
      <div className="sec-h">Capa do site</div>
      <Panel>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div><span className="field-lab">Chamada (kicker)</span><input className="inp" value={site.hero.kicker} onChange={(e) => set('hero.kicker', e.target.value)}/></div>
          <div><span className="field-lab">Título principal</span><input className="inp big" value={site.hero.title} onChange={(e) => set('hero.title', e.target.value)}/></div>
          <div><span className="field-lab">Subtítulo</span><textarea className="inp" rows={2} value={site.hero.subtitle} onChange={(e) => set('hero.subtitle', e.target.value)} style={{ resize: 'vertical', lineHeight: 1.5 }}/></div>
          <PhotoSlot id="site-hero" label="Foto de capa (fundo do topo)" style={{ display: 'block', width: '100%', height: '150px' }}/>
        </div>
      </Panel>

      {/* horários */}
      <div className="sec-h">Horários de culto</div>
      <Panel>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {site.schedule.map((s, i) => (
            <div className="inp-row" key={i} style={{ alignItems: 'flex-end' }}>
              <div style={{ width: 130 }}><span className="field-lab">Dia</span><input className="inp" value={s.day} onChange={(e) => setItem('schedule', i, 'day', e.target.value)}/></div>
              <div style={{ width: 110 }}><span className="field-lab">Horário</span><input className="inp" value={s.time} onChange={(e) => setItem('schedule', i, 'time', e.target.value)}/></div>
              <div className="flex1"><span className="field-lab">Descrição</span><input className="inp" value={s.what} onChange={(e) => setItem('schedule', i, 'what', e.target.value)}/></div>
              <button className="del-btn" onClick={() => delItem('schedule', i)} aria-label="remover"><Icon name="trash" size={15}/></button>
            </div>
          ))}
          <button className="add-line" onClick={() => addItem('schedule', { day: 'Dia', time: '00h00', what: 'Novo encontro' })}><Icon name="plus" size={15}/>Adicionar horário</button>
        </div>
      </Panel>

      {/* localização */}
      <div className="sec-h">Como chegar</div>
      <Panel>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div><span className="field-lab">Endereço</span><input className="inp" value={site.location.address} onChange={(e) => set('location.address', e.target.value)}/></div>
          <div className="inp-row">
            <div className="flex1"><span className="field-lab">Telefone</span><input className="inp" value={site.location.phone} onChange={(e) => set('location.phone', e.target.value)}/></div>
          </div>
          <div><span className="field-lab">Texto de acolhimento</span><textarea className="inp" rows={2} value={site.location.blurb} onChange={(e) => set('location.blurb', e.target.value)} style={{ resize: 'vertical', lineHeight: 1.5 }}/></div>
          <div>
            <span className="field-lab">Link do Google Maps (localização exata)</span>
            <input className="inp" placeholder="https://maps.app.goo.gl/…" value={site.location.maps || ''} onChange={(e) => set('location.maps', e.target.value)}/>
            <p className="muted" style={{ fontSize: 12, margin: '6px 0 0', lineHeight: 1.5 }}>
              No Google Maps, busque a igreja → <b>Compartilhar</b> → <b>Copiar link</b> e cole aqui. No site, o mapa
              real aparece nesta seção e os botões “Traçar rota” e “Abrir no Google Maps” usam essa localização.
              {site.location.maps
                ? <> · <a href={site.location.maps} target="_blank" rel="noopener" style={{ color: 'var(--accent-strong)' }}>Testar link ↗</a></>
                : (site.location.address ? <> · Sem link, usamos a busca pelo endereço acima.</> : null)}
            </p>
          </div>
          <div>
            <span className="field-lab">Mapa exibido no site (ao vivo)</span>
            <MapPreview location={site.location}/>
          </div>
        </div>
      </Panel>

      {/* quem somos */}
      <div className="sec-h">Quem somos</div>
      <Panel>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div><span className="field-lab">Título</span><input className="inp big" value={site.about.heading} onChange={(e) => set('about.heading', e.target.value)}/></div>
          <div><span className="field-lab">Texto</span><textarea className="inp" rows={4} value={site.about.text} onChange={(e) => set('about.text', e.target.value)} style={{ resize: 'vertical', lineHeight: 1.6 }}/></div>
        </div>
        <div className="field-lab" style={{ marginTop: 18 }}>Galeria de fotos da igreja</div>
        <p className="muted" style={{ fontSize: 12.5, margin: '0 0 10px', lineHeight: 1.5 }}>Estas fotos passam em um slideshow na seção “Quem somos” do site. Adicione quantas quiser (até 8).</p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(130px, 1fr))', gap: 10 }}>
          {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (
            <image-slot key={i} id={`site-gallery-${i}`} shape="rounded" radius="12" placeholder="Foto da igreja" style={{ display: 'block', width: '100%', aspectRatio: '4/3' }}></image-slot>
          ))}
        </div>
        <div className="field-lab" style={{ marginTop: 18 }}>Liderança</div>
        <div className="pastor-edit-grid">
          {site.pastors.map((p, i) => (
            <div className="pastor-edit" key={i}>
              <image-slot id={`site-pastor-${i}`} shape="rounded" radius="12" placeholder="retrato" style={{ display: 'block', width: '100%', aspectRatio: '1' }}></image-slot>
              <input className="inp" value={p.name} onChange={(e) => setItem('pastors', i, 'name', e.target.value)} placeholder="Nome"/>
              <input className="inp" value={p.role} onChange={(e) => setItem('pastors', i, 'role', e.target.value)} placeholder="Função" style={{ fontSize: 12.5 }}/>
              <button className="del-btn" style={{ alignSelf: 'flex-start' }} onClick={() => delItem('pastors', i)} aria-label="remover"><Icon name="trash" size={14}/></button>
            </div>
          ))}
          {site.pastors.length < 4 && (
            <button className="pastor-add" onClick={() => addItem('pastors', { name: 'Novo líder', role: 'Função' })}>
              <Icon name="plus" size={20}/>Adicionar
            </button>
          )}
        </div>
      </Panel>

      {/* nossa história */}
      <div className="sec-h">Nossa história</div>
      <Panel>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div><span className="field-lab">Título da seção</span><input className="inp big" value={(site.about && site.about.storyHeading) || ''} onChange={(e) => set('about.storyHeading', e.target.value)} placeholder="A nossa caminhada"/></div>
          <div><span className="field-lab">História da igreja</span><textarea className="inp" rows={8} value={(site.about && site.about.story) || ''} onChange={(e) => set('about.story', e.target.value)} style={{ resize: 'vertical', lineHeight: 1.6 }} placeholder="Conte como a igreja nasceu, os marcos da caminhada, a visão… (pode usar vários parágrafos)"/></div>
          <p className="muted" style={{ fontSize: 12.5, margin: 0, lineHeight: 1.5 }}>Aparece como uma aba própria (“Nossa história”) no site público. Se ficar vazio, a aba não aparece.</p>
        </div>
      </Panel>

      {/* contato */}
      <div className="sec-h">Contato & redes</div>
      <Panel>
        <div className="inp-row">
          <div className="flex1"><span className="field-lab">E-mail</span><input className="inp" value={site.contact.email} onChange={(e) => set('contact.email', e.target.value)}/></div>
          <div className="flex1"><span className="field-lab">Instagram</span><input className="inp" value={site.contact.instagram} onChange={(e) => set('contact.instagram', e.target.value)}/></div>
        </div>
        <div className="inp-row" style={{ marginTop: 12 }}>
          <div className="flex1"><span className="field-lab">YouTube</span><input className="inp" value={site.contact.youtube} onChange={(e) => set('contact.youtube', e.target.value)}/></div>
          <div className="flex1"><span className="field-lab">WhatsApp</span><input className="inp" value={site.contact.whatsapp} onChange={(e) => set('contact.whatsapp', e.target.value)}/></div>
        </div>
      </Panel>

      <div className="cedit-actions" style={{ background: 'transparent' }}>
        <span className="muted" style={{ fontSize: 12.5 }}><Icon name="check" size={14} style={{ verticalAlign: -2, color: 'var(--accent)' }}/> As alterações também são salvas automaticamente</span>
        <div className="flex1"></div>
        <a className="btn btn-quiet btn-sm" href="/" target="_blank" rel="noopener"><Icon name="eye" size={15}/>Ver site público</a>
        <button className="btn btn-primary btn-sm" disabled={saving} onClick={saveNow}>
          <Icon name="check" size={15}/>{saving ? 'Salvando…' : 'Salvar alterações'}
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { SitePublicoScreen });