/* Angélica & Danilo — wedding site (React) */
const { useState, useEffect, useRef } = React;
const {
  CONTACT_NAME_KEY,
  CONTACT_WHATSAPP_KEY,
  ENIGMA_WRONG_NOTIFIED_KEY,
  ENIGMA_TOTAL_ERRORS_KEY,
  ENIGMA_LAST_AGGREGATE_KEY,
  buildEnigmaPayload,
  buildWrongAttemptState,
  shouldNotifyWrongAttempt,
} = window.EnigmaLogic;

const LS = 'ad:';
const norm = s => (s || '').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').trim();

/* ---------- Online = s\u00f3 countdown (local mostra tudo; ?full=1 for\u00e7a completo) ---------- */
const ONLINE_ONLY = (() => {
  const p = new URLSearchParams(location.search);
  if (p.get('online') === '1') return true;   // força preview do modo online no local
  if (p.get('full') === '1') return false;     // força site completo online
  const isLocal = ['localhost', '127.0.0.1', ''].includes(location.hostname);
  return !isLocal;
})();

/* ---------- Notifica\u00e7\u00e3o Telegram (via /api/notify) \u2014 erros s\u00e3o engolidos ---------- */
function notificar(tipo, dados) {
  return fetch('/api/notify', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ tipo, dados }),
  }).then(r => r.ok).catch(() => false);
}

/* ---------- Editable text that PERSISTS to localStorage ---------- */
function Editable({ id, ph = '', def = '', as = 'span', className = '', style }) {
  const ref = useRef(null);
  const Tag = as;
  useEffect(() => {
    const saved = localStorage.getItem(LS + id);
    if (ref.current) ref.current.textContent = saved != null ? saved : def;
  }, [id]);
  const save = () => localStorage.setItem(LS + id, ref.current.textContent.trim());
  return (
    <Tag
      ref={ref}
      className={'editable ' + className}
      contentEditable
      suppressContentEditableWarning
      spellCheck={false}
      data-ph={ph}
      style={style}
      onBlur={save}
    />
  );
}

/* ---------- icons ---------- */
const Ico = ({ d, ...p }) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" {...p}>{d}</svg>
);

/* ---------- NAV ---------- */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    addEventListener('scroll', on, { passive: true });
    return () => removeEventListener('scroll', on);
  }, []);
  return (
    <nav className={scrolled ? 'scrolled' : ''}>
      <div className="mono">A <span className="amp">&amp;</span> D</div>
      <div className="links">
        <a href="#historia">Nossa História</a>
        <a href="#cerimonia">A Cerimônia</a>
        <a href="#traje">Traje</a>
        <a href="#presentes">Presentes</a>
      </div>
    </nav>
  );
}

/* ---------- COUNTDOWN ---------- */
const TARGET = new Date(2026, 11, 12, 16, 0, 0).getTime();
const pad = n => String(n).padStart(2, '0');
function Countdown() {
  const [t, setT] = useState(() => calc());
  function calc() {
    const diff = TARGET - Date.now();
    return {
      d: Math.max(0, Math.floor(diff / 86400000)),
      h: Math.max(0, Math.floor((diff % 86400000) / 3600000)),
      m: Math.max(0, Math.floor((diff % 3600000) / 60000)),
      s: Math.max(0, Math.floor((diff % 60000) / 1000)),
    };
  }
  useEffect(() => {
    const i = setInterval(() => setT(calc()), 1000);
    return () => clearInterval(i);
  }, []);
  const Unit = ({ n, l }) => (
    <div className="cd-unit"><div className="cd-num">{n}</div><div className="cd-lbl">{l}</div></div>
  );
  return (
    <div className="countdown" aria-label="Contagem regressiva">
      <Unit n={t.d} l="Dias" />
      <Unit n={pad(t.h)} l="Horas" />
      <Unit n={pad(t.m)} l="Minutos" />
      <Unit n={pad(t.s)} l="Segundos" />
    </div>
  );
}

/* ---------- AVISE-ME (nome + WhatsApp → Telegram, com cache) ---------- */
const CONTATO_DONE = LS + 'contato-enviado';

