// screen-misc.jsx — NF, Clientes, Usuários, Integrações, Compras, Financeiro, Relatórios

/* ──────────────────────────────────────────────────────────────
   NOTAS FISCAIS — emissão e histórico
   ────────────────────────────────────────────────────────────── */
function NFScreen({ onToast }) {
  const [showNF, setShowNF] = useState(null);
  const issued = SALES.filter(s => s.nf && s.status === "finalizada").slice(0, 20);
  return (
    <>
      <div className="page-head">
        <div className="grow">
          <h2>Notas Fiscais</h2>
          <div className="muted">
            Emissão NFC-e (PDV) e NF-e (faturamento)
            <span className="badge badge-ok" style={{ marginLeft: 10 }}><I.Wifi size={11} /> Conectado à SEFAZ-PR</span>
          </div>
        </div>
        <button className="btn"><I.Sync size={14} /> Sincronizar pendentes</button>
        <button className="btn btn-primary"><I.Plus size={14} /> Emitir NF manual</button>
      </div>

      <div className="grid-kpi" style={{ marginBottom: 16 }}>
        <div className="kpi">
          <div className="kpi-icon"><I.Doc size={18} /></div>
          <div className="kpi-label">NFs emitidas (mês)</div>
          <div className="kpi-value">284</div>
          <div className="muted" style={{ fontSize: 12 }}>238 NFC-e · 46 NF-e</div>
        </div>
        <div className="kpi">
          <div className="kpi-icon green"><I.Check size={18} /></div>
          <div className="kpi-label">Autorizadas</div>
          <div className="kpi-value" style={{ color: "var(--ok)" }}>282</div>
          <div className="muted" style={{ fontSize: 12 }}>99,3% taxa de sucesso</div>
        </div>
        <div className="kpi">
          <div className="kpi-icon warn"><I.Bell size={18} /></div>
          <div className="kpi-label">Pendentes</div>
          <div className="kpi-value" style={{ color: "var(--warn)" }}>1</div>
          <div className="muted" style={{ fontSize: 12 }}>contingência</div>
        </div>
        <div className="kpi">
          <div className="kpi-icon" style={{ background: "var(--err-bg)", color: "var(--err)" }}><I.X size={18} /></div>
          <div className="kpi-label">Canceladas</div>
          <div className="kpi-value" style={{ color: "var(--err)" }}>1</div>
          <div className="muted" style={{ fontSize: 12 }}>dentro do prazo legal</div>
        </div>
      </div>

      <div className="card">
        <div className="card-header">
          <div className="grow">
            <h3>Histórico de emissões</h3>
            <div className="sub">Últimas 20 notas fiscais</div>
          </div>
          <button className="btn btn-sm">Exportar XML</button>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th>Tipo</th>
              <th>Número</th>
              <th>Data</th>
              <th>Destinatário</th>
              <th>Valor</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {issued.map(s => (
              <tr key={s.id}>
                <td><span className="badge badge-info">NFC-e</span></td>
                <td style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>{s.nf}</td>
                <td className="muted" style={{ fontSize: 12 }}>{dateBR(s.data)}</td>
                <td>{s.cliente}</td>
                <td className="num" style={{ fontWeight: 700 }}>{brl(s.total)}</td>
                <td><span className="badge badge-ok"><I.Check size={11} /> Autorizada</span></td>
                <td>
                  <div className="row" style={{ gap: 4, justifyContent: "flex-end" }}>
                    <button className="btn btn-sm" onClick={() => setShowNF(s)}>Ver DANFE</button>
                    <button className="btn btn-sm">XML</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

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

/* ──────────────────────────────────────────────────────────────
   CLIENTES
   ────────────────────────────────────────────────────────────── */
function ClientesScreen({ onToast }) {
  const [q, setQ] = useState("");
  const list = CLIENTS.filter(c =>
    c.nome.toLowerCase().includes(q.toLowerCase()) ||
    c.cpf.includes(q) ||
    (c.fone || "").includes(q)
  );
  return (
    <>
      <div className="page-head">
        <div className="grow">
          <h2>Clientes</h2>
          <div className="muted">Base para vendas e nota fiscal</div>
        </div>
        <button className="btn"><I.Sync size={14} /> Importar CSV</button>
        <button className="btn btn-primary"><I.Plus size={14} /> Novo cliente</button>
      </div>

      <div className="card">
        <div className="card-header">
          <div className="grow" style={{ 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 nome, CPF, telefone" value={q} onChange={e => setQ(e.target.value)} />
          </div>
          <div className="muted" style={{ fontSize: 12 }}>{list.length} clientes</div>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th>Cliente</th>
              <th>CPF / CNPJ</th>
              <th>Contato</th>
              <th>Compras</th>
              <th>Ticket méd.</th>
              <th>Última compra</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {list.map(c => (
              <tr key={c.id}>
                <td>
                  <div className="row" style={{ gap: 10 }}>
                    <div className="avatar" style={{ width: 32, height: 32, fontSize: 11.5 }}>
                      {c.nome.split(" ").map(p => p[0]).slice(0, 2).join("")}
                    </div>
                    <div>
                      <div style={{ fontWeight: 600 }}>{c.nome}</div>
                      <div className="muted" style={{ fontSize: 11, fontFamily: "var(--font-mono)" }}>{c.id}</div>
                    </div>
                  </div>
                </td>
                <td className="muted" style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>{c.cpf}</td>
                <td>
                  <div style={{ fontSize: 12.5 }}>{c.fone}</div>
                  <div className="muted" style={{ fontSize: 11 }}>{c.email}</div>
                </td>
                <td className="num" style={{ fontWeight: 700 }}>{c.compras}</td>
                <td className="num">{brl(c.ticket)}</td>
                <td className="muted" style={{ fontSize: 12 }}>{c.ultima}</td>
                <td><button className="btn btn-sm">Ver perfil</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

/* ──────────────────────────────────────────────────────────────
   USUÁRIOS E PERMISSÕES
   ────────────────────────────────────────────────────────────── */
const ROLE_PERMS = {
  admin:    ["Acesso total ao sistema", "Configurações", "Cadastrar usuários", "Integrações", "Financeiro", "Cancelar venda", "Ajustar estoque"],
  ceo:      ["Dashboards", "Relatórios", "Financeiro", "Cadastrar usuários", "Aprovar grandes descontos", "Visualizar tudo"],
  gerente:  ["Operar PDV", "Ajustar estoque", "Aprovar desc. até 15%", "Compras/Fornecedores", "Relatórios", "Sem acesso ao financeiro", "Sem cadastro de usuários"],
  caixa:    ["Operar PDV", "Histórico de vendas", "Notas fiscais", "Cadastrar cliente", "Sem acesso ao estoque"],
  vendedor: ["Operar PDV", "Consultar estoque (sem valores)", "Cadastrar cliente", "Aplicar desc. até 5%"],
};

function UsuariosScreen({ onToast }) {
  const [creating, setCreating] = useState(false);
  return (
    <>
      <div className="page-head">
        <div className="grow">
          <h2>Usuários & Permissões</h2>
          <div className="muted">5 perfis pré-definidos · controle por PDV</div>
        </div>
        <button className="btn btn-primary" onClick={() => setCreating(true)}>
          <I.Plus size={14} /> Cadastrar novo usuário
        </button>
      </div>

      <div className="grid-2" style={{ marginBottom: 16 }}>
        {Object.keys(ROLE_PERMS).map(role => (
          <div key={role} className="card card-pad">
            <div className="row" style={{ marginBottom: 8 }}>
              <span className={`tag-role ${role}`}>{ROLE_LABEL[role]}</span>
              <span className="grow" />
              <span className="muted" style={{ fontSize: 12 }}>{USERS.filter(u => u.role === role).length} usuários</span>
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
              {ROLE_PERMS[role].map(p => (
                <span key={p} className="badge">{p}</span>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div className="card">
        <div className="card-header">
          <div className="grow"><h3>Usuários cadastrados</h3></div>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th>Usuário</th>
              <th>E-mail</th>
              <th>Perfil</th>
              <th>PDVs liberados</th>
              <th>Status</th>
              <th>Última atividade</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {USERS.map(u => (
              <tr key={u.id}>
                <td>
                  <div className="row" style={{ gap: 10 }}>
                    <div className="avatar" style={{ width: 32, height: 32, fontSize: 11.5 }}>
                      {u.nome.split(" ").map(p => p[0]).slice(0, 2).join("")}
                    </div>
                    <div style={{ fontWeight: 600 }}>{u.nome}</div>
                  </div>
                </td>
                <td className="muted" style={{ fontSize: 12.5 }}>{u.email}</td>
                <td><span className={`tag-role ${u.role}`}>{ROLE_LABEL[u.role]}</span></td>
                <td>
                  <div className="row" style={{ gap: 4 }}>
                    {u.pdvs.map(p => <span key={p} className="badge">{p}</span>)}
                  </div>
                </td>
                <td>
                  {u.ativo
                    ? <span className="badge badge-ok"><span className="dot dot-ok" /> Ativo</span>
                    : <span className="badge badge-err">Inativo</span>}
                </td>
                <td className="muted" style={{ fontSize: 12 }}>{u.ultimo}</td>
                <td>
                  <div className="row" style={{ gap: 4, justifyContent: "flex-end" }}>
                    <button className="btn btn-sm">Editar</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {creating && <NewUserModal onClose={() => setCreating(false)} onSave={(u) => {
        USERS.push(u);
        onToast({ msg: `Usuário ${u.nome} cadastrado.`, kind: "ok" });
        setCreating(false);
      }} />}
    </>
  );
}

function NewUserModal({ onClose, onSave }) {
  const [form, setForm] = useState({ nome: "", email: "", role: "vendedor", pdvs: ["PDV01"] });
  const set = (k, v) => setForm(prev => ({ ...prev, [k]: v }));
  const togglePdv = (p) => setForm(prev => ({
    ...prev,
    pdvs: prev.pdvs.includes(p) ? prev.pdvs.filter(x => x !== p) : [...prev.pdvs, p],
  }));
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-hd">
          <I.Users size={18} />
          <h3>Cadastrar novo usuário</h3>
          <button className="btn btn-ghost btn-icon btn-sm" onClick={onClose}><I.X size={14} /></button>
        </div>
        <div className="modal-bd">
          <div className="field" style={{ marginBottom: 12 }}>
            <label>Nome completo *</label>
            <input className="input" autoFocus value={form.nome} onChange={e => set("nome", e.target.value)} />
          </div>
          <div className="field" style={{ marginBottom: 12 }}>
            <label>E-mail de acesso *</label>
            <input className="input" type="email" value={form.email} onChange={e => set("email", e.target.value)} placeholder="nome@capivarasfishing.com.br" />
          </div>
          <div className="field" style={{ marginBottom: 12 }}>
            <label>Perfil de acesso *</label>
            <select className="select" value={form.role} onChange={e => set("role", e.target.value)}>
              <option value="vendedor">Vendedor(a) — só PDV</option>
              <option value="caixa">Caixa — PDV + Vendas + NF</option>
              <option value="gerente">Gerente — quase tudo (sem financeiro/usuários)</option>
              <option value="ceo">CEO — acesso total</option>
              <option value="admin">Admin Master — acesso ao sistema</option>
            </select>
          </div>
          <div className="field">
            <label>PDVs liberados</label>
            <div className="row" style={{ gap: 8 }}>
              {["PDV01", "PDV02"].map(p => (
                <label key={p} className="row" style={{
                  gap: 8, padding: "8px 12px", border: "1px solid var(--line)", borderRadius: 9, flex: 1,
                  background: form.pdvs.includes(p) ? "var(--brand-orange-soft)" : "transparent",
                  borderColor: form.pdvs.includes(p) ? "var(--brand-orange)" : "var(--line)",
                  cursor: "default",
                }}>
                  <input type="checkbox" checked={form.pdvs.includes(p)} onChange={() => togglePdv(p)} style={{ accentColor: "var(--brand-orange)" }} />
                  <b style={{ fontSize: 13 }}>{p}</b>
                </label>
              ))}
            </div>
          </div>
          <div className="row" style={{ fontSize: 11.5, marginTop: 14, padding: 10, background: "var(--info-bg)", color: "var(--info)", borderRadius: 8, gap: 8 }}>
            <I.Bell size={12} />
            <span>Um e-mail com a senha temporária será enviado ao usuário.</span>
          </div>
        </div>
        <div className="modal-ft">
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary" onClick={() => {
            if (!form.nome.trim() || !form.email.trim()) return;
            onSave({
              id: "U" + Math.floor(Math.random() * 900 + 100),
              nome: form.nome, email: form.email,
              role: form.role, ativo: true, pdvs: form.pdvs,
              ultimo: "Nunca acessou",
            });
          }}>
            <I.Check size={14} /> Cadastrar e enviar convite
          </button>
        </div>
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────
   INTEGRAÇÕES — marketplaces
   ────────────────────────────────────────────────────────────── */
function IntegracoesScreen({ onToast }) {
  return (
    <>
      <div className="page-head">
        <div className="grow">
          <h2>Integrações</h2>
          <div className="muted">Canais de venda e gateways conectados ao seu estoque</div>
        </div>
        <button className="btn btn-primary"><I.Plus size={14} /> Conectar canal</button>
      </div>

      <div className="grid-2" style={{ marginBottom: 24 }}>
        {MARKETPLACES.filter(m => m.id !== "loja").map(mp => (
          <div key={mp.id} className="card" style={{ overflow: "hidden" }}>
            <div style={{ height: 80, background: mp.color, position: "relative", display: "flex", alignItems: "center", padding: 18 }}>
              <div style={{
                background: "#fff",
                borderRadius: 8,
                padding: "6px 12px",
                fontWeight: 800,
                fontSize: 14,
                color: mp.color,
                fontFamily: "var(--font-display)"
              }}>{mp.name}</div>
              <span className="grow" />
              {mp.connected ? (
                <span className="badge badge-ok" style={{ background: "rgba(255,255,255,0.95)" }}>
                  <span className="dot dot-ok" /> Conectado
                </span>
              ) : (
                <span className="badge" style={{ background: "rgba(255,255,255,0.85)" }}>Desconectado</span>
              )}
            </div>
            <div className="card-pad">
              <div className="grid-3" style={{ marginBottom: 14, gap: 12 }}>
                <div>
                  <div className="muted" style={{ fontSize: 11 }}>Pedidos hoje</div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 800 }}>{mp.orders_today}</div>
                </div>
                <div>
                  <div className="muted" style={{ fontSize: 11 }}>SKUs anunciados</div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 800 }}>
                    {mp.connected ? PRODUCTS.filter(p => p.mp.includes(mp.id)).length : "—"}
                  </div>
                </div>
                <div>
                  <div className="muted" style={{ fontSize: 11 }}>Última sincronia</div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 700, marginTop: 4 }}>{mp.last_sync}</div>
                </div>
              </div>
              <div className="row" style={{ gap: 8 }}>
                {mp.connected ? (
                  <>
                    <button className="btn btn-sm" style={{ flex: 1 }}><I.Sync size={12} /> Sincronizar agora</button>
                    <button className="btn btn-sm">Configurar</button>
                    <button className="btn btn-sm btn-danger">Desconectar</button>
                  </>
                ) : (
                  <button className="btn btn-primary" style={{ flex: 1 }} onClick={() => onToast({ msg: `Iniciando conexão com ${mp.name}…`, kind: "ok" })}>
                    <I.Plug size={13} /> Conectar via API
                  </button>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="card">
        <div className="card-header">
          <div className="grow">
            <h3>Eventos de sincronia (últimos)</h3>
            <div className="sub">Registro automático em tempo real</div>
          </div>
        </div>
        <div className="card-pad-sm" style={{ padding: 0 }}>
          {[
            { mp: "ml",     when: "agora",     event: "Estoque atualizado", detail: "Isca Soft Shad 12cm: 6 un. → marketplaces" },
            { mp: "shopee", when: "1 min",     event: "Novo pedido recebido", detail: "SH-22910 · Bruno Lima · R$ 49,90" },
            { mp: "ml",     when: "8 min",     event: "Novo pedido recebido", detail: "ML-87412 · Carlos Souza · R$ 89,90" },
            { mp: "magalu", when: "12 min",    event: "Anúncio aprovado",      detail: "Vara Carbono Pro 2.10m" },
            { mp: "ml",     when: "24 min",    event: "Etiqueta de envio gerada", detail: "ML-87410 · pronta para postagem" },
            { mp: "shopee", when: "1h 12min",  event: "Pedido enviado",         detail: "SH-22899 · postado nos Correios" },
            { mp: "ml",     when: "2h 8min",   event: "Estoque baixo",          detail: "Linha Monof. 0.35mm zerou — pausando anúncio" },
          ].map((e, i) => (
            <div key={i} className="row" style={{ padding: "12px 20px", borderBottom: "1px solid var(--line)", gap: 12 }}>
              <span className={`mp mp-${e.mp}`}>{marketplaceById(e.mp).name}</span>
              <div className="grow">
                <div style={{ fontWeight: 600, fontSize: 13 }}>{e.event}</div>
                <div className="muted" style={{ fontSize: 11.5 }}>{e.detail}</div>
              </div>
              <span className="muted" style={{ fontSize: 11.5, fontVariantNumeric: "tabular-nums" }}>há {e.when}</span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

/* ──────────────────────────────────────────────────────────────
   COMPRAS — fornecedores e pedidos de reposição
   ────────────────────────────────────────────────────────────── */
function ComprasScreen({ onToast }) {
  const [creating, setCreating] = useState(false);
  const lowStock = PRODUCTS.filter(p => p.stock <= p.min).slice(0, 6);
  const orders = [
    { id: "PC-00214", forn: SUPPLIERS[0], data: "12/05/2026", itens: 14, valor: 4280.00, status: "recebido" },
    { id: "PC-00213", forn: SUPPLIERS[1], data: "08/05/2026", itens: 22, valor: 7912.50, status: "em_transito" },
    { id: "PC-00212", forn: SUPPLIERS[2], data: "02/05/2026", itens: 6,  valor: 1490.00, status: "pendente"   },
    { id: "PC-00211", forn: SUPPLIERS[3], data: "28/04/2026", itens: 33, valor: 12380.00,status: "recebido"   },
  ];
  return (
    <>
      <div className="page-head">
        <div className="grow">
          <h2>Compras</h2>
          <div className="muted">Reposição e pedidos a fornecedores</div>
        </div>
        <button className="btn btn-primary" onClick={() => setCreating(true)}>
          <I.Plus size={14} /> + Nova compra
        </button>
      </div>

      <div className="grid-kpi" style={{ marginBottom: 16 }}>
        <div className="kpi">
          <div className="kpi-icon"><I.Truck size={18} /></div>
          <div className="kpi-label">Pedidos abertos</div>
          <div className="kpi-value">3</div>
          <div className="muted" style={{ fontSize: 12 }}>2 em trânsito · 1 pendente</div>
        </div>
        <div className="kpi">
          <div className="kpi-icon warn"><I.Bell size={18} /></div>
          <div className="kpi-label">Itens a repor</div>
          <div className="kpi-value" style={{ color: "var(--warn)" }}>{lowStock.length}</div>
          <div className="muted" style={{ fontSize: 12 }}>com base no estoque mínimo</div>
        </div>
        <div className="kpi">
          <div className="kpi-icon green"><I.Cash size={18} /></div>
          <div className="kpi-label">Compras do mês</div>
          <div className="kpi-value">{brl(26062.50)}</div>
          <div className="muted" style={{ fontSize: 12 }}>4 pedidos · 75 itens</div>
        </div>
        <div className="kpi">
          <div className="kpi-icon info"><I.Users size={18} /></div>
          <div className="kpi-label">Fornecedores ativos</div>
          <div className="kpi-value">{SUPPLIERS.length}</div>
          <div className="muted" style={{ fontSize: 12 }}>todos cadastrados</div>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-header">
          <div className="grow">
            <h3>Sugestões de reposição</h3>
            <div className="sub">Baseado no estoque mínimo e no giro do mês</div>
          </div>
          <button className="btn btn-sm btn-primary" onClick={() => setCreating(true)}>
            <I.Plus size={12} /> Gerar pedido com selecionados
          </button>
        </div>
        <div style={{ padding: "4px 0" }}>
          {lowStock.map(p => {
            const sugest = Math.max(p.min * 3 - p.stock, p.min);
            return (
              <div key={p.id} className="row" style={{ padding: "10px 20px", borderBottom: "1px solid var(--line)", gap: 10 }}>
                <input type="checkbox" defaultChecked style={{ accentColor: "var(--brand-orange)", width: 16, height: 16 }} />
                <div className="grow">
                  <div style={{ fontWeight: 600, fontSize: 13 }}>{p.name}</div>
                  <div className="muted" style={{ fontSize: 11 }}>
                    Estoque: <b style={{ color: p.stock === 0 ? "var(--err)" : "var(--warn)" }}>{p.stock}</b> / mín. {p.min}
                  </div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div className="muted" style={{ fontSize: 11 }}>Sugerido</div>
                  <div style={{ fontWeight: 800, fontFamily: "var(--font-display)" }}>{sugest} un.</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="card">
        <div className="card-header">
          <div className="grow"><h3>Pedidos de compra recentes</h3></div>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th>Pedido</th>
              <th>Fornecedor</th>
              <th>Data</th>
              <th>Itens</th>
              <th>Valor</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {orders.map(o => (
              <tr key={o.id}>
                <td style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>{o.id}</td>
                <td>{o.forn.nome}</td>
                <td className="muted" style={{ fontSize: 12 }}>{o.data}</td>
                <td className="num">{o.itens}</td>
                <td className="num" style={{ fontWeight: 700 }}>{brl(o.valor)}</td>
                <td>
                  {o.status === "recebido"    && <span className="badge badge-ok"><I.Check size={11} /> Recebido</span>}
                  {o.status === "em_transito" && <span className="badge badge-info"><I.Truck size={11} /> Em trânsito</span>}
                  {o.status === "pendente"    && <span className="badge badge-warn">Pendente</span>}
                </td>
                <td><button className="btn btn-sm">Ver</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {creating && <NewPurchaseOrderModal
        onClose={() => setCreating(false)}
        suggested={lowStock}
        onSave={(po) => {
          onToast({ msg: `Pedido ${po.id} criado e enviado para ${po.forn.nome}.`, kind: "ok" });
          setCreating(false);
        }}
      />}
    </>
  );
}

function NewPurchaseOrderModal({ onClose, onSave, suggested }) {
  const [fornId, setFornId] = useState(SUPPLIERS[0].id);
  const [items, setItems] = useState(
    suggested.slice(0, 4).map(p => ({
      pid: p.id, name: p.name, sku: p.sku,
      qty: Math.max(p.min * 3 - p.stock, p.min),
      cost: p.cost,
    }))
  );
  const setItem = (pid, patch) => setItems(prev => prev.map(it => it.pid === pid ? { ...it, ...patch } : it));
  const removeItem = (pid) => setItems(prev => prev.filter(it => it.pid !== pid));
  const total = items.reduce((s, it) => s + it.qty * it.cost, 0);
  const forn = SUPPLIERS.find(s => s.id === fornId);

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal modal-lg" onClick={e => e.stopPropagation()}>
        <div className="modal-hd">
          <I.Truck size={20} />
          <h3>Novo pedido de compra</h3>
          <span className="grow" />
          <span className="muted" style={{ fontSize: 11.5 }}>Será enviado por e-mail ao fornecedor</span>
          <button className="btn btn-ghost btn-icon btn-sm" onClick={onClose}><I.X size={14} /></button>
        </div>
        <div className="modal-bd">
          <div className="form-grid">
            <div className="field col-2">
              <label>Fornecedor *</label>
              <select className="select" value={fornId} onChange={e => setFornId(e.target.value)}>
                {SUPPLIERS.map(s => <option key={s.id} value={s.id}>{s.nome} — {s.cnpj}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Data prevista de entrega</label>
              <input className="input" type="date" defaultValue="2026-05-26" />
            </div>
            <div className="field">
              <label>Forma de pagamento</label>
              <select className="select">
                <option>Boleto 30 dias</option>
                <option>Boleto 30/60</option>
                <option>Pix à vista (5% desc)</option>
                <option>Cartão corporativo</option>
              </select>
            </div>
          </div>

          <h4 style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", marginTop: 20, marginBottom: 10 }}>
            Itens do pedido ({items.length})
          </h4>
          <table className="table" style={{ border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden" }}>
            <thead>
              <tr>
                <th>Produto</th>
                <th>Qtd</th>
                <th>Custo un.</th>
                <th>Total</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {items.map(it => (
                <tr key={it.pid}>
                  <td>
                    <div style={{ fontWeight: 600, fontSize: 12.5 }}>{it.name}</div>
                    <div className="muted" style={{ fontSize: 11, fontFamily: "var(--font-mono)" }}>{it.sku}</div>
                  </td>
                  <td>
                    <input type="number" min="1" value={it.qty} onChange={e => setItem(it.pid, { qty: parseInt(e.target.value) || 0 })}
                      className="input" style={{ width: 80, height: 32, fontSize: 13 }} />
                  </td>
                  <td>
                    <input type="number" step="0.01" value={it.cost} onChange={e => setItem(it.pid, { cost: parseFloat(e.target.value) || 0 })}
                      className="input" style={{ width: 100, height: 32, fontSize: 13 }} />
                  </td>
                  <td className="num" style={{ fontWeight: 700 }}>{brl(it.qty * it.cost)}</td>
                  <td>
                    <button className="btn btn-ghost btn-icon btn-sm" onClick={() => removeItem(it.pid)}><I.X size={13} /></button>
                  </td>
                </tr>
              ))}
              <tr>
                <td colSpan="3" style={{ textAlign: "right", fontWeight: 700, color: "var(--ink-2)" }}>Total do pedido</td>
                <td className="num" style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 800, color: "var(--brand-orange-deep)" }}>{brl(total)}</td>
                <td></td>
              </tr>
            </tbody>
          </table>

          <div className="field" style={{ marginTop: 14 }}>
            <label>Observações para o fornecedor</label>
            <textarea className="input" placeholder="Ex: Entregar somente em horário comercial. Confirmar previamente o frete." />
          </div>
        </div>
        <div className="modal-ft">
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className="btn">Salvar como rascunho</button>
          <button className="btn btn-primary" onClick={() => onSave({
            id: "PC-" + Math.floor(Math.random() * 900 + 215),
            forn, items, total,
          })}>
            <I.Check size={14} /> Enviar pedido
          </button>
        </div>
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────
   FORNECEDORES — tela exclusiva
   ────────────────────────────────────────────────────────────── */
function FornecedoresScreen({ onToast }) {
  const [creating, setCreating] = useState(false);
  const [editing, setEditing] = useState(null);
  const [q, setQ] = useState("");
  const list = SUPPLIERS.filter(s =>
    s.nome.toLowerCase().includes(q.toLowerCase()) ||
    s.cnpj.includes(q)
  );
  return (
    <>
      <div className="page-head">
        <div className="grow">
          <h2>Fornecedores</h2>
          <div className="muted">Cadastros de fabricantes, distribuidores e parceiros</div>
        </div>
        <button className="btn btn-primary" onClick={() => setCreating(true)}>
          <I.Plus size={14} /> Novo fornecedor
        </button>
      </div>

      <div className="card">
        <div className="card-header">
          <div className="grow" style={{ 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 nome ou CNPJ" value={q} onChange={e => setQ(e.target.value)} />
          </div>
          <div className="muted" style={{ fontSize: 12 }}>{list.length} fornecedores</div>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th>Razão social</th>
              <th>CNPJ</th>
              <th>Contato</th>
              <th>Última compra</th>
              <th>Pedidos no ano</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {list.map((s, i) => (
              <tr key={s.id}>
                <td>
                  <div style={{ fontWeight: 600 }}>{s.nome}</div>
                  <div className="muted" style={{ fontSize: 11, fontFamily: "var(--font-mono)" }}>{s.id}</div>
                </td>
                <td className="muted" style={{ fontFamily: "var(--font-mono)", fontSize: 12 }}>{s.cnpj}</td>
                <td>
                  <div style={{ fontSize: 12.5 }}>{s.contato}</div>
                  <div className="muted" style={{ fontSize: 11 }}>compras@{s.nome.toLowerCase().split(" ")[0]}.com.br</div>
                </td>
                <td className="muted" style={{ fontSize: 12 }}>{s.ultimo}</td>
                <td className="num">{[7, 11, 4, 18][i] || 5}</td>
                <td>
                  <div className="row" style={{ gap: 4, justifyContent: "flex-end" }}>
                    <button className="btn btn-sm" onClick={() => setEditing(s)}>Editar</button>
                    <button className="btn btn-sm">Histórico</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {(creating || editing) && (
        <SupplierFormModal
          initial={editing}
          onClose={() => { setCreating(false); setEditing(null); }}
          onSave={(s) => {
            if (editing) {
              const idx = SUPPLIERS.findIndex(x => x.id === editing.id);
              if (idx >= 0) SUPPLIERS[idx] = s;
              onToast({ msg: `Fornecedor ${s.nome} atualizado.`, kind: "ok" });
            } else {
              SUPPLIERS.push(s);
              onToast({ msg: `Fornecedor ${s.nome} cadastrado.`, kind: "ok" });
            }
            setCreating(false); setEditing(null);
          }}
        />
      )}
    </>
  );
}

function SupplierFormModal({ initial, onClose, onSave }) {
  const [form, setForm] = useState(initial || { nome: "", cnpj: "", contato: "", email: "", endereco: "" });
  const set = (k, v) => setForm(prev => ({ ...prev, [k]: v }));
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-hd">
          <I.Users size={18} />
          <h3>{initial ? "Editar fornecedor" : "Novo fornecedor"}</h3>
          <button className="btn btn-ghost btn-icon btn-sm" onClick={onClose}><I.X size={14} /></button>
        </div>
        <div className="modal-bd">
          <div className="form-grid">
            <div className="field col-2">
              <label>Razão social *</label>
              <input className="input" autoFocus value={form.nome} onChange={e => set("nome", e.target.value)} />
            </div>
            <div className="field">
              <label>CNPJ *</label>
              <input className="input" value={form.cnpj} onChange={e => set("cnpj", e.target.value)} placeholder="00.000.000/0000-00" style={{ fontFamily: "var(--font-mono)" }} />
            </div>
            <div className="field">
              <label>IE</label>
              <input className="input" placeholder="000.000.000.000" style={{ fontFamily: "var(--font-mono)" }} />
            </div>
            <div className="field">
              <label>Telefone do contato</label>
              <input className="input" value={form.contato} onChange={e => set("contato", e.target.value)} placeholder="(00) 0000-0000" />
            </div>
            <div className="field">
              <label>E-mail comercial</label>
              <input className="input" value={form.email} onChange={e => set("email", e.target.value)} placeholder="compras@fornecedor.com.br" />
            </div>
            <div className="field col-2">
              <label>Endereço</label>
              <input className="input" value={form.endereco} onChange={e => set("endereco", e.target.value)} placeholder="Rua, número, cidade — UF" />
            </div>
            <div className="field col-2">
              <label>Categorias / produtos fornecidos</label>
              <input className="input" placeholder="Ex: iscas artificiais, anzóis, varas de carbono" />
            </div>
            <div className="field col-2">
              <label>Observações</label>
              <textarea className="input" placeholder="Prazos, condições especiais, etc." />
            </div>
          </div>
        </div>
        <div className="modal-ft">
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className="btn btn-primary" onClick={() => {
            if (!form.nome.trim() || !form.cnpj.trim()) return;
            onSave({
              id: initial?.id || ("F" + Math.floor(Math.random() * 900 + 100)),
              nome: form.nome, cnpj: form.cnpj,
              contato: form.contato || "—",
              ultimo: initial?.ultimo || "—",
            });
          }}>
            <I.Check size={14} /> {initial ? "Salvar alterações" : "Cadastrar"}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────
   FINANCEIRO — caixa, contas a receber/pagar
   ────────────────────────────────────────────────────────────── */
function FinanceiroScreen({ onToast }) {
  const sessions = [
    { pdv: "PDV01", oper: "Daniela Maranhão", abertura: "Hoje 07:42", fechamento: "—",         vendas: 1842.50, status: "aberto"   },
    { pdv: "PDV02", oper: "Larissa Furtado",  abertura: "Hoje 08:10", fechamento: "—",         vendas:  978.40, status: "aberto"   },
    { pdv: "PDV01", oper: "Pedro Henrique",   abertura: "18/05 08:00", fechamento: "18/05 19:12", vendas: 3220.10, status: "fechado" },
    { pdv: "PDV02", oper: "Daniela Maranhão", abertura: "18/05 08:18", fechamento: "18/05 19:05", vendas: 2104.80, status: "fechado" },
  ];
  return (
    <>
      <div className="page-head">
        <div className="grow">
          <h2>Financeiro</h2>
          <div className="muted">Caixas, recebimentos, contas a pagar</div>
        </div>
        <button className="btn"><I.Sync size={14} /> Conciliar</button>
        <button className="btn btn-primary"><I.Plus size={14} /> Lançamento manual</button>
      </div>

      <div className="grid-kpi" style={{ marginBottom: 16 }}>
        <div className="kpi"><div className="kpi-icon"><I.Cash size={18} /></div>
          <div className="kpi-label">Em caixa agora</div>
          <div className="kpi-value">{brl(1360.30 + 2840.00)}</div>
          <div className="muted" style={{ fontSize: 12 }}>2 PDVs abertos</div>
        </div>
        <div className="kpi"><div className="kpi-icon green"><I.TrendUp size={18} /></div>
          <div className="kpi-label">Recebimentos (mês)</div>
          <div className="kpi-value">{brl(71175)}</div>
          <div className="kpi-delta up"><I.TrendUp size={12} /> +12,4% vs. abr/26</div>
        </div>
        <div className="kpi"><div className="kpi-icon warn"><I.Down size={18} /></div>
          <div className="kpi-label">Pagamentos (mês)</div>
          <div className="kpi-value">{brl(38420)}</div>
          <div className="muted" style={{ fontSize: 12 }}>fornecedores + folha</div>
        </div>
        <div className="kpi"><div className="kpi-icon info"><I.Chart size={18} /></div>
          <div className="kpi-label">Resultado parcial</div>
          <div className="kpi-value" style={{ color: "var(--ok)" }}>{brl(32755)}</div>
          <div className="muted" style={{ fontSize: 12 }}>margem 46%</div>
        </div>
      </div>

      <div className="card">
        <div className="card-header"><h3>Movimento de caixa</h3></div>
        <table className="table">
          <thead>
            <tr>
              <th>PDV</th>
              <th>Operador</th>
              <th>Abertura</th>
              <th>Fechamento</th>
              <th>Vendas no turno</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {sessions.map((s, i) => (
              <tr key={i}>
                <td style={{ fontWeight: 700 }}>{s.pdv}</td>
                <td>{s.oper}</td>
                <td className="muted" style={{ fontSize: 12 }}>{s.abertura}</td>
                <td className="muted" style={{ fontSize: 12 }}>{s.fechamento}</td>
                <td className="num" style={{ fontWeight: 700 }}>{brl(s.vendas)}</td>
                <td>
                  {s.status === "aberto"
                    ? <span className="badge badge-ok"><span className="dot dot-ok" /> Aberto</span>
                    : <span className="badge">Fechado</span>}
                </td>
                <td><button className="btn btn-sm">Detalhar</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

/* ──────────────────────────────────────────────────────────────
   RELATÓRIOS — placeholders com vitrine
   ────────────────────────────────────────────────────────────── */
function RelatoriosScreen({ onToast }) {
  const reports = [
    { cat: "Vendas",   items: ["Vendas por período", "Vendas por vendedor", "Vendas por canal", "Ticket médio", "Curva ABC de produtos"] },
    { cat: "Estoque",  items: ["Posição de estoque", "Movimentações", "Produtos sem giro", "Inventário (contagem)", "Sugestão de reposição"] },
    { cat: "Financeiro",items: ["DRE simplificado", "Fluxo de caixa", "Recebimentos por forma de pgto", "Sangrias e suprimentos"] },
    { cat: "Fiscal",   items: ["NFs emitidas", "Apuração ICMS", "SPED contribuições", "Notas canceladas"] },
    { cat: "Clientes", items: ["Maiores compradores", "Recompra", "Aniversariantes"] },
    { cat: "Marketplaces", items: ["Vendas por canal", "Reputação ML/Shopee", "Custos de comissão", "SLA de entrega"] },
  ];
  return (
    <>
      <div className="page-head">
        <div className="grow">
          <h2>Relatórios</h2>
          <div className="muted">Mais de 25 relatórios prontos · exportável em PDF, CSV e XLSX</div>
        </div>
        <button className="btn"><I.Filter size={14} /> Agendamentos</button>
      </div>

      <div className="grid-2">
        {reports.map(r => (
          <div key={r.cat} className="card card-pad">
            <h3 style={{ fontSize: 14, marginBottom: 10 }}>{r.cat}</h3>
            <div style={{ display: "flex", flexDirection: "column" }}>
              {r.items.map(it => (
                <div key={it} className="row" style={{ padding: "9px 0", borderBottom: "1px solid var(--line)", fontSize: 13 }}>
                  <I.Chart size={14} style={{ color: "var(--brand-orange)" }} />
                  <span className="grow">{it}</span>
                  <button className="btn btn-sm btn-ghost">Abrir <I.ChevR size={12} /></button>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

Object.assign(window, {
  NFScreen, ClientesScreen, UsuariosScreen, IntegracoesScreen,
  ComprasScreen, FornecedoresScreen, FinanceiroScreen, RelatoriosScreen,
});