/* ============================================================
   client.jsx — Tela do CLIENTE (link provisório ?p=&t=&d=)
   Termo → assinatura → pagamento PIX → conclusão.
   Sem login, sem sidebar, sem config da conta.
   ============================================================ */
function ClientTerm({ deal }) {
  const c = deal.cliente || {};
  const metodo = (window.PAYMENT_METHODS.find(m => m.id === deal.pagamento) || {}).nome || '—';
  const hoje = new Date().toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric' });
  return (
    <article className="term">
      <div className="term-head">
        <BrandLogo dark height={36} />
        <div className="col" style={{ alignItems: 'flex-end', textAlign: 'right' }}>
          <span className="eyebrow">Termo de Contratação</span>
          <span style={{ fontSize: 12.5, color: 'var(--text-3)' }}>{hoje}</span>
        </div>
      </div>
      <div className="term-block">
        <span className="term-label">Contratante</span>
        <div className="term-grid">
          <div><b>{c.nome || '—'}</b>{c.empresa ? ` · ${c.empresa}` : ''}</div>
          <div>{c.doc || '—'}</div>
          <div>{c.email || '—'}</div>
          <div>{c.whatsapp || '—'}</div>
        </div>
        {c.endereco && <div style={{ fontSize: 13, color: 'var(--text-2)', marginTop: 6 }}>{c.endereco}</div>}
      </div>
      <div className="term-block">
        <span className="term-label">Serviços contratados</span>
        <table className="term-table">
          <thead><tr><th>Serviço</th><th>Prazo</th><th style={{ textAlign: 'right' }}>Valor</th></tr></thead>
          <tbody>
            {(deal.items || []).map(it => (
              <tr key={it.id}>
                <td>{it.nome}{it.obs ? <span className="term-obs"> — {it.obs}</span> : ''}</td>
                <td>{it.prazo}</td>
                <td className="mono" style={{ textAlign: 'right' }}>{fmtBRL(it.preco)}</td>
              </tr>
            ))}
          </tbody>
          <tfoot>
            {deal.recorrente > 0 && <tr><td colSpan="2">Recorrente mensal</td><td className="mono" style={{ textAlign: 'right' }}>{fmtBRL(deal.recorrente)}</td></tr>}
            <tr className="term-total"><td colSpan="2">Valor total</td><td className="mono" style={{ textAlign: 'right' }}>{fmtBRL(deal.total)}</td></tr>
          </tfoot>
        </table>
      </div>
      <div className="term-block term-cond">
        <div><span className="term-label">Forma de pagamento</span><div>{metodo}</div></div>
        {deal.obsGeral && <div><span className="term-label">Observações</span><div style={{ fontSize: 13 }}>{deal.obsGeral}</div></div>}
      </div>
      <p className="term-legal">
        Declaro estar de acordo com os serviços, valores e condições comerciais apresentados pela
        <b> {window.brandName()}</b>, autorizando a continuidade do processo de contratação.
      </p>
    </article>
  );
}

