/* ANISAN — Painel with full CRUD on saldos (contas bancárias) and lançamentos,
   persisted via the store. Body only; shell renders Sidebar + TopBar. */

function HeroBalance({ unit, total, giro, reserva }) {
  return (
    <div style={{ position: "relative", overflow: "hidden", background: "linear-gradient(135deg, #3a3024 0%, #2b2620 60%, #241f1a 100%)", border: "1px solid var(--hairline)", borderRadius: "var(--radius)", padding: "30px 32px", marginBottom: 18 }}>
      <div style={{ position: "absolute", right: -40, top: -40, width: 220, height: 220, borderRadius: "50%", background: "radial-gradient(circle, rgba(201,162,75,0.18), transparent 70%)" }}></div>
      <div style={{ position: "relative" }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--brass)" }}>Saldo atual · {unit}</span>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 44, fontWeight: 500, color: "var(--paper)", margin: "10px 0 4px", lineHeight: 1 }}>{window.BRL(total)}</div>
        <div style={{ display: "flex", gap: 28, marginTop: 18, flexWrap: "wrap", alignItems: "flex-end" }}>
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--muted)" }}>Capital de giro</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 20, color: "var(--paper)", marginTop: 4 }}>{window.BRL(giro)}</div>
          </div>
          <div style={{ borderLeft: "1px solid var(--hairline)", paddingLeft: 28 }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--jade)" }}>Reserva</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 20, color: "var(--paper)", marginTop: 4 }}>{window.BRL(reserva)}</div>
          </div>
          <div style={{ marginLeft: "auto" }}>
            <Button variant="primary" onClick={() => window.__go && window.__go("fluxo")}>Ver fluxo de caixa →</Button>
          </div>
        </div>
      </div>
    </div>
  );
}

function UnitCard({ name, accent, fat, delivery, active, onClick }) {
  const edge = active ? "var(--hairline-strong)" : "var(--hairline)";
  return (
    <button onClick={onClick} style={{ flex: "1 1 150px", textAlign: "left", cursor: "pointer", background: active ? "var(--surface-2)" : "var(--surface)", borderTop: "2px solid " + accent, borderRight: "1px solid " + edge, borderBottom: "1px solid " + edge, borderLeft: "1px solid " + edge, borderRadius: "var(--radius-tile)", padding: "16px 18px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
        <span style={{ width: 9, height: 9, borderRadius: "50%", background: accent }}></span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--muted)" }}>{name}</span>
      </div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 500, color: "var(--paper)" }}>{window.BRL(fat)}</div>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--muted-2)", marginTop: 6 }}>faturamento hoje · <span style={{ color: "var(--jade)" }}>{delivery}% delivery</span></div>
    </button>
  );
}

function ContaTile({ c, unitTag, onField, onAtivo, onDel }) {
  const accent = !c.ativo ? "var(--neutral)" : "var(--brass)";
  const soma = window.contaSoma(c);
  const campos = [
    { k: "s1", label: "Saldo 1" },
    { k: "s2", label: "Saldo 2" },
    { k: "aplicacao", label: "Aplicação" },
    { k: "reserva", label: "Reserva" },
  ];
  return (
    <div style={{ background: "var(--surface)", borderTop: `2px ${c.ativo ? "solid" : "dashed"} ${accent}`, borderRight: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)", borderLeft: "1px solid var(--hairline)", borderRadius: "var(--radius-tile)", padding: "14px 16px", opacity: c.ativo ? 1 : 0.6 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, marginBottom: 10 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: "0.05em", textTransform: "uppercase", color: "var(--muted)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.nome}</span>
        <span style={{ display: "flex", gap: 4, flexShrink: 0 }}>
          <button title={c.ativo ? "Desativar" : "Ativar"} onClick={onAtivo} style={iconMini}><i data-lucide={c.ativo ? "eye" : "eye-off"} style={{ width: 13, height: 13, strokeWidth: 1.7 }}></i></button>
          <button title="Excluir" onClick={onDel} style={iconMini}><i data-lucide="trash-2" style={{ width: 13, height: 13, strokeWidth: 1.7 }}></i></button>
        </span>
      </div>
      {unitTag && <div style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: "0.06em", textTransform: "uppercase", color: window.ANISAN_DATA.accents[unitTag], marginBottom: 8, marginTop: -4 }}>● {unitTag}</div>}

      <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
        {campos.map((f) => (
          <div key={f.k} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--muted-2)", flexShrink: 0 }}>{f.label}</span>
            <MoneyInput value={c[f.k]} onChange={(raw) => onField(f.k, window.parseBRL(raw))} face="mono" size={13} dashed align="right" width={92} accent={accent} />
          </div>
        ))}
      </div>

      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, marginTop: 11, paddingTop: 10, borderTop: "1px solid var(--hairline)" }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: accent }}>Soma</span>
        <span style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 500, color: "var(--paper)" }}>{window.BRL(soma)}</span>
      </div>
    </div>
  );
}

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

function Painel({ unit, setUnit, period }) {
  const store = window.useStore();
  const D = window.ANISAN_DATA;
  const data = store.data;
  const cons = window.isCons(unit);
  const [dia, setDia] = React.useState(window.todayISO());  // filtro do Painel: por DIA (padrão hoje)
  const tot = cons ? window.consTotals(data, dia) : window.unitTotals(data, unit, dia);

  const [contaDlg, setContaDlg] = React.useState(null);   // {nome,saldo,bucket,_u}

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

  const contas = (cons ? window.allContas(data) : (data.contas[unit] || []).map(c => ({ ...c, _u: unit }))).map(c => window.contaComDia(data, c._u, c, dia));
  const comprasAll = cons ? window.allCompras(data) : (data.compras[unit] || []).map(r => ({ ...r, _u: unit }));
  const compras = comprasAll.filter(r => window.ddmmToISO(r.venc) === dia);
  const unpaid = compras.filter(r => !r.paid);
  const paid = compras.filter(r => r.paid);
  const sum = (a) => a.reduce((s, r) => s + (Number(r.value) || 0), 0);

  // meta progress (faturamento da semana atual vs anterior — REAL, do livro de receitas)
  const fatSemana = window.fatSemanaReal(data, unit, 0);
  const fatSemanaAnt = window.fatSemanaReal(data, unit, -1);
  const fatTot = fatSemana.reduce((a, b) => a + b, 0);
  const fatTotAnt = fatSemanaAnt.reduce((a, b) => a + b, 0);
  const fatDelta = fatTotAnt ? ((fatTot - fatTotAnt) / fatTotAnt) * 100 : 0;
  const fatPico = fatSemana.some(v => v > 0) ? fatSemana.indexOf(Math.max(...fatSemana)) : -1;
  const metaUnit = cons ? D.units.reduce((s, u) => s + data.metaMesUnidade[u], 0) : data.metaMesUnidade[unit];
  const pct = Math.round((fatTot / metaUnit) * 100);

  // ---- CRUD: contas (routed to the owning unit) ----
  // patch de saldo (com dia) grava no snapshot do dia; patch de metadados (ativo/nome) na base.
  const setConta = (tu, id, patch, day) => store.set(d => {
    if (day) window.setContaDia(d, tu, id, day, patch);
    else { const c = d.contas[tu].find(x => x.id === id); if (c) Object.assign(c, patch); }
  }, day ? "contaSaldos" : "contas");
  const delConta = (tu, id) => store.set(d => { d.contas[tu] = d.contas[tu].filter(x => x.id !== id); }, "contas");
  const saveConta = () => {
    const f = contaDlg;
    const tu = f._u || (cons ? D.units[0] : unit);
    store.set(d => {
      if (f.id) { const c = d.contas[f._u].find(x => x.id === f.id); Object.assign(c, { nome: f.nome, s1: window.parseBRL(f.s1), s2: window.parseBRL(f.s2), aplicacao: window.parseBRL(f.aplicacao), reserva: window.parseBRL(f.reserva) }); }
      else d.contas[tu].push({ id: window.uid(), nome: f.nome || "Nova conta", s1: window.parseBRL(f.s1), s2: window.parseBRL(f.s2), aplicacao: window.parseBRL(f.aplicacao), reserva: window.parseBRL(f.reserva), ativo: true });
    }, "contas");
    setContaDlg(null);
  };

  // ---- CRUD: lançamentos (usado pela aba Despesas variáveis; aqui só leitura p/ "Contas a vencer") ----

  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 24, padding: mobile ? "18px 14px 40px" : "26px 32px 48px", alignItems: "flex-start" }}>
      <div style={{ flex: "1 1 440px", minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12, marginBottom: 16 }}>
          <span style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--muted-2)" }}>Dia</span>
            <span style={{ display: "flex", alignItems: "center", gap: 8, background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: "var(--radius-pill)", padding: "7px 14px" }}>
              <button onClick={() => setDia(window.addDaysISO(dia, -1))} title="Dia anterior" style={dayNav}><i data-lucide="chevron-left" style={{ width: 15, height: 15, strokeWidth: 1.8 }}></i></button>
              <input type="date" value={dia} onChange={(e) => setDia(e.target.value || window.todayISO())} style={{ background: "transparent", border: "none", outline: "none", color: "var(--paper)", fontFamily: "var(--font-mono)", fontSize: 12.5, colorScheme: "dark", width: 124 }} />
              <button onClick={() => setDia(window.addDaysISO(dia, 1))} title="Próximo dia" style={dayNav}><i data-lucide="chevron-right" style={{ width: 15, height: 15, strokeWidth: 1.8 }}></i></button>
            </span>
            {dia !== window.todayISO() && <button onClick={() => setDia(window.todayISO())} style={{ background: "none", border: "1px solid var(--hairline-strong)", borderRadius: "var(--radius-pill)", padding: "6px 12px", cursor: "pointer", fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--brass)" }}>Hoje</button>}
          </span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)" }}>{window.dateLabel(dia)}</span>
        </div>

        <HeroBalance unit={cons ? "Consolidado (3 unidades)" : "Unidade " + unit} total={tot.total} giro={tot.giro} reserva={tot.reserva} />

        <div style={{ display: "flex", flexWrap: "wrap", gap: 14, marginBottom: 26 }}>
          {D.units.map((n) => (
            <UnitCard key={n} name={n} accent={D.accents[n]} fat={window.unitFatDia(data, n, dia)} delivery={data.unidades[n].delivery} active={unit === n} onClick={() => setUnit(n)} />
          ))}
        </div>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
          <SectionTitle style={{ margin: 0 }} meta={cons ? "todas as unidades" : window.dateLabel(dia)}>Saldos por conta</SectionTitle>
          <Button size="sm" onClick={() => setContaDlg({ nome: "", s1: "", s2: "", aplicacao: "", reserva: "", _u: cons ? D.units[0] : unit })}>+ Nova conta</Button>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(208px, 1fr))", gap: 12, marginBottom: 30 }}>
          {contas.map((c) => (
            <ContaTile key={c._u + c.id} c={c} unitTag={cons ? c._u : null}
              onField={(field, v) => setConta(c._u, c.id, { [field]: v }, dia)}
              onAtivo={() => setConta(c._u, c.id, { ativo: !c.ativo })}
              onDel={() => delConta(c._u, c.id)} />
          ))}
        </div>
      </div>

      <div style={{ flex: "1 1 304px", maxWidth: 304, minWidth: 0 }}>
        <Panel title={cons ? "Meta consolidada" : "Meta do mês"} style={{ marginBottom: 16 }}>
          <Donut pct={pct} label={window.BRLk(fatTot) + " / " + window.BRLk(metaUnit)} sub={"faltam " + window.BRLk(Math.max(0, metaUnit - fatTot)) + " · 12 dias"} />
        </Panel>

        <Panel title="Faturamento" action={<Badge accent={fatDelta >= 0 ? "var(--jade)" : "var(--clay)"} variant="tint">{fatDelta >= 0 ? "▲" : "▼"} {Math.abs(fatDelta).toFixed(0)}%</Badge>} style={{ marginBottom: 16 }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--muted-2)", margin: "-4px 0 14px" }}>semana atual · {window.BRLk(fatTot)} <span style={{ color: "var(--muted)" }}>vs {window.BRLk(fatTotAnt)} anterior</span></div>
          <BarChart data={fatSemana} labels={D.diasSemana} highlight={[fatPico]} height={104} />
        </Panel>

        <Panel title="Contas a vencer" action={<span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--muted-2)" }}>{unpaid.length} no dia</span>}>
          {unpaid.slice().sort((a, b) => b.value - a.value).slice(0, 5).map((x, i) => (
            <div key={x._u + x.id} style={{ display: "flex", alignItems: "center", gap: 11, padding: "10px 0", borderTop: i === 0 ? "none" : "1px solid var(--hairline)" }}>
              <span style={{ width: 7, height: 7, borderRadius: "50%", background: i < 2 ? "var(--clay)" : "var(--sand)", flexShrink: 0 }}></span>
              <span style={{ flex: 1, minWidth: 0 }}>
                <span style={{ display: "block", fontFamily: "var(--font-body)", fontSize: 13, color: "var(--paper)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{x.name}</span>
                <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--muted-2)", marginTop: 1 }}>{cons ? x._u : (window.planoNome(x.plano) || "—")} · vence {window.dateLabel(x.venc)}</span>
              </span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--paper)", whiteSpace: "nowrap" }}>{window.BRL(x.value)}</span>
            </div>
          ))}
          {unpaid.length === 0 && <p style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--muted-2)", margin: "6px 0" }}>Tudo pago. 🎏 nada a vencer.</p>}
        </Panel>
      </div>

      {/* ---- Conta dialog ---- */}
      <Dialog open={!!contaDlg} title={contaDlg && contaDlg.id ? "Editar conta" : "Nova conta"} onClose={() => setContaDlg(null)}
        footer={<><Button onClick={() => setContaDlg(null)}>Cancelar</Button><Button variant="solid" onClick={saveConta}>Salvar</Button></>}>
        {contaDlg && (
          <div style={{ display: "grid", gap: 16 }}>
            {cons && !contaDlg.id && <Select label="Unidade" value={contaDlg._u} onChange={(v) => setContaDlg({ ...contaDlg, _u: v })} options={D.units} />}
            <Input label="Nome da conta" value={contaDlg.nome} onChange={(v) => setContaDlg({ ...contaDlg, nome: v })} icon="landmark" placeholder="Ex.: Unicred" />
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <Input label="Saldo 1" prefix="R$" value={contaDlg.s1} onChange={(v) => setContaDlg({ ...contaDlg, s1: v })} placeholder="0,00" />
              <Input label="Saldo 2" prefix="R$" value={contaDlg.s2} onChange={(v) => setContaDlg({ ...contaDlg, s2: v })} placeholder="0,00" />
              <Input label="Aplicação" prefix="R$" value={contaDlg.aplicacao} onChange={(v) => setContaDlg({ ...contaDlg, aplicacao: v })} placeholder="0,00" />
              <Input label="Reserva" prefix="R$" value={contaDlg.reserva} onChange={(v) => setContaDlg({ ...contaDlg, reserva: v })} placeholder="0,00" />
            </div>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 13px", background: "var(--fill-accent)", border: "1px solid var(--hairline)", borderRadius: "var(--radius-sm)" }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--brass)" }}>Soma</span>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 500, color: "var(--paper)" }}>{window.BRL(window.parseBRL(contaDlg.s1) + window.parseBRL(contaDlg.s2) + window.parseBRL(contaDlg.aplicacao) + window.parseBRL(contaDlg.reserva))}</span>
            </div>
          </div>
        )}
      </Dialog>

    </div>
  );
}

window.Painel = Painel;