// Normaliza para só dígitos, removendo o código do país (55) se vier.
function digitsBR(v) {
  let d = (v || '').replace(/\D/g, '');
  if (d.length > 11 && d.startsWith('55')) d = d.slice(2);
  return d;
}
// Celular BR válido: DDD (2 díg, 11–99) + 9 + 8 dígitos.
const foneValido = d => /^[1-9]{2}9\d{8}$/.test(d);

function Recado({ onContatoEnviado }) {
  const [nome, setNome] = useState(() => localStorage.getItem(CONTACT_NAME_KEY) || '');
  const [whats, setWhats] = useState(() => localStorage.getItem(CONTACT_WHATSAPP_KEY) || '');
  const [status, setStatus] = useState(() =>
    localStorage.getItem(CONTATO_DONE) ? 'ok' : 'idle'); // idle | enviando | ok
  const [erro, setErro] = useState('');

  const enviar = async e => {
    e.preventDefault();
    setErro('');
    const d = digitsBR(whats);
    if (nome.trim().length < 2) { setErro('Pode colocar seu nome?'); return; }
    if (!foneValido(d)) { setErro('Confere o WhatsApp com DDD — ex: (11) 91234-5678.'); return; }
    setStatus('enviando');
    const ok = await notificar('contato', { nome: nome.trim(), whatsapp: '55' + d });
    if (ok) {
      localStorage.setItem(CONTATO_DONE, '1');
      setStatus('ok');
      onContatoEnviado?.();
    } else { setStatus('idle'); setErro('Não foi dessa vez — tenta de novo?'); }
  };

  if (status === 'ok') {
    return (
      <div className="recado recado-ok">
        Prontinho! 💛
        <span>Você está na lista — a gente te chama no WhatsApp assim que o site completo estiver no ar.</span>
      </div>
    );
  }

  return (
    <form className="recado" onSubmit={enviar}>
      <span className="label">Quase lá 🌿</span>
      <p className="recado-intro">
        Em breve esta página ganha tudo: local, confirmação de presença, presentes e mais.
        Deixe seu nome e WhatsApp que a gente te avisa em primeira mão.
      </p>
      <input
        type="text" placeholder="Seu nome" value={nome}
        onChange={e => {
          const value = e.target.value;
          setNome(value);
          localStorage.setItem(CONTACT_NAME_KEY, value);
        }} autoComplete="name" maxLength={60}
      />
      <input
        type="tel" placeholder="WhatsApp com DDD — (11) 91234-5678" value={whats}
        onChange={e => {
          const value = e.target.value;
          setWhats(value);
          localStorage.setItem(CONTACT_WHATSAPP_KEY, value);
        }} autoComplete="tel" inputMode="tel" maxLength={20}
      />
      <button type="submit" disabled={status === 'enviando'}>
        {status === 'enviando' ? 'Enviando…' : 'Quero ser avisado'}
      </button>
      {erro && <small className="recado-erro">{erro}</small>}
    </form>
  );
}

/* ---------- HERO ---------- */
function Hero({ withRecado = false, onContatoEnviado }) {
  return (
    <header className="hero" id="topo">
      <div className="frame"></div>
      <div className="pretitle label">Vamos nos casar</div>
      <h1 className="names">Angélica<span className="amp">&amp;</span>Danilo</h1>
      <div className="meta">
        <span>Sábado</span><i className="dot"></i><span>12 de Dezembro</span><i className="dot"></i><span>2026</span>
      </div>
      <Countdown />
      {withRecado
        ? <Recado onContatoEnviado={onContatoEnviado} />
        : <div className="scrollcue"><span>Role</span><div className="line"></div></div>}
    </header>
  );
}

