// Vendas — detalhe (drawer) + novo (modal full-form)

function VendaDetail({ venda, onClose, onAddEntrada, onAddFaturamento, onChangeStatus }) {
  const [tab, setTab] = React.useState("resumo");
  const [novaEntrada, setNovaEntrada] = React.useState(null);
  const [novoFat, setNovoFat] = React.useState(null);

  if (!venda) return null;

  const cliente = window.MP_DATA.clientes.find(c => c.id === venda.clienteId);
  const tipo = window.MP_DATA.tipos.find(t => t.id === venda.tipoId);
  const vendedor = window.MP_DATA.vendedores.find(v => v.id === venda.vendedorId);
  const fat = calcFaturado(venda);
  const ent = calcEntradas(venda);
  const cnpjMap = vendaPorCnpj(venda);
  const saldo = venda.valor - fat;
  const aReceber = fat - ent;

  return (
    <Drawer
      open
      onClose={onClose}
      title={
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ background: "var(--mp-yellow)", color: "#0d0d0d", padding: "3px 9px", borderRadius: 5, fontFamily: "JetBrains Mono, monospace", fontSize: 14 }}>OP {venda.op}</span>
          {cliente?.nome}
        </div>
      }
      subtitle={venda.descricao}
      footer={
        <>
          <Button variant="ghost" icon="edit">Editar</Button>
          <div style={{ flex: 1 }} />
          <Button variant="outline" onClick={onClose}>Fechar</Button>
          <Button variant="accent" icon="plus" onClick={() => setNovaEntrada({ data: new Date().toISOString().slice(0, 10), valor: 0, forma: "Transferência", obs: "" })}>
            Nova entrada
          </Button>
        </>
      }
    >
      {/* Status + meta */}
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18, flexWrap: "wrap" }}>
        <StatusBadge statusId={venda.status} />
        <Badge bg="rgba(0,0,0,.04)" color="var(--text-2)">{tipo?.nome}</Badge>
        <div style={{ flex: 1 }} />
        <Avatar vendedorId={venda.vendedorId} size={26} />
        <div style={{ fontSize: 12.5, fontWeight: 600 }}>{vendedor?.nome}</div>
      </div>

      {/* Resumo financeiro */}
      <div className="detail-grid">
        <div className="detail-cell">
          <div className="detail-cell__label">Valor da venda</div>
          <div className="detail-cell__value">{fmtBRL(venda.valor)}</div>
        </div>
        <div className="detail-cell">
          <div className="detail-cell__label">Peso total</div>
          <div className="detail-cell__value">{fmtNumber(venda.peso)} kg</div>
        </div>
        <div className="detail-cell">
          <div className="detail-cell__label">Faturado</div>
          <div className="detail-cell__value" style={{ color: "var(--st-fat)" }}>{fmtBRL(fat)}</div>
          <div style={{ fontSize: 11.5, color: "var(--text-3)", fontWeight: 600, marginTop: 2 }}>
            Saldo a faturar: {fmtBRL(saldo)}
          </div>
        </div>
        <div className="detail-cell">
          <div className="detail-cell__label">Recebido</div>
          <div className="detail-cell__value" style={{ color: "var(--mp-yellow-deep)" }}>{fmtBRL(ent)}</div>
          <div style={{ fontSize: 11.5, color: "var(--text-3)", fontWeight: 600, marginTop: 2 }}>
            A receber: {fmtBRL(aReceber)}
          </div>
        </div>
      </div>

      {/* Cliente / Obra */}
      <div className="section-head"><h4>Cliente · Obra</h4></div>
      <div className="row-list">
        <div className="row-list__item" style={{ alignItems: "flex-start" }}>
          <Icon name="building" size={18} style={{ color: "var(--text-3)", marginTop: 2 }} />
          <div className="row-list__main">
            <b>{cliente?.nome}</b>
            <small>{cliente?.cnpj} · {cliente?.contato} · {cliente?.telefone}</small>
          </div>
        </div>
        <div className="row-list__item" style={{ alignItems: "flex-start" }}>
          <Icon name="dot" size={18} style={{ color: "var(--text-3)", marginTop: 2 }} />
          <div className="row-list__main">
            <b>Endereço da obra</b>
            <small>{venda.enderecoObra}</small>
          </div>
        </div>
        <div className="row-list__item" style={{ alignItems: "flex-start" }}>
          <Icon name="calendar" size={18} style={{ color: "var(--text-3)", marginTop: 2 }} />
          <div className="row-list__main">
            <b>Início</b>
            <small>{fmtDate(venda.dataInicio)}</small>
          </div>
        </div>
      </div>

      {/* Faturamento por CNPJ */}
      <div className="section-head">
        <h4>Faturamento por CNPJ</h4>
        <Button variant="ghost" size="sm" icon="plus" onClick={() => setNovoFat({ cnpjId: "padrao", valor: 0, data: new Date().toISOString().slice(0, 10), nf: "" })}>
          Adicionar parcela
        </Button>
      </div>

      {venda.faturamentos.length === 0 ? (
        <div style={{ padding: "20px 14px", textAlign: "center", background: "var(--bg-subtle)", borderRadius: 8, border: "1px dashed var(--border-strong)", color: "var(--text-3)", fontSize: 13 }}>
          Nenhuma parcela faturada. Adicione a primeira parcela quando emitir a NF.
        </div>
      ) : (
        <div className="row-list">
          {venda.faturamentos.map((f, i) => (
            <div key={i} className="row-list__item">
              <div className="row-list__date">
                {fmtDateShort(f.data)}
              </div>
              <div className="row-list__main">
                <b style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <CnpjPill cnpjId={f.cnpjId} />
                  NF {f.nf}
                </b>
                <small>Parcela {i + 1} de {venda.faturamentos.length}</small>
              </div>
              <div className="row-list__value">{fmtBRL(f.valor)}</div>
            </div>
          ))}
        </div>
      )}

      {/* Entradas */}
      <div className="section-head">
        <h4>Entradas financeiras</h4>
        <Button variant="ghost" size="sm" icon="plus" onClick={() => setNovaEntrada({ data: new Date().toISOString().slice(0, 10), valor: 0, forma: "Transferência", obs: "" })}>
          Nova entrada
        </Button>
      </div>

      {venda.entradas.length === 0 ? (
        <div style={{ padding: "20px 14px", textAlign: "center", background: "var(--bg-subtle)", borderRadius: 8, border: "1px dashed var(--border-strong)", color: "var(--text-3)", fontSize: 13 }}>
          Nenhuma entrada registrada ainda.
        </div>
      ) : (
        <div className="row-list">
          {venda.entradas.map((e) => (
            <div key={e.id} className="row-list__item">
              <div className="row-list__date">{fmtDateShort(e.data)}</div>
              <div className="row-list__main">
                <b>{e.forma}</b>
                <small>{e.obs || "Sem observação"}</small>
              </div>
              <div className="row-list__value" style={{ color: "var(--st-fat)" }}>+ {fmtBRL(e.valor)}</div>
            </div>
          ))}
        </div>
      )}

      {/* Modais inline */}
      <NovaEntradaModal
        open={!!novaEntrada}
        valor={novaEntrada}
        saldo={aReceber}
        onClose={() => setNovaEntrada(null)}
        onSave={(payload) => { onAddEntrada(venda.op, payload); setNovaEntrada(null); }}
      />
      <NovoFaturamentoModal
        open={!!novoFat}
        valor={novoFat}
        saldo={saldo}
        onClose={() => setNovoFat(null)}
        onSave={(payload) => { onAddFaturamento(venda.op, payload); setNovoFat(null); }}
      />
    </Drawer>
  );
}

