/* ============================================================
   wizard_steps_b.jsx — Etapas 4, 5, 6
   ============================================================ */

/* ---------- Assinatura digital (canvas) ---------- */
function SignaturePad({ onChange, onCapture }) {
  const ref = React.useRef(null);
  const drawing = React.useRef(false);
  const inked = React.useRef(false);
  const last = React.useRef(null);
  const [hasInk, setHasInk] = React.useState(false);

  React.useEffect(() => {
    const cv = ref.current;
    const dpr = window.devicePixelRatio || 1;
    const rect = cv.getBoundingClientRect();
    cv.width = rect.width * dpr; cv.height = rect.height * dpr;
    const ctx = cv.getContext('2d');
    ctx.scale(dpr, dpr);
    ctx.lineWidth = 2.4; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
    ctx.strokeStyle = '#0a0c10';
  }, []);

  // exporta a assinatura como PNG sobre fundo branco
  const exportPng = () => {
    if (!onCapture) return;
    const cv = ref.current;
    const out = document.createElement('canvas');
    out.width = cv.width; out.height = cv.height;
    const octx = out.getContext('2d');
    octx.fillStyle = '#ffffff'; octx.fillRect(0, 0, out.width, out.height);
    octx.drawImage(cv, 0, 0);
    onCapture(out.toDataURL('image/png'));
  };

  const pos = (e) => {
    const r = ref.current.getBoundingClientRect();
    const t = e.touches ? e.touches[0] : e;
    return { x: t.clientX - r.left, y: t.clientY - r.top };
  };
  const start = (e) => { e.preventDefault(); drawing.current = true; last.current = pos(e); };
  const move = (e) => {
    if (!drawing.current) return; e.preventDefault();
    const ctx = ref.current.getContext('2d');
    const p = pos(e);
    ctx.beginPath(); ctx.moveTo(last.current.x, last.current.y); ctx.lineTo(p.x, p.y); ctx.stroke();
    last.current = p;
    if (!inked.current) { inked.current = true; setHasInk(true); onChange && onChange(true); }
  };
  const end = () => { if (drawing.current && inked.current) exportPng(); drawing.current = false; };
  const clear = () => {
    const cv = ref.current; const ctx = cv.getContext('2d');
    ctx.clearRect(0, 0, cv.width, cv.height); inked.current = false; setHasInk(false);
    onChange && onChange(false); onCapture && onCapture(null);
  };

  return (
    <div className="sign-wrap">
      <canvas ref={ref} className="sign-canvas"
        onMouseDown={start} onMouseMove={move} onMouseUp={end} onMouseLeave={end}
        onTouchStart={start} onTouchMove={move} onTouchEnd={end} />
      {!hasInk && <span className="sign-hint">Assine aqui com o mouse ou o dedo</span>}
      <button className="sign-clear" onClick={clear} title="Limpar"><Icon name="x" size={14} /> Limpar</button>
    </div>
  );
}

/* ===== ETAPA 4 — Termo de Aceite ===== */
function StepAceite({ cliente, items, total, recorrente, pagamento, obsGeral, aceite, setAceite, onClientLink }) {
  const metodo = (PAYMENT_METHODS.find(m => m.id === pagamento) || {}).nome || '—';
  const hoje = new Date().toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric' });
  const upd = (k) => (e) => setAceite({ ...aceite, [k]: e.target.value });
  const [linkState, setLinkState] = React.useState({ url: '', copied: false, busy: false, err: '' });
  const gerarLink = async () => {
    if (!onClientLink) return;
    setLinkState(s => ({ ...s, busy: true, err: '' }));
    try {
      const url = await onClientLink();
      if (url) setLinkState({ url, copied: false, busy: false, err: '' });
      else setLinkState(s => ({ ...s, busy: false }));
    } catch (e) {
      setLinkState(s => ({ ...s, busy: false, err: (e && e.message) || 'Não foi possível gerar o link.' }));
    }
  };
  const copiarLink = () => {
    navigator.clipboard?.writeText(linkState.url);
    setLinkState(s => ({ ...s, copied: true }));
    setTimeout(() => setLinkState(s => ({ ...s, copied: false })), 1800);
  };
  const waLink = () => {
    let d = onlyDigits(cliente.whatsapp); if (d && d.length <= 11) d = '55' + d;
    const msg = `Olá${cliente.nome ? ' ' + cliente.nome.split(' ')[0] : ''}! Segue sua proposta da ${window.brandName()} para você revisar, assinar e efetuar o pagamento:\n\n${linkState.url}`;
    window.open('https://wa.me/' + d + '?text=' + encodeURIComponent(msg), '_blank');
  };
  const mailLink = () => {
    const body = `Olá ${cliente.nome || ''},\n\nSegue sua proposta da ${window.brandName()} para revisar, assinar e efetuar o pagamento:\n\n${linkState.url}\n\nQualquer dúvida, estamos à disposição.`;
    window.open('mailto:' + (cliente.email || '') + '?subject=' + encodeURIComponent('Sua proposta — ' + window.brandName()) + '&body=' + encodeURIComponent(body), '_blank');
  };
  return (
    <div className="step-pane narrow fade-up">
      <header className="step-head">
        <Badge tone="yellow" dot>Etapa 4 de 6</Badge>
        <h1>Termo de aceite</h1>
        <p>Documento gerado automaticamente a partir da proposta.</p>
      </header>

      <article className="term">
        <div className="term-head">
          <BrandLogo dark height={38} />
          <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>{cliente.nome || '—'}</b>{cliente.empresa ? ` · ${cliente.empresa}` : ''}</div>
            <div>{cliente.doc || '—'}</div>
            <div>{cliente.email || '—'}</div>
            <div>{cliente.whatsapp || '—'}</div>
          </div>
          {cliente.endereco && <div style={{ fontSize: 13, color: 'var(--text-2)', marginTop: 6 }}>{cliente.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>
              {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>
              {recorrente > 0 && <tr><td colSpan="2">Recorrente mensal</td><td className="mono" style={{ textAlign: 'right' }}>{fmtBRL(recorrente)}</td></tr>}
              <tr className="term-total"><td colSpan="2">Valor total</td><td className="mono" style={{ textAlign: 'right' }}>{fmtBRL(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>
          {obsGeral && <div><span className="term-label">Observações</span><div style={{ fontSize: 13 }}>{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>

      <div className="client-link-card">
        <div className="row gap-3" style={{ alignItems: 'flex-start' }}>
          <div className="clc-icon"><Icon name="send" size={20} /></div>
          <div className="grow">
            <h3 style={{ fontSize: 16 }}>Enviar para o cliente assinar</h3>
            <p style={{ fontSize: 13.5, color: 'var(--text-3)', marginTop: 2 }}>
              Gere um link provisório para o cliente revisar, assinar e pagar pelo próprio celular.
            </p>
            {!linkState.url ? (
              <Button variant="primary" icon="send" onClick={gerarLink} disabled={linkState.busy}
                style={{ marginTop: 14, ...(linkState.busy ? { opacity: .6, pointerEvents: 'none' } : {}) }}>
                {linkState.busy ? 'Gerando…' : 'Gerar link do cliente'}
              </Button>
            ) : (
              <div className="clc-ready fade-up">
                <div className="clc-url">{linkState.url}</div>
                <div className="clc-actions">
                  <Button size="sm" variant="ghost" icon={linkState.copied ? 'check' : 'copy'} onClick={copiarLink}>
                    {linkState.copied ? 'Copiado' : 'Copiar'}
                  </Button>
                  <Button size="sm" variant="ghost" icon="whatsapp" onClick={waLink}>WhatsApp</Button>
                  <Button size="sm" variant="ghost" icon="mail" onClick={mailLink}>E-mail</Button>
                </div>
              </div>
            )}
            {linkState.err && <div className="clc-err">{linkState.err}</div>}
          </div>
        </div>
      </div>

      <div className="clc-divider"><span>ou assine agora você mesmo</span></div>

      <div className="accept-box">
        <label className="accept-check">
          <input type="checkbox" checked={aceite.aceito} onChange={(e) => setAceite({ ...aceite, aceito: 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="Quem está assinando"
            value={aceite.nome} onChange={upd('nome')} />
          <Field label="CPF" icon="doc" placeholder="000.000.000-00"
            value={aceite.cpf} onChange={(e) => setAceite({ ...aceite, cpf: 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={(v) => setAceite(a => ({ ...a, assinado: v }))}
            onCapture={(img) => setAceite(a => ({ ...a, assinaturaImg: img }))} />
        </div>
      </div>
    </div>
  );
}

/* ===== ETAPA 5 — Compartilhamento ===== */
function StepCompartilhar({ cliente, items, total, pagamento, assinaturaImg }) {
  const [copied, setCopied] = React.useState(false);
  const metodo = (PAYMENT_METHODS.find(m => m.id === pagamento) || {}).nome || '—';
  const linhas = items.map(it => `• ${it.nome} — ${fmtBRL(it.preco)} (${it.prazo})`).join('\n');
  const texto =
`✅ Proposta ${window.brandName()}

Cliente: ${cliente.nome}${cliente.empresa ? ' · ' + cliente.empresa : ''}

Serviços:
${linhas}

Pagamento: ${metodo}
Total: ${fmtBRL(total)}

Aceite registrado. Em seguida enviaremos os dados para pagamento.`;

  const copy = () => { navigator.clipboard?.writeText(texto); setCopied(true); setTimeout(() => setCopied(false), 1800); };
  const waNum = (() => { let d = onlyDigits(cliente.whatsapp); if (d && d.length <= 11) d = '55' + d; return d; })();
  const wpp = () => window.open('https://wa.me/' + waNum + '?text=' + encodeURIComponent(texto), '_blank');
  const mail = () => window.open('mailto:' + (cliente.email || '') + '?subject=' + encodeURIComponent('Proposta — ' + window.brandName()) + '&body=' + encodeURIComponent(texto), '_blank');

  // assinatura -> arquivo PNG
  const fileName = 'assinatura-' + (cliente.nome || 'cliente').trim().replace(/\s+/g, '_').toLowerCase() + '.png';
  const sigFile = () => {
    if (!assinaturaImg) return null;
    try {
      const [head, b64] = assinaturaImg.split(',');
      const mime = (head.match(/:(.*?);/) || [])[1] || 'image/png';
      const bin = atob(b64); let n = bin.length; const u8 = new Uint8Array(n);
      while (n--) u8[n] = bin.charCodeAt(n);
      return new File([u8], fileName, { type: mime });
    } catch (e) { return null; }
  };
  const downloadSig = () => {
    if (!assinaturaImg) return;
    const a = document.createElement('a'); a.href = assinaturaImg; a.download = fileName;
    document.body.appendChild(a); a.click(); a.remove();
  };
  // compartilhamento nativo: anexa a imagem da assinatura (WhatsApp, e-mail, etc.)
  const shareNative = async () => {
    const file = sigFile();
    if (file && navigator.canShare && navigator.canShare({ files: [file] })) {
      try { await navigator.share({ files: [file], text: texto, title: 'Proposta — ' + window.brandName() }); return; }
      catch (e) { if (e && e.name === 'AbortError') return; }
    }
    // desktop / sem suporte: baixa a assinatura e abre o WhatsApp com o texto
    downloadSig();
    window.open('https://wa.me/' + waNum + '?text=' + encodeURIComponent(texto), '_blank');
  };
  const hasSig = !!assinaturaImg;

  return (
    <div className="step-pane narrow fade-up">
      <header className="step-head">
        <div className="seal"><Icon name="check" size={26} stroke={3} /></div>
        <Badge tone="green" dot>Aceite confirmado</Badge>
        <h1>Pronto para compartilhar</h1>
        <p>Envie a confirmação da proposta para o cliente. O pagamento será solicitado na próxima etapa.</p>
      </header>

      <div className="share-grid">
        <div className="share-actions">
          {hasSig && (
            <button className="share-btn primary-share" onClick={shareNative}>
              <Icon name="send" size={20} /><span>Enviar com assinatura</span>
            </button>
          )}
          <button className="share-btn wpp" onClick={wpp}><Icon name="whatsapp" size={22} /><span>WhatsApp{hasSig ? ' (só texto)' : ''}</span></button>
          <button className="share-btn" onClick={mail}><Icon name="mail" size={22} /><span>E-mail{hasSig ? ' (só texto)' : ''}</span></button>
          <button className="share-btn" onClick={copy}>
            <Icon name={copied ? 'check' : 'copy'} size={22} /><span>{copied ? 'Copiado!' : 'Copiar texto'}</span>
          </button>
        </div>
        <div className="share-preview">
          <span className="eyebrow" style={{ marginBottom: 8, display: 'block' }}>Texto formatado</span>
          <pre className="share-text">{texto}</pre>
          {hasSig && (
            <div className="sig-attach">
              <div className="sig-attach-head">
                <span className="eyebrow">Assinatura anexada</span>
                <button className="sig-dl" onClick={downloadSig}><Icon name="download" size={14} /> Baixar PNG</button>
              </div>
              <img src={assinaturaImg} alt="Assinatura do cliente" className="sig-thumb" />
            </div>
          )}
        </div>
      </div>
      <p className="muted-note">
        <Icon name="lock" size={13} />
        {hasSig
          ? ' No celular, “Enviar com assinatura” abre o WhatsApp/e-mail já com a imagem anexada. No computador, a assinatura é baixada para você anexar.'
          : ' Geração de PDF e SMS ficam para a integração futura — por ora o envio é por WhatsApp ou e-mail.'}
      </p>
    </div>
  );
}

/* ===== ETAPA 6 — Pagamento ===== */
function StepPagamento({ total, pixCfg, setPixCfg, clientMode }) {
  const [copied, setCopied] = React.useState(false);
  const [editCfg, setEditCfg] = React.useState(false);
  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="step-pane narrow fade-up">
      <header className="step-head">
        <Badge tone="blue" dot>Etapa 6 de 6</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>
          {!clientMode && (
            <button className="link-btn" onClick={() => setEditCfg(e => !e)}><Icon name="edit" size={13} /> Configurar dados da conta</button>
          )}
          {!clientMode && editCfg && (
            <div className="form-grid fade-up" style={{ marginTop: 4 }}>
              <Field full label="Chave PIX" value={pixCfg.chave} onChange={(e) => setPixCfg({ ...pixCfg, chave: e.target.value })} />
              <Field label="Nome recebedor" value={pixCfg.nome} onChange={(e) => setPixCfg({ ...pixCfg, nome: e.target.value })} />
              <Field label="Cidade" value={pixCfg.cidade} onChange={(e) => setPixCfg({ ...pixCfg, cidade: e.target.value })} />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StepAceite, StepCompartilhar, StepPagamento, SignaturePad });