/* ANISAN — Investimentos, Empréstimos e Dívidas. Full CRUD via dialog. */

const TIPO_COR = { "Financiamento": "var(--brass)", "Empréstimo": "var(--clay)", "Parcelamento": "var(--slate)", "Consórcio": "var(--sand)", "Investimento": "var(--jade)" };

function Investimentos({ period }) {
  const store = window.useStore();
  const data = store.data;
  const D = window.ANISAN_DATA;
  const [tab, setTab] = React.useState("dividas");
  const [dlg, setDlg] = React.useState(null);   // edit/create form
  const [confirmDel, setConfirmDel] = React.useState(null);

  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  const mobile = window.useIsMobile();

  const dividas = data.investimentos.filter(x => !x.aplicacao);
  const aplicacoes = data.investimentos.filter(x => x.aplicacao);
  // list scoped by next-due date within the selected period (undated kept)
  const lista = (tab === "dividas" ? dividas : aplicacoes).filter(x => window.dateInRange(x.prox, period));

  const saldoDevedor = dividas.reduce((s, x) => s + x.saldo, 0);
  const parcelasMes = dividas.reduce((s, x) => s + x.parcela, 0);
  const jurosMes = dividas.reduce((s, x) => s + x.saldo * (x.juros / 100), 0);
  const aplicado = aplicacoes.reduce((s, x) => s + x.saldo, 0);

  const tiles = [
    { label: "Saldo devedor total", value: window.BRL(saldoDevedor), accent: "var(--clay)" },
    { label: "Parcelas do mês", value: window.BRL(parcelasMes), accent: "var(--paper)" },
    { label: "Juros estimados / mês", value: window.BRL(jurosMes), accent: "var(--sand)" },
    { label: "Aplicado (reserva)", value: window.BRL(aplicado), accent: "var(--jade)" },
  ];

  const cronograma = Array.from({ length: 6 }, (_, i) => Math.max(0, Math.round(saldoDevedor - parcelasMes * i * 0.74)));

  const blank = () => ({ nome: "", tipo: tab === "aplicacoes" ? "Investimento" : "Financiamento", banco: "Unicred", saldo: "", parcela: "", restantes: "", juros: "", prox: "", aplicacao: tab === "aplicacoes" });
  const openEdit = (x) => setDlg({ ...x, saldo: String(x.saldo), parcela: String(x.parcela), restantes: String(x.restantes), juros: String(x.juros) });

  const save = () => {
    const f = dlg;
    store.set(d => {
      const rec = {
        nome: f.nome || "Novo contrato", tipo: f.tipo, banco: f.banco,
        saldo: window.parseBRL(f.saldo), parcela: window.parseBRL(f.parcela),
        restantes: parseInt(f.restantes) || 0, juros: parseFloat(String(f.juros).replace(",", ".")) || 0,
        prox: f.prox || "—", c: TIPO_COR[f.tipo] || "var(--slate)", aplicacao: !!f.aplicacao,
      };
      if (f.id) { const x = d.investimentos.find(y => y.id === f.id); Object.assign(x, rec); }
      else d.investimentos.push({ id: window.uid(), ...rec });
    }, "investimentos");
    setDlg(null);
  };
  const remove = (id) => { store.set(d => { d.investimentos = d.investimentos.filter(x => x.id !== id); }, "investimentos"); setConfirmDel(null); };

  return (
    <div style={{ padding: mobile ? "18px 14px 40px" : "26px 32px 48px" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 14, marginBottom: 22 }}>
        <SectionTitle style={{ margin: 0 }}>Investimentos, empréstimos & dívidas</SectionTitle>
        <div style={{ display: "flex", gap: 12 }}>
          <SegTabs value={tab} onChange={setTab} options={[{ value: "dividas", label: "Dívidas" }, { value: "aplicacoes", label: "Aplicações" }]} />
          <Button variant="primary" onClick={() => setDlg(blank())}>+ Novo contrato</Button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: 14, marginBottom: 22 }}>
        {tiles.map((t, i) => (
          <div key={i} style={{ background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: "var(--radius-tile)", padding: "16px 18px" }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.05em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 8 }}>{t.label}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 21, fontWeight: 500, color: t.accent }}>{t.value}</div>
          </div>
        ))}
      </div>

      <div style={{ display: "flex", gap: 24, alignItems: "flex-start", flexWrap: "wrap" }}>
        <Panel title={tab === "dividas" ? "Contratos em aberto" : "Aplicações"} style={{ flex: 2, minWidth: 480 }}>
          <div style={{ display: "flex", fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--muted-2)", padding: "0 0 10px", borderBottom: "1px solid var(--hairline)" }}>
            <span style={{ flex: 1 }}>Contrato</span>
            <span style={{ width: 96, textAlign: "right" }}>Saldo</span>
            <span style={{ width: 84, textAlign: "right" }}>Parcela</span>
            <span style={{ width: 52, textAlign: "right" }}>{tab === "dividas" ? "Rest." : "Rend."}</span>
            <span style={{ width: 76, textAlign: "right" }}>Ações</span>
          </div>
          {lista.map((x, i) => (
            <div key={x.id} style={{ display: "flex", alignItems: "center", padding: "12px 0", borderBottom: i < lista.length - 1 ? "1px solid var(--hairline)" : "none" }}>
              <span style={{ flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: 11 }}>
                <span style={{ width: 8, height: 8, borderRadius: 2, background: x.c, flexShrink: 0 }}></span>
                <span style={{ minWidth: 0 }}>
                  <span style={{ display: "block", fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--paper)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{x.nome}</span>
                  <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--muted-2)", marginTop: 1 }}>{x.tipo} · {x.banco} · próx. {x.prox}</span>
                </span>
              </span>
              <span style={{ width: 96, textAlign: "right", fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--paper)" }}>{window.BRLk(x.saldo)}</span>
              <span style={{ width: 84, textAlign: "right", fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--muted)" }}>{x.parcela ? window.BRLk(x.parcela) : "—"}</span>
              <span style={{ width: 52, textAlign: "right", fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--muted)" }}>{tab === "dividas" ? (x.restantes + "×") : (x.juros + "%")}</span>
              <span style={{ width: 76, display: "flex", justifyContent: "flex-end", gap: 5 }}>
                <button title="Editar" onClick={() => openEdit(x)} style={iconMini2}><i data-lucide="pencil" style={{ width: 13, height: 13, strokeWidth: 1.7 }}></i></button>
                <button title="Excluir" onClick={() => setConfirmDel(x)} style={iconMini2}><i data-lucide="trash-2" style={{ width: 13, height: 13, strokeWidth: 1.7 }}></i></button>
              </span>
            </div>
          ))}
          {lista.length === 0 && <p style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--muted-2)", textAlign: "center", padding: "18px 0" }}>Nenhum registro. Use “+ Novo contrato”.</p>}
        </Panel>

        <Panel title="Cronograma · saldo devedor" action={<span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--muted-2)" }}>6 meses</span>} style={{ flex: 1, minWidth: 300 }}>
          <AreaChart values={cronograma} labels={["Jun", "Jul", "Ago", "Set", "Out", "Nov"]} color="var(--clay)" height={200} baseline={0} />
          <p style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--muted)", lineHeight: 1.6, margin: "16px 0 0" }}>
            Amortização projetada mantendo as parcelas atuais.
          </p>
        </Panel>
      </div>

      {/* create / edit dialog */}
      <Dialog open={!!dlg} title={dlg && dlg.id ? "Editar contrato" : "Novo contrato"} onClose={() => setDlg(null)} width={520}
        footer={<><Button onClick={() => setDlg(null)}>Cancelar</Button><Button variant="solid" onClick={save}>Salvar</Button></>}>
        {dlg && (
          <div style={{ display: "grid", gap: 16 }}>
            <Input label="Nome do contrato" value={dlg.nome} onChange={(v) => setDlg({ ...dlg, nome: v })} icon="file-text" placeholder="Ex.: Financiamento reforma" />
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <Select label="Tipo" value={dlg.tipo} onChange={(v) => setDlg({ ...dlg, tipo: v, aplicacao: v === "Investimento" })} options={D.tiposInvest} />
              <Select label="Banco / instituição" value={dlg.banco} onChange={(v) => setDlg({ ...dlg, banco: v })} options={D.contasOpcoes} />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <Input label="Saldo" prefix="R$" value={dlg.saldo} onChange={(v) => setDlg({ ...dlg, saldo: v })} placeholder="0,00" />
              <Input label="Parcela" prefix="R$" value={dlg.parcela} onChange={(v) => setDlg({ ...dlg, parcela: v })} placeholder="0,00" />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
              <Input label="Parcelas rest." value={dlg.restantes} onChange={(v) => setDlg({ ...dlg, restantes: v })} placeholder="0" />
              <Input label="Juros % a.m." value={dlg.juros} onChange={(v) => setDlg({ ...dlg, juros: v })} placeholder="0,00" />
              <Input label="Próx. venc." value={dlg.prox} onChange={(v) => setDlg({ ...dlg, prox: v })} placeholder="DD/MM" />
            </div>
          </div>
        )}
      </Dialog>

      {/* delete confirm */}
      <Dialog open={!!confirmDel} title="Excluir contrato" onClose={() => setConfirmDel(null)} width={420}
        footer={<><Button onClick={() => setConfirmDel(null)}>Cancelar</Button><Button variant="solid" accent="var(--clay)" onClick={() => remove(confirmDel.id)}>Excluir</Button></>}>
        {confirmDel && <p style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--paper)", lineHeight: 1.6, margin: 0 }}>Excluir <b>{confirmDel.nome}</b>? Esta ação não pode ser desfeita.</p>}
      </Dialog>
    </div>
  );
}

const iconMini2 = { width: 26, height: 26, borderRadius: 6, background: "none", border: "1px solid var(--hairline)", display: "grid", placeItems: "center", cursor: "pointer", color: "var(--muted)" };

window.Investimentos = Investimentos;