function NovaEntradaModal({ open, valor, saldo, onClose, onSave }) {
  const [data, setData] = React.useState("");
  const [v, setV] = React.useState(0);
  const [forma, setForma] = React.useState("Transferência");
  const [obs, setObs] = React.useState("");
  React.useEffect(() => {
    if (open && valor) { setData(valor.data); setV(valor.valor); setForma(valor.forma); setObs(valor.obs); }
  }, [open]);
  if (!open) return null;

  return (
    <Modal
      open
      onClose={onClose}
      title="Registrar nova entrada"
      footer={
        <>
          <Button variant="ghost" onClick={onClose}>Cancelar</Button>
          <Button variant="primary" onClick={() => onSave({ data, valor: v, forma, obs })} disabled={!v}>Registrar entrada</Button>
        </>
      }
    >
      <div style={{ fontSize: 13, color: "var(--text-2)", background: "var(--bg-subtle)", padding: "10px 12px", borderRadius: 7, marginBottom: 14, display: "flex", justifyContent: "space-between" }}>
        <span>Saldo a receber (faturado − pago)</span>
        <b style={{ color: "var(--mp-yellow-deep)" }}>{fmtBRL(saldo)}</b>
      </div>
      <div className="form-grid">
        <Field label="Data" span={6} required>
          <Input type="date" value={data} onChange={e => setData(e.target.value)} />
        </Field>
        <Field label="Valor" span={6} required>
          <InputMoney value={v} onChange={setV} />
        </Field>
        <Field label="Forma de pagamento" span={6}>
          <Select value={forma} onChange={setForma} options={formasPagamento.map(f => ({ value: f, label: f }))} />
        </Field>
        <Field label="Observação" span={12}>
          <Input value={obs} onChange={e => setObs(e.target.value)} placeholder="Ex: 1ª medição, sinal 30%..." />
        </Field>
      </div>
    </Modal>
  );
}