/* ---------- STORY ---------- */
function Story() {
  return (
    <section className="sec" id="historia">
      <div className="wrap">
        <div className="story-grid">
          <div className="story-copy">
            <div className="yr serif">2009</div>
            <h3>Tudo começou com<br />uma mensagem no Orkut.</h3>
            <p>Antes dos stories e das curtidas, foi num <b>scrap</b> que nossa história começou. Uma conversa que era pra durar minutos virou madrugadas, anos — e a certeza de querer dividir a vida.</p>
            <p>De lá pra cá foram muitas estradas, risadas e planos. Agora chegou a hora de dar o passo mais bonito de todos, cercados por quem a gente ama.</p>
            <div className="orkut-chip"><span className="heart">♥</span> Conectados desde 2009</div>
          </div>
          <div className="story-photos">
            <image-slot id="story-1" style={{ width: '100%', aspectRatio: '16/10' }} shape="rounded" radius="4" placeholder="Foto do casal (destaque)"></image-slot>
            <image-slot id="story-2" style={{ width: '100%', aspectRatio: '3/4' }} shape="rounded" radius="4" placeholder="Foto"></image-slot>
            <image-slot id="story-3" style={{ width: '100%', aspectRatio: '3/4' }} shape="rounded" radius="4" placeholder="Foto"></image-slot>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- CEREMONY ---------- */
function Ceremony() {
  return (
    <section className="sec alt" id="cerimonia">
      <div className="wrap">
        <div className="sec-head">
          <span className="label">O grande dia</span>
          <h2>A Cerimônia</h2>
          <p>Será uma alegria ter você ao nosso lado neste momento. Anote a data no coração.</p>
        </div>
        <div className="cer-card">
          <div className="cer-info">
            <div className="cer-date">
              <div className="big">12<span style={{ fontSize: '.4em', display: 'block', letterSpacing: '.1em', marginTop: '6px' }}>DEZ 2026</span></div>
              <div className="stack">
                <span className="strong">Sábado</span>
                <span>às <Editable id="hora" def="16h00" /></span>
                <span>Chegada dos convidados a partir das <Editable id="hora-cheg" def="15h30" /></span>
              </div>
            </div>
            <div className="cer-row">
              <div className="k">Local</div>
              <div className="v"><Editable id="local-nome" ph="[nome do local]" /><small>Clique para editar</small></div>
            </div>
            <div className="cer-row">
              <div className="k">Endereço</div>
              <div className="v"><Editable id="local-end" ph="[Rua, número — Bairro]" /><small><Editable id="local-cidade" ph="Cidade — Estado" /></small></div>
            </div>
            <div className="cer-row">
              <div className="k">Chegada</div>
              <div className="v">Pedimos a gentileza de chegar com<br />20 minutos de antecedência.</div>
            </div>
          </div>
          <div className="cer-map">
            <div className="pin">
              <Ico className="ico" d={<><path d="M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z" /><circle cx="12" cy="10" r="2.5" /></>} />
              <span>Mapa em breve</span>
              <small style={{ letterSpacing: '.04em', textTransform: 'none', fontSize: '.78rem', color: 'var(--olive-deep)', maxWidth: '220px' }}>Assim que o local for confirmado, o mapa aparece aqui.</small>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- DRESS ---------- */
function Dress() {
  const swatches = [
    ['#5E6647', 'Oliva'], ['#8A9472', 'Sálvia'], ['#E3D7C3', 'Areia'],
    ['#C98B6E', 'Terracota'], ['#38332B', 'Grafite'],
  ];
  return (
    <section className="sec" id="traje">
      <div className="wrap">
        <div className="dress-grid">
          <image-slot id="dress-photo" style={{ width: '100%', aspectRatio: '4/5' }} shape="rounded" radius="4" placeholder="Foto inspiração / casal"></image-slot>
          <div className="dress-copy">
            <span className="label">Dress code</span>
            <h3 style={{ marginTop: '16px' }}>Traje Social<br />Completo</h3>
            <p>Queremos todos elegantes e confortáveis para celebrar conosco. Uma sugestão de tons que combinam com a nossa paleta botânica:</p>
            <div className="swatches">
              {swatches.map(([c, n]) => (
                <div className="sw" key={n}><div className="chip" style={{ background: c }}></div><small>{n}</small></div>
              ))}
            </div>
            <div className="dress-note"><b>Reservado aos noivos:</b> o branco e o off-white. 🌿 Contamos com você!</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- GIFTS ---------- */
function Gifts() {
  const [copied, setCopied] = useState(false);
  const copyPix = () => {
    const key = localStorage.getItem(LS + 'pix') || 'angelica.danilo@email.com';
    navigator.clipboard && navigator.clipboard.writeText(key);
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };
  return (
    <section className="sec alt" id="presentes">
      <div className="wrap">
        <div className="sec-head">
          <span className="label">Com carinho</span>
          <h2>Presentes</h2>
          <p>A sua presença já é o nosso maior presente. Mas se quiser nos abençoar com um carinho extra, deixamos algumas opções.</p>
        </div>
        <div className="gift-grid">
          <div className="gift-card">
            <Ico className="ico" d={<><rect x="3" y="8" width="18" height="13" rx="1" /><path d="M3 12h18M12 8v13M12 8s-1.5-5-4.5-4S9 8 12 8Zm0 0s1.5-5 4.5-4S15 8 12 8Z" /></>} />
            <h4>Lista de Presentes</h4>
            <p>Em breve disponibilizaremos a nossa lista para quem preferir presentear com um item.</p>
          </div>
          <div className="gift-card">
            <Ico className="ico" d={<><path d="M12 3 21 12l-9 9-9-9 9-9Z" /><path d="M9 12h6M12 9v6" /></>} />
            <h4>Pix</h4>
            <p>A forma mais simples de nos ajudar a realizar os próximos sonhos do casal.</p>
            <div className="pix-box">
              <Editable as="code" id="pix" def="angelica.danilo@email.com" />
              <button className="copy-btn" onClick={copyPix}>{copied ? 'Copiado!' : 'Copiar'}</button>
            </div>
          </div>
          <div className="gift-card">
            <Ico className="ico" d={<path d="M3 9 12 3l9 6v11a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V9Z" />} />
            <h4>Cota Lua de Mel</h4>
            <p>Ajude a tornar nossa primeira viagem como marido e mulher ainda mais especial.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */
function Footer() {
  return (
    <footer>
      <svg className="sprig" width="120" height="34" viewBox="0 0 120 34" fill="none" stroke="currentColor" strokeWidth="1" style={{ color: '#A7AC8C', marginBottom: '26px' }}>
        <path d="M60 32V6" /><path d="M60 14c-6-2-11-5-13-10M60 14c6-2 11-5 13-10" /><path d="M60 22c-5-1-9-4-11-8M60 22c5-1 9-4 11-8" />
      </svg>
      <div className="names">Angélica <span className="amp">&amp;</span> Danilo</div>
      <div className="date">12 . 12 . 2026</div>
      <div className="thanks">Mal podemos esperar para celebrar com você.</div>
      <div className="credit">Feito com amor · A &amp; D 2026</div>
    </footer>
  );
}

/* ---------- SECRET SEAL + ENIGMA ---------- */
function Enigma({ quieto = false }) {
  const [open, setOpen] = useState(false);
  const [solved, setSolved] = useState(false);
  const [hint, setHint] = useState('');
  const q1 = useRef(null), q2 = useRef(null);

  useEffect(() => {
    const esc = e => { if (e.key === 'Escape') setOpen(false); };
    addEventListener('keydown', esc);
    return () => removeEventListener('keydown', esc);
  }, []);

  const getContatoSalvo = () => {
    const nome = localStorage.getItem(CONTACT_NAME_KEY) || '';
    const whats = localStorage.getItem(CONTACT_WHATSAPP_KEY) || '';
    const d = digitsBR(whats);
    return buildEnigmaPayload({
      nome,
      whatsapp: foneValido(d) ? '55' + d : '',
    });
  };

  const solve = () => {
    const a1 = norm(q1.current.value), a2 = norm(q2.current.value);
    const ok1 = a1.includes('orkut'), ok2 = a2.includes('2009');
    if (ok1 && ok2) {
      setSolved(true);
      notificar('enigma-acerto', getContatoSalvo());
      return;
    }

    const wrongAttemptState = buildWrongAttemptState({
      totalErrors: Number(localStorage.getItem(ENIGMA_TOTAL_ERRORS_KEY) || '0'),
      lastAggregateNotified: Number(localStorage.getItem(ENIGMA_LAST_AGGREGATE_KEY) || '0'),
    });
    localStorage.setItem(ENIGMA_TOTAL_ERRORS_KEY, String(wrongAttemptState.totalErrors));

    if (shouldNotifyWrongAttempt({
      alreadyNotified: localStorage.getItem(ENIGMA_WRONG_NOTIFIED_KEY) === '1',
    })) {
      localStorage.setItem(ENIGMA_WRONG_NOTIFIED_KEY, '1');
      notificar('enigma-erro', getContatoSalvo());
    }

    if (wrongAttemptState.shouldNotifyAggregate) {
      localStorage.setItem(
        ENIGMA_LAST_AGGREGATE_KEY,
        String(wrongAttemptState.lastAggregateNotified),
      );
      notificar('enigma-erro-resumo', { total: wrongAttemptState.aggregateTotal });
    }

    if (!ok1 && !ok2) setHint('Quase... pense no comecinho de tudo, lá por volta de 2009. 💭');
    else if (!ok1) setHint('O ano está certo! Mas onde mesmo foi aquele primeiro scrap? 😉');
    else setHint('O lugar está certo! Agora, em que ano isso aconteceu?');
  };
  const onKey = e => { if (e.key === 'Enter') solve(); };

  return (
    <>
      <button className={`seal${quieto ? ' seal--quieto' : ''}`} title="..." aria-label="Algo misterioso" onClick={() => setOpen(true)}>A&amp;D</button>
      {open && (
        <div className="modal-bg" onClick={e => { if (e.target === e.currentTarget) setOpen(false); }}>
          <div className="modal">
            <button className="x" aria-label="Fechar" onClick={() => setOpen(false)}>×</button>
            {!solved ? (
              <div className="quiz">
                <span className="label">Apenas para quem nos conhece</span>
                <h3>Um pequeno enigma</h3>
                <p className="sub">Responda às duas perguntas e desbloqueie uma mensagem secreta nossa. 🤫</p>
                <div className="q">
                  <label>Onde a gente se conheceu?</label>
                  <input ref={q1} type="text" placeholder="Sua resposta..." autoComplete="off" onKeyDown={onKey} />
                </div>
                <div className="q">
                  <label>Desde que ano nos conhecemos?</label>
                  <input ref={q2} type="text" placeholder="Um ano..." autoComplete="off" inputMode="numeric" onKeyDown={onKey} />
                </div>
                <button className="solve" onClick={solve}>Desvendar</button>
                <div className="hint">{hint}</div>
              </div>
            ) : (
              <div className="reveal">
                <div className="seal-big">♥</div>
                <span className="label">Segredo desbloqueado</span>
                <h3>Você nos conhece de verdade.</h3>
                <p>Se você chegou até aqui, é porque faz parte da nossa história há muito tempo — e por isso esse dia não seria o mesmo sem você.</p>
                <p style={{ marginTop: '14px', color: 'var(--ink)' }}>E fica entre nós: guardamos uma <b style={{ fontWeight: 400, color: 'var(--terracotta)' }}>surpresa</b> para o dia 12.12. Fique de olho... 👀</p>
                <div className="sign">Com amor, Angélica &amp; Danilo</div>
              </div>
            )}
          </div>
        </div>
      )}
    </>
  );
}

/* ---------- EDIT TIP toast ---------- */
function EditTip() {
  const [show, setShow] = useState(() => !localStorage.getItem(LS + 'tip-dismissed'));
  if (!show) return null;
  const dismiss = () => { localStorage.setItem(LS + 'tip-dismissed', '1'); setShow(false); };
  return (
    <div className="edit-tip">
      ✦ Textos sublinhados são editáveis — clique e digite. <button onClick={dismiss}>Ok, entendi</button>
    </div>
  );
}

/* ---------- APP ---------- */
function App() {
  const [contatoDone, setContatoDone] = useState(() => !!localStorage.getItem(CONTATO_DONE));

  useEffect(() => {
    if (sessionStorage.getItem(LS + 'visita-notificada')) return;
    sessionStorage.setItem(LS + 'visita-notificada', '1');
    notificar('visita');
  }, []);

  if (ONLINE_ONLY) {
    return (
      <>
        <Hero withRecado onContatoEnviado={() => setContatoDone(true)} />
        <Enigma quieto={contatoDone} />
      </>
    );
  }

  return (
    <>
      <Nav />
      <Hero />
      <Story />
      <Ceremony />
      <Dress />
      <Gifts />
      <Footer />
      <Enigma quieto={contatoDone} />
      <EditTip />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);