function ClientPayment({ total, onPaid, busy }) {
  const [copied, setCopied] = React.useState(false);
  const pixCfg = window.PIX_DEFAULT;
  const payload = window.buildPixPayload({ ...pixCfg, valor: total });
  const hoje = new Date().toLocaleDateString('pt-BR');
  const copy = () => { navigator.clipboard?.writeText(payload); setCopied(true); setTimeout(() => setCopied(false), 1800); };
  return (
    <div className="fade-up">
      <header className="step-head" style={{ marginBottom: 22 }}>
        <Badge tone="green" dot>Aceite registrado</Badge>
        <h1>Pagamento via PIX</h1>
        <p>Escaneie o QR Code ou use o PIX copia e cola para concluir.</p>
      </header>
      <div className="pay-card">
        <div className="pay-qr"><QRCode text={payload} size={216} /></div>
        <div className="pay-info">
          <div className="pay-amount">
            <span className="eyebrow">Valor a pagar</span>
            <span className="mono" style={{ fontSize: 38, fontWeight: 700, fontFamily: 'var(--font-display)' }}>{fmtBRL(total)}</span>
          </div>
          <div className="pay-meta">
            <div className="row" style={{ justifyContent: 'space-between' }}><span>Recebedor</span><b>{pixCfg.nome}</b></div>
            <div className="row" style={{ justifyContent: 'space-between' }}><span>Chave PIX</span><b style={{ maxWidth: '60%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{pixCfg.chave}</b></div>
            <div className="row" style={{ justifyContent: 'space-between' }}><span>Data</span><b>{hoje}</b></div>
          </div>
          <div className="pix-cc">
            <span className="eyebrow">PIX copia e cola</span>
            <div className="pix-code">{payload}</div>
            <Button full variant="ghost" icon={copied ? 'check' : 'copy'} onClick={copy}>{copied ? 'Código copiado' : 'Copiar código PIX'}</Button>
          </div>
          <Button full size="lg" variant="yellow" icon="check" onClick={onPaid} disabled={busy}
            style={busy ? { opacity: .6, pointerEvents: 'none' } : {}}>
            {busy ? 'Confirmando…' : 'Já realizei o pagamento'}
          </Button>
        </div>
      </div>
    </div>
  );
}

function ClientView({ params }) {
  const { p: id, t: token, d: enc, c } = params;
  const code = c || token || '';
  const [deal, setDeal] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState('');
  const [phase, setPhase] = React.useState('term');   // term | pay | done
  const [aceito, setAceito] = React.useState(false);
  const [nome, setNome] = React.useState('');
  const [cpf, setCpf] = React.useState('');
  const [assinaturaImg, setAssinaturaImg] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [warn, setWarn] = React.useState('');
  const [diag, setDiag] = React.useState(null);
  const [source, setSource] = React.useState(null);   // 'cloud' | 'link'
  const [syncErr, setSyncErr] = React.useState('');    // erro do client_set_status, se houver
  const scrollRef = React.useRef(null);

  const hasData = (d) => !!(d && d.cliente && (d.cliente.nome || (d.items && d.items.length)));

  /* carga inicial: tenta nuvem (RPC) e cai no payload codificado; usa a fonte que tiver dados */
  React.useEffect(() => {
    (async () => {
      const info = { mode: window.crmStore.mode, hasCloud: !!window.crmStore.hasCloud, id: id || '(curto)', token: code ? 'ok' : '(vazio)', encLen: (enc || '').length, cloud: '—', encOk: false };
      let cloudDeal = null, encDeal = null;

      if (window.crmStore.hasCloud && code) {
        try { cloudDeal = await window.crmStore.clientGet(code, code); info.cloud = hasData(cloudDeal) ? 'ok' : 'vazio'; }
        catch (e) { info.cloud = 'erro: ' + ((e && e.message) || e); }
      } else { info.cloud = 'não tentado'; }

      if (enc) {
        encDeal = (typeof window.decodeShare === 'function')
          ? window.decodeShare(enc)
          : (function () { try { let s = String(enc).replace(/ /g, '+').replace(/-/g, '+').replace(/_/g, '/'); while (s.length % 4) s += '='; return JSON.parse(decodeURIComponent(escape(atob(s)))); } catch (e) { return null; } })();
        info.encOk = hasData(encDeal);
      }
      console.log('[D Digital CRM] diagnóstico do link:', info, { cloudDeal, encDeal });

      // escolhe a melhor fonte: a que efetivamente tem dados (nuvem tem prioridade)
      const fromCloud = hasData(cloudDeal);
      const d = fromCloud ? cloudDeal : (hasData(encDeal) ? encDeal : (cloudDeal || encDeal));
      if (!hasData(d)) {
        setDiag(info);
        setError('Não foi possível carregar os dados desta proposta.');
        setLoading(false);
        return;
      }
      setSource(fromCloud ? 'cloud' : 'link');
      if (!window.crmStore.hasCloud) setWarn('offline');
      setNome((d.cliente && d.cliente.nome) || '');
      setCpf((d.cliente && d.cliente.doc) || '');
      setDeal(d); setLoading(false);
    })();
  }, [code, id, token, enc]);

  const goPay = async () => {
    if (!aceito) { setWarn('Marque o aceite dos termos para continuar.'); return; }
    if (!nome.trim()) { setWarn('Informe seu nome completo.'); return; }
    setWarn(''); setBusy(true);
    const assinatura = { nome: nome.trim(), cpf, signedAt: Date.now() };
    try { if (window.crmStore.hasCloud) await window.crmStore.clientSetStatus(code, code, 'aceite', assinatura); }
    catch (e) { console.error('[D Digital CRM] client_set_status (aceite) falhou:', e); setSyncErr((e && e.message) || String(e)); }
    setBusy(false); setPhase('pay');
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
  };
  const confirmPaid = async () => {
    setBusy(true);
    let ok = true;
    try { if (window.crmStore.hasCloud) await window.crmStore.clientSetStatus(code, code, 'pagamento', null); }
    catch (e) { console.error('[D Digital CRM] client_set_status (pagamento) falhou:', e); setSyncErr((e && e.message) || String(e)); ok = false; }
    // verificação: relê da nuvem para confirmar que o status realmente mudou
    if (ok && window.crmStore.hasCloud) {
      try {
        const check = await window.crmStore.clientGet(code, code);
        if (!check || check.stage !== 'pagamento') setSyncErr('A confirmação não chegou ao sistema (link antigo?). Avise seu contato pelo WhatsApp.');
      } catch (e) { setSyncErr('Não foi possível confirmar com o sistema. Avise seu contato pelo WhatsApp.'); }
    }
    setBusy(false); setPhase('done');
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
  };

  if (loading) return <div className="boot app-bg"><div className="boot-spin" /></div>;

  return (
    <div className="client-shell app-bg">
      <header className="client-top">
        <BrandLogo height={26} />
        <span className="client-secure"><Icon name="lock" size={13} /> Ambiente seguro</span>
      </header>

      <div className="client-scroll" ref={scrollRef}>
        <div className="client-wrap">
          {error && (
            <div className="client-error fade-up">
              <div className="seal" style={{ background: 'rgba(240,85,107,.1)', color: 'var(--danger)' }}><Icon name="x" size={26} stroke={3} /></div>
              <h1 style={{ fontSize: 22 }}>Link indisponível</h1>
              <p style={{ color: 'var(--text-3)', maxWidth: 380, margin: '8px auto 0' }}>{error} Solicite um novo ao seu contato na {window.brandName()}.</p>
              {diag && (
                <details className="diag-box">
                  <summary>Detalhes técnicos</summary>
                  <ul>
                    <li>Modo: <b>{diag.mode}</b> · nuvem: <b>{String(diag.hasCloud)}</b></li>
                    <li>ID: <b>{diag.id}</b> · token: <b>{diag.token}</b></li>
                    <li>Busca na nuvem: <b>{diag.cloud}</b></li>
                    <li>Dados no link (d=): <b>{diag.encLen} chars</b> · válido: <b>{String(diag.encOk)}</b></li>
                  </ul>
                  <p>Se "Busca na nuvem" indicar erro, falta rodar o <b>passo 7</b> no Supabase. Se o "d=" estiver com 0 chars, o link foi cortado ao enviar — gere e copie o link inteiro.</p>
                </details>
              )}
            </div>
          )}

          {!error && deal && phase === 'term' && (
            <div className="fade-up">
              <header className="step-head" style={{ marginBottom: 22 }}>
                <Badge tone="yellow" dot>Proposta comercial</Badge>
                <h1>Olá{(deal.cliente.nome ? ', ' + deal.cliente.nome.split(' ')[0] : '')} 👋</h1>
                <p>Revise sua proposta abaixo, assine e siga para o pagamento.</p>
              </header>

              <ClientTerm deal={deal} />

              <div className="accept-box" style={{ marginTop: 22 }}>
                <label className="accept-check">
                  <input type="checkbox" checked={aceito} onChange={(e) => setAceito(e.target.checked)} />
                  <span className="accept-mark"><Icon name="check" size={14} stroke={3} /></span>
                  <span>Li e <b>aceito</b> os termos, valores e condições comerciais acima.</span>
                </label>
                <div className="form-grid" style={{ marginTop: 4 }}>
                  <Field label="Nome completo" icon="user" placeholder="Seu nome" value={nome} onChange={(e) => setNome(e.target.value)} />
                  <Field label="CPF" icon="doc" placeholder="000.000.000-00" value={cpf} onChange={(e) => setCpf(maskDoc(e.target.value))} inputMode="numeric" />
                </div>
                <div className="col gap-2">
                  <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-2)' }}>Assinatura digital</span>
                  <SignaturePad onChange={() => {}} onCapture={(img) => setAssinaturaImg(img)} />
                </div>
                {warn && <div className="auth-err">{warn}</div>}
                <Button full size="lg" variant="yellow" icon="check" onClick={goPay} disabled={busy}
                  style={busy ? { opacity: .6, pointerEvents: 'none' } : {}}>
                  {busy ? 'Registrando…' : 'Confirmar aceite e ir para pagamento'}
                </Button>
              </div>
            </div>
          )}

          {!error && deal && phase === 'pay' && (
            <ClientPayment total={deal.total} onPaid={confirmPaid} busy={busy} />
          )}

          {!error && deal && phase === 'done' && (
            <div className="client-done fade-up">
              <div className="seal" style={syncErr ? { background: 'var(--yellow-ghost)', color: 'var(--brand-yellow)' } : {}}>
                <Icon name="check" size={30} stroke={3} />
              </div>
              <h1 style={{ fontSize: 26 }}>Tudo certo! 🎉</h1>
              <p style={{ color: 'var(--text-2)', maxWidth: 420, margin: '10px auto 0' }}>
                Recebemos seu aceite e a confirmação de pagamento. A equipe da <b>{window.brandName()}</b> dará
                sequência ao seu projeto e entrará em contato em breve.
              </p>
              {syncErr ? (
                <p className="muted-note" style={{ justifyContent: 'center', marginTop: 18, color: 'var(--text-2)' }}>
                  <Icon name="whatsapp" size={14} /> {syncErr}
                </p>
              ) : (
                <p className="muted-note" style={{ justifyContent: 'center', marginTop: 18, color: 'var(--success)' }}>
                  <Icon name="check" size={14} /> Confirmação registrada no sistema.
                </p>
              )}
            </div>
          )}
        </div>
        <footer className="client-foot">{window.brandName()}{window.brandSite() ? ' · ' + window.brandSite() : ''}</footer>
      </div>
    </div>
  );
}

Object.assign(window, { ClientView });