function NovoFaturamentoModal({ open, valor, saldo, onClose, onSave }) {
  const [cnpjId, setCnpjId] = React.useState("padrao");
  const [v, setV] = React.useState(0);
  const [data, setData] = React.useState("");
  const [nf, setNf] = React.useState("");
  React.useEffect(() => {
    if (open && valor) { setCnpjId(valor.cnpjId); setV(valor.valor); setData(valor.data); setNf(valor.nf); }
  }, [open]);
  if (!open) return null;

  return (
    <Modal
      open
      onClose={onClose}
      title="Adicionar parcela de faturamento"
      footer={
        <>
          <Button variant="ghost" onClick={onClose}>Cancelar</Button>
          <Button variant="primary" onClick={() => onSave({ cnpjId, valor: v, data, nf })} disabled={!v || !nf}>Adicionar parcela</Button>
        </>
      }
    >
      <div style={{ fontSize: 13, color: "var(--text-2)", background: "var(--bg-subtle)", padding: "10px 12px", borderRadius: 7, marginBottom: 14, display: "flex", justifyContent: "space-between" }}>
        <span>Saldo a faturar</span>
        <b>{fmtBRL(saldo)}</b>
      </div>
      <div className="form-grid">
        <Field label="CNPJ de faturamento" span={6} required>
          <Select value={cnpjId} onChange={setCnpjId} options={window.MP_DATA.cnpjs.map(c => ({ value: c.id, label: `${c.nome} — ${c.cnpj}` }))} />
        </Field>
        <Field label="Valor da parcela" span={6} required>
          <InputMoney value={v} onChange={setV} />
        </Field>
        <Field label="Data da emissão" span={6} required>
          <Input type="date" value={data} onChange={e => setData(e.target.value)} />
        </Field>
        <Field label="Nº da NF" span={6} required>
          <Input value={nf} onChange={e => setNf(e.target.value)} placeholder="ex: 12.450" />
        </Field>
      </div>
    </Modal>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// NOVA VENDA — Modal grande (formulário completo)
// ─────────────────────────────────────────────────────────────────────────────

function NovaVendaModal({ open, onClose, onSave, proxOp }) {
  const [f, setF] = React.useState(() => ({
    op: proxOp,
    vendedorId: "cris",
    clienteId: "",
    tipoId: "estrutura",
    descricao: "",
    peso: 0,
    valor: 0,
    status: "previsao",
    enderecoObra: "",
    dataInicio: new Date().toISOString().slice(0, 10),
  }));
  const [opAuto, setOpAuto] = React.useState(true);

  React.useEffect(() => { if (open) setF(s => ({ ...s, op: proxOp })); }, [open, proxOp]);

  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const valid = f.clienteId && f.descricao && f.valor > 0;

  if (!open) return null;

  return (
    <Modal
      open
      onClose={onClose}
      title="Nova venda"
      size="lg"
      footer={
        <>
          <Button variant="ghost" onClick={onClose}>Cancelar</Button>
          <Button variant="outline" onClick={() => onSave({ ...f, status: "previsao" })} disabled={!valid}>Salvar como previsão</Button>
          <Button variant="primary" onClick={() => onSave(f)} disabled={!valid}>Cadastrar venda</Button>
        </>
      }
    >
      <div className="form-section">
        <div className="form-section__title">Identificação</div>
        <div className="form-grid">
          <Field label="OP (ordem de produção)" span={3} required hint={opAuto ? "automática" : null}>
            <div style={{ display: "flex", gap: 6 }}>
              <Input value={f.op} onChange={e => set("op", e.target.value)} disabled={opAuto} />
              <button className="icon-btn" onClick={() => setOpAuto(x => !x)} title={opAuto ? "Editar manualmente" : "Voltar para automática"}>
                <Icon name={opAuto ? "edit" : "sparkle"} size={14} />
              </button>
            </div>
          </Field>
          <Field label="Vendedor responsável" span={4} required>
            <Select value={f.vendedorId} onChange={(v) => set("vendedorId", v)}
              options={window.MP_DATA.vendedores.map(v => ({ value: v.id, label: v.nome }))} />
          </Field>
          <Field label="Tipo de obra" span={5} required>
            <Select value={f.tipoId} onChange={(v) => set("tipoId", v)}
              options={window.MP_DATA.tipos.map(t => ({ value: t.id, label: t.nome }))} />
          </Field>
        </div>
      </div>

      <div className="form-section">
        <div className="form-section__title">Cliente · Projeto</div>
        <div className="form-grid">
          <Field label="Cliente" span={8} required>
            <Select value={f.clienteId} onChange={(v) => set("clienteId", v)} placeholder="Selecione um cliente..."
              options={window.MP_DATA.clientes.map(c => ({ value: c.id, label: `${c.nome} — ${c.cidade}/${c.uf}` }))} />
          </Field>
          <Field label="Data de início" span={4} required>
            <Input type="date" value={f.dataInicio} onChange={e => set("dataInicio", e.target.value)} />
          </Field>
          <Field label="Descrição do projeto" span={12} required>
            <Input value={f.descricao} onChange={e => set("descricao", e.target.value)} placeholder="Ex: Estrutura sobre laje residência" />
          </Field>
          <Field label="Endereço da obra" span={12}>
            <Input value={f.enderecoObra} onChange={e => set("enderecoObra", e.target.value)} placeholder="Rua, número — cidade/UF" />
          </Field>
        </div>
      </div>

      <div className="form-section">
        <div className="form-section__title">Valores</div>
        <div className="form-grid">
          <Field label="Peso" span={4} required>
            <Input type="number" inputMode="decimal" value={f.peso || ""} onChange={e => set("peso", parseFloat(e.target.value) || 0)} suffix="kg" />
          </Field>
          <Field label="Valor total da venda" span={4} required>
            <InputMoney value={f.valor} onChange={(v) => set("valor", v)} />
          </Field>
          <Field label="Valor por kg" span={4} hint="calculado">
            <Input value={f.peso > 0 ? fmtBRL(f.valor / f.peso) : "—"} disabled />
          </Field>
        </div>
        <div style={{ background: "var(--bg-subtle)", border: "1px solid var(--border)", padding: "10px 12px", borderRadius: 7, marginTop: 12, display: "flex", alignItems: "center", gap: 10, fontSize: 12.5, color: "var(--text-2)" }}>
          <Icon name="sparkle" size={14} />
          O faturamento por CNPJ (Padrão, FFC, Quantico) é registrado depois, parcela por parcela, conforme as NFs forem emitidas.
        </div>
      </div>
    </Modal>
  );
}

window.VendaDetail = VendaDetail;
window.NovaVendaModal = NovaVendaModal;