// screen-vendas.jsx — Sales history + NF (DANFE) view

function VendasScreen({ onToast }) {
  const [q, setQ] = useState("");
  const [channel, setChannel] = useState("all");
  const [status, setStatus] = useState("all");
  const [period, setPeriod] = useState("today");
  const [opened, setOpened] = useState(null);
  const [showNF, setShowNF] = useState(null);

  const filtered = SALES.filter(s => {
    if (channel !== "all" && s.canal !== channel) return false;
    if (status !== "all" && s.status !== status) return false;
    if (period === "today") {
      const d = new Date(s.data);
      if (d.toDateString() !== new Date().toDateString()) return false;
    }
    if (q) {
      const ql = q.toLowerCase();
      if (!s.id.toLowerCase().includes(ql) && !s.cliente.toLowerCase().includes(ql) && !(s.nf || "").toLowerCase().includes(ql)) return false;
    }
    return true;
  });

  const totalToday = filtered.filter(s => s.status !== "cancelada").reduce((a, b) => a + b.total, 0);

  return (
    <>
      <div className="page-head">
        <div className="grow">
          <h2>Vendas</h2>
          <div className="muted">Histórico consolidado de todas as origens</div>
        </div>
        <button className="btn"><I.Sync size={14} /> Exportar CSV</button>
        <button className="btn btn-primary" onClick={() => onToast({ msg: "Abrindo PDV…", kind: "ok" })}>
          <I.Plus size={14} /> Nova venda no PDV
        </button>
      </div>

      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-header" style={{ flexWrap: "wrap", gap: 10 }}>
          <div className="grow" style={{ minWidth: 240, position: "relative" }}>
            <I.Search size={14} style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", color: "var(--ink-3)" }} />
            <input className="input" style={{ paddingLeft: 36 }} placeholder="Buscar por nº da venda, cliente ou NF" value={q} onChange={e => setQ(e.target.value)} />
          </div>
          <select className="select" style={{ width: 160 }} value={period} onChange={e => setPeriod(e.target.value)}>
            <option value="today">Hoje</option>
            <option value="7d">Últimos 7 dias</option>
            <option value="30d">Últimos 30 dias</option>
            <option value="all">Tudo</option>
          </select>
          <select className="select" style={{ width: 160 }} value={channel} onChange={e => setChannel(e.target.value)}>
            <option value="all">Todos canais</option>
            <option value="loja">Loja Física</option>
            <option value="ml">Mercado Livre</option>
            <option value="shopee">Shopee</option>
            <option value="magalu">Magalu</option>
          </select>
          <select className="select" style={{ width: 160 }} value={status} onChange={e => setStatus(e.target.value)}>
            <option value="all">Todos status</option>
            <option value="finalizada">Finalizadas</option>
            <option value="em_aberto">Em aberto</option>
            <option value="cancelada">Canceladas</option>
          </select>
          <div className="row" style={{ marginLeft: "auto", gap: 14 }}>
            <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{filtered.length} vendas</div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 18 }}>{brl(totalToday)}</div>
          </div>
        </div>

        <table className="table">
          <thead>
            <tr>
              <th>Venda</th>
              <th>Data/Hora</th>
              <th>Cliente</th>
              <th>Vendedor</th>
              <th>Canal</th>
              <th>Pgto</th>
              <th>Status</th>
              <th>Total</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.slice(0, 24).map(s => (
              <tr key={s.id}>
                <td style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>{s.id}</td>
                <td className="muted" style={{ fontSize: 12 }}>{dateBR(s.data)}</td>
                <td>{s.cliente}</td>
                <td className="muted" style={{ fontSize: 12 }}>{s.vendedor}</td>
                <td><span className={`mp mp-${s.canal}`}>{marketplaceById(s.canal)?.name || s.canal}</span></td>
                <td className="muted" style={{ fontSize: 12, textTransform: "capitalize" }}>{s.pagamento}</td>
                <td>
                  {s.status === "finalizada" && <span className="badge badge-ok"><I.Check size={11} /> Finalizada</span>}
                  {s.status === "em_aberto"  && <span className="badge badge-warn">Em aberto</span>}
                  {s.status === "cancelada"  && <span className="badge badge-err">Cancelada</span>}
                </td>
                <td className="num" style={{ fontWeight: 700 }}>{brl(s.total)}</td>
                <td>
                  <div className="row" style={{ gap: 4, justifyContent: "flex-end" }}>
                    {s.nf && (
                      <button className="btn btn-sm" onClick={() => setShowNF(s)} title={s.nf}>
                        <I.Doc size={12} /> NF
                      </button>
                    )}
                    <button className="btn btn-sm" onClick={() => setOpened(s)}><I.ChevR size={12} /></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {opened && <SaleDetailModal sale={opened} onClose={() => setOpened(null)} onShowNF={() => { setShowNF(opened); setOpened(null); }} />}
      {showNF && <DanfeModal sale={showNF} onClose={() => setShowNF(null)} />}
    </>
  );
}

function SaleDetailModal({ sale, onClose, onShowNF }) {
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal modal-lg" onClick={e => e.stopPropagation()}>
        <div className="modal-hd">
          <I.Receipt size={20} />
          <h3>Venda {sale.id}</h3>
          <span className="grow"></span>
          {sale.status === "finalizada" && <span className="badge badge-ok">Finalizada</span>}
          {sale.status === "cancelada" && <span className="badge badge-err">Cancelada</span>}
          <button className="btn btn-ghost btn-icon btn-sm" onClick={onClose}><I.X size={14} /></button>
        </div>
        <div className="modal-bd">
          <div className="grid-3" style={{ marginBottom: 16 }}>
            <div>
              <div className="muted" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.05em" }}>Cliente</div>
              <div style={{ fontWeight: 700, marginTop: 4 }}>{sale.cliente}</div>
            </div>
            <div>
              <div className="muted" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.05em" }}>Vendedor</div>
              <div style={{ fontWeight: 700, marginTop: 4 }}>{sale.vendedor}</div>
            </div>
            <div>
              <div className="muted" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.05em" }}>Canal</div>
              <div style={{ marginTop: 4 }}><span className={`mp mp-${sale.canal}`}>{marketplaceById(sale.canal)?.name || sale.canal}</span></div>
            </div>
            <div>
              <div className="muted" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.05em" }}>Data</div>
              <div style={{ fontWeight: 700, marginTop: 4 }}>{dateBR(sale.data)}</div>
            </div>
            <div>
              <div className="muted" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.05em" }}>Pagamento</div>
              <div style={{ fontWeight: 700, marginTop: 4, textTransform: "capitalize" }}>{sale.pagamento}</div>
            </div>
            <div>
              <div className="muted" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.05em" }}>Documento fiscal</div>
              <div style={{ marginTop: 4 }}>{sale.nf ? <span className="badge badge-ok">{sale.nf}</span> : <span className="muted">—</span>}</div>
            </div>
          </div>

          <table className="table" style={{ border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden" }}>
            <thead>
              <tr>
                <th>Produto</th>
                <th>Qtd</th>
                <th>Preço un.</th>
                <th>Total</th>
              </tr>
            </thead>
            <tbody>
              {sale.items.map((it, i) => (
                <tr key={i}>
                  <td>
                    <div style={{ fontWeight: 600 }}>{it.name}</div>
                    <div className="muted" style={{ fontSize: 11, fontFamily: "var(--font-mono)" }}>{it.sku}</div>
                  </td>
                  <td className="num">{it.qty}</td>
                  <td className="num">{brl(it.price)}</td>
                  <td className="num" style={{ fontWeight: 700 }}>{brl(it.qty * it.price)}</td>
                </tr>
              ))}
              <tr>
                <td colSpan="3" style={{ textAlign: "right", fontWeight: 700, fontSize: 16, color: "var(--ink-2)" }}>Total da venda</td>
                <td className="num" style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 800, color: "var(--brand-orange-deep)" }}>{brl(sale.total)}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="modal-ft">
          <button className="btn" onClick={onClose}>Fechar</button>
          {sale.nf && <button className="btn btn-green" onClick={onShowNF}><I.Doc size={14} /> Ver NF</button>}
          {sale.status !== "cancelada" && <button className="btn btn-danger">Cancelar venda</button>}
        </div>
      </div>
    </div>
  );
}

function DanfeModal({ sale, onClose }) {
  const chave = "4126 0548 2214 5600 0109 6500 1" + sale.id.replace("V", "") + " 8910 2376 11";
  const totalItems = sale.items.reduce((s, x) => s + x.qty, 0);
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal modal-lg" style={{ maxWidth: 880, background: "#e9e7e0" }} onClick={e => e.stopPropagation()}>
        <div className="modal-hd" style={{ background: "var(--bg-elev)" }}>
          <I.Doc size={20} />
          <h3>Nota Fiscal — DANFE Simplificada</h3>
          <span className="grow" />
          <span className="badge badge-ok"><I.Check size={11} /> Autorizada — {sale.nf}</span>
          <button className="btn btn-ghost btn-icon btn-sm" onClick={onClose}><I.X size={14} /></button>
        </div>
        <div className="modal-bd" style={{ padding: 20 }}>
          <div className="print-area">
            <div className="danfe">
              {/* Cabeçalho */}
              <div style={{ display: "flex", border: "1px solid #000" }}>
                <div style={{ width: 120, borderRight: "1px solid #000", display: "flex", alignItems: "center", justifyContent: "center", padding: 6, flexDirection: "column", textAlign: "center" }}>
                  <img src="assets/logo.png" alt="" style={{ width: 64, height: 64, objectFit: "cover", borderRadius: 6 }} />
                  <div style={{ fontWeight: 700, fontSize: 8, marginTop: 4 }}>CAPIVARA'S</div>
                </div>
                <div style={{ flex: 1, padding: 6, borderRight: "1px solid #000" }}>
                  <div className="lbl">Emitente</div>
                  <div className="val" style={{ fontSize: 11 }}>{STORE_INFO.razao}</div>
                  <div style={{ fontSize: 9, marginTop: 2 }}>{STORE_INFO.endereco}</div>
                  <div style={{ fontSize: 9 }}>{STORE_INFO.cidade} — CEP {STORE_INFO.cep}</div>
                  <div style={{ fontSize: 9 }}>CNPJ: <b>{STORE_INFO.cnpj}</b> &nbsp; IE: {STORE_INFO.ie}</div>
                  <div style={{ fontSize: 9 }}>Fone: {STORE_INFO.fone} &nbsp; {STORE_INFO.email}</div>
                </div>
                <div style={{ width: 220, padding: 6, textAlign: "center" }}>
                  <div style={{ fontWeight: 700, fontSize: 12 }}>DANFE</div>
                  <div style={{ fontSize: 8 }}>Documento Auxiliar da Nota Fiscal Eletrônica</div>
                  <div style={{ margin: "6px 0", fontSize: 10 }}>
                    <b>0 — ENTRADA</b><br />
                    <b style={{ background: "#000", color: "#fff", padding: "0 4px" }}>1 — SAÍDA</b>
                  </div>
                  <div style={{ fontSize: 14, fontWeight: 800 }}>Nº {sale.nf?.replace(/\D/g, "") || "028914"}</div>
                  <div style={{ fontSize: 9 }}>SÉRIE 001 — FOLHA 1/1</div>
                </div>
              </div>

              {/* Chave */}
              <div className="box" style={{ borderTop: 0 }}>
                <div className="lbl">Chave de acesso</div>
                <div style={{ fontFamily: "monospace", fontSize: 11, letterSpacing: "1px", fontWeight: 700 }}>{chave}</div>
              </div>
              <div className="box" style={{ borderTop: 0, display: "flex", gap: 18 }}>
                <div style={{ flex: 1 }}>
                  <div className="lbl">Natureza da operação</div>
                  <div className="val">VENDA DE MERCADORIA ADQUIRIDA</div>
                </div>
                <div>
                  <div className="lbl">Protocolo autorização</div>
                  <div className="val">3262025{sale.id.replace("V","")} — {dateBR(sale.data)}</div>
                </div>
              </div>

              {/* Destinatário */}
              <h3 style={{ marginTop: 8 }}>Destinatário / Remetente</h3>
              <div className="box">
                <div style={{ display: "flex", gap: 18 }}>
                  <div style={{ flex: 2 }}>
                    <div className="lbl">Nome / Razão social</div>
                    <div className="val">{sale.cliente}</div>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div className="lbl">CPF / CNPJ</div>
                    <div className="val">{sale.cliente === "Consumidor Final" ? "—" : "324.118.902-77"}</div>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div className="lbl">Data emissão</div>
                    <div className="val">{dateBR(sale.data)}</div>
                  </div>
                </div>
              </div>

              {/* Cálculo do imposto */}
              <h3 style={{ marginTop: 8 }}>Cálculo do imposto</h3>
              <div className="box" style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 8 }}>
                {[
                  ["Base ICMS", brl(sale.total)],
                  ["Valor ICMS", brl(sale.total * 0.18)],
                  ["Base ICMS ST", "R$ 0,00"],
                  ["V. produtos", brl(sale.total)],
                  ["V. total nota", brl(sale.total)],
                ].map(([k, v], i) => (
                  <div key={i}>
                    <div className="lbl">{k}</div>
                    <div className="val">{v}</div>
                  </div>
                ))}
              </div>

              {/* Itens */}
              <h3 style={{ marginTop: 8 }}>Dados dos produtos / serviços</h3>
              <table>
                <thead>
                  <tr>
                    <th style={{ width: 50 }}>Código</th>
                    <th>Descrição</th>
                    <th>NCM</th>
                    <th>CFOP</th>
                    <th>Un</th>
                    <th style={{ width: 36 }}>Qtd</th>
                    <th>V. unit.</th>
                    <th>V. total</th>
                  </tr>
                </thead>
                <tbody>
                  {sale.items.map((it, i) => (
                    <tr key={i}>
                      <td style={{ fontFamily: "monospace" }}>{it.sku}</td>
                      <td>{it.name}</td>
                      <td>9507.30.00</td>
                      <td>5102</td>
                      <td>UN</td>
                      <td style={{ textAlign: "center" }}>{it.qty}</td>
                      <td style={{ textAlign: "right" }}>{brl(it.price)}</td>
                      <td style={{ textAlign: "right" }}>{brl(it.qty * it.price)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>

              <div className="box" style={{ marginTop: 8, display: "flex", justifyContent: "space-between" }}>
                <div>
                  <div className="lbl">Quantidade total de itens</div>
                  <div className="val">{totalItems}</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div className="lbl">Valor total da nota</div>
                  <div className="val" style={{ fontSize: 14 }}>{brl(sale.total)}</div>
                </div>
              </div>

              {/* Dados adicionais */}
              <h3 style={{ marginTop: 8 }}>Dados adicionais</h3>
              <div className="box" style={{ minHeight: 50 }}>
                <div style={{ fontSize: 9 }}>
                  DOCUMENTO EMITIDO POR ME OU EPP OPTANTE PELO SIMPLES NACIONAL. NÃO GERA DIREITO A CRÉDITO FISCAL DE IPI.<br />
                  Operação realizada conforme art. 23 da LC 123/2006. Vendedor: {sale.vendedor}. Forma de pagamento: {sale.pagamento.toUpperCase()}.<br />
                  Obrigado pela preferência! 🎣 capivarasfishing.com.br
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="modal-ft" style={{ background: "var(--bg-elev)" }}>
          <button className="btn" onClick={onClose}>Fechar</button>
          <button className="btn"><I.Sync size={14} /> Reenviar SEFAZ</button>
          <button className="btn btn-primary" onClick={() => window.print()}><I.Printer size={14} /> Imprimir DANFE</button>
        </div>
      </div>
    </div>
  );
}

window.VendasScreen = VendasScreen;
window.DanfeModal = DanfeModal;