/* ===========================================================
   Forja 3D — Visão Geral
   =========================================================== */
function monthlySeries(items, dateKey, valFn) {
  const now = new Date();
  const out = [];
  for (let i = 5; i >= 0; i--) {
    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
    const y = d.getFullYear(), m = d.getMonth() + 1;
    let sum = 0;
    items.forEach((it) => {
      const [iy, im] = (it[dateKey] || '').split('-').map(Number);
      if (iy === y && im === m) sum += valFn(it);
    });
    out.push(sum);
  }
  return out;
}

function Overview({ go }) {
  const s = useStore();
  const now = new Date();

  const salesMonth = s.sales.filter((x) => isThisMonth(x.date, now));
  const expMonth = s.expenses.filter((x) => isThisMonth(x.date, now));

  const faturamento = salesMonth.reduce((a, x) => a + x.price * x.qty, 0);
  const lucro = salesMonth.reduce((a, x) => a + (x.price - x.cost) * x.qty, 0);
  const gastos = expMonth.reduce((a, x) => a + x.amount, 0);
  const faltaPagar = s.debts.reduce((a, d) => a + (d.total - d.paid), 0);
  const totalDebt = s.debts.reduce((a, d) => a + d.total, 0);
  const paidDebt = s.debts.reduce((a, d) => a + d.paid, 0);

  const sparkFat = monthlySeries(s.sales, 'date', (x) => x.price * x.qty);
  const sparkLucro = monthlySeries(s.sales, 'date', (x) => (x.price - x.cost) * x.qty);
  const sparkGasto = monthlySeries(s.expenses, 'date', (x) => x.amount);

  // estoque
  const estoqueG = s.filaments.reduce((a, f) => a + f.remaining, 0);
  const baixoEstoque = s.filaments.filter((f) => f.remaining < 200);
  // impressões
  const okPrints = s.prints.filter((p) => p.status === 'sucesso').length;
  const taxaSucesso = s.prints.length ? (okPrints / s.prints.length) * 100 : 0;
  const ticket = salesMonth.length ? faturamento / salesMonth.reduce((a, x) => a + x.qty, 0) : 0;

  // movimentações merged
  const mov = [
    ...s.sales.map((x) => ({ ...x, _t: 'in', _label: x.product, _sub: `${fmt.date(x.date)} · ${x.channel}`, _v: x.price * x.qty })),
    ...s.expenses.map((x) => ({ ...x, _t: 'out', _label: x.description, _sub: `${fmt.date(x.date)} · ${x.category}`, _v: x.amount })),
  ].sort((a, b) => (b.date > a.date ? 1 : -1)).slice(0, 6);

  return (
    <div className="page">
      <PageHead title="Visão Geral" sub={`Resumo de ${now.toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' })} · seu caixa, dívidas e movimentações.`}
        action={<Button variant="primary" icon="plus" onClick={() => go('vendas')}>Registrar venda</Button>} />

      <div className="kpis">
        <Kpi label="Lucro do mês" dot="g" value={fmt.brl0(lucro)} spark={sparkLucro} sparkColor="var(--green)" />
        <Kpi label="Gastos do mês" dot="r" value={fmt.brl0(gastos)} spark={sparkGasto} sparkColor="var(--red)" />
        <Kpi label="Faturamento" dot="" value={fmt.brl0(faturamento)} spark={sparkFat} sparkColor="var(--orange)" />
        <Kpi label="Falta pagar" dot="b" value={fmt.brl0(faltaPagar)} sub={`${fmt.pct((paidDebt / (totalDebt || 1)) * 100)} quitado no total`} />
      </div>

      <div className="grid-2c" style={{ marginTop: 14 }}>
        {/* Dívidas */}
        <div className="panel">
          <div className="panel-h">
            <div className="panel-t"><span className="mark" />Quitação de dívidas</div>
            <button className="btn btn-sm btn-ghost" onClick={() => go('dividas')}>Gerenciar <Icon name="chevron" size={14} /></button>
          </div>
          <div className="panel-pad">
            {s.debts.length === 0 && <div className="muted" style={{ fontSize: 14 }}>Nenhuma dívida cadastrada. 🎉</div>}
            {s.debts.map((d) => {
              const pct = (d.paid / d.total) * 100;
              return (
                <div key={d.id} style={{ marginBottom: 18 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
                    <div>
                      <div style={{ fontWeight: 600, fontSize: 15 }}>{d.name}</div>
                      <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginTop: 2 }}>
                        {fmt.brl0(d.paid)} de {fmt.brl0(d.total)} · faltam {fmt.brl0(d.total - d.paid)}
                      </div>
                    </div>
                    <div className="mono" style={{ fontWeight: 700, fontSize: 15, color: pct >= 100 ? 'var(--green)' : 'var(--orange)' }}>{fmt.pct(pct)}</div>
                  </div>
                  <Bar value={d.paid} max={d.total} />
                </div>
              );
            })}
          </div>
        </div>

        {/* Movimentações */}
        <div className="panel">
          <div className="panel-h">
            <div className="panel-t"><span className="mark" />Movimentações</div>
            <button className="btn btn-sm btn-ghost" onClick={() => go('vendas')}>Ver tudo <Icon name="chevron" size={14} /></button>
          </div>
          <div className="panel-pad" style={{ paddingTop: 6, paddingBottom: 6 }}>
            <div className="row-list">
              {mov.map((m, i) => (
                <div className="lrow" key={i}>
                  <div className={'tag-ico ' + m._t}>{m._t === 'in' ? '+' : '−'}</div>
                  <div className="lrow-main">
                    <div className="lrow-t">{m._label}</div>
                    <div className="lrow-s">{m._sub}</div>
                  </div>
                  <div className={'lrow-v ' + m._t}>{m._t === 'in' ? '+' : '−'}{fmt.brl0(m._v)}</div>
                </div>
              ))}
              {mov.length === 0 && <div className="muted" style={{ fontSize: 14, padding: '14px 0' }}>Sem movimentações ainda.</div>}
            </div>
          </div>
        </div>
      </div>

      {/* insights */}
      <div className="grid-3c" style={{ marginTop: 14 }}>
        <div className="panel panel-pad">
          <div className="kpi-label" style={{ marginBottom: 12 }}><span className="kpi-dot" />Estoque de filamento</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
            <div style={{ fontWeight: 800, fontSize: 26 }}>{(estoqueG / 1000).toFixed(2).replace('.', ',')}<small style={{ fontSize: 14, color: 'var(--muted)', fontWeight: 600 }}> kg</small></div>
          </div>
          <div className="mono" style={{ fontSize: 11.5, color: baixoEstoque.length ? 'var(--red)' : 'var(--muted)', marginTop: 8 }}>
            {baixoEstoque.length ? `⚠ ${baixoEstoque.length} filamento(s) com estoque baixo` : 'Estoque saudável'}
          </div>
          <button className="btn btn-sm btn-ghost" style={{ marginTop: 14 }} onClick={() => go('filamentos')}>Ver filamentos</button>
        </div>

        <div className="panel panel-pad">
          <div className="kpi-label" style={{ marginBottom: 12 }}><span className="kpi-dot g" />Taxa de sucesso</div>
          <div style={{ fontWeight: 800, fontSize: 26 }}>{fmt.pct(taxaSucesso)}</div>
          <div className="mono" style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 8 }}>{okPrints}/{s.prints.length} impressões OK</div>
          <button className="btn btn-sm btn-ghost" style={{ marginTop: 14 }} onClick={() => go('historico')}>Ver histórico</button>
        </div>

        <div className="panel panel-pad">
          <div className="kpi-label" style={{ marginBottom: 12 }}><span className="kpi-dot" />Ticket médio</div>
          <div style={{ fontWeight: 800, fontSize: 26 }}>{fmt.brl0(ticket)}</div>
          <div className="mono" style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 8 }}>{salesMonth.length} venda(s) no mês</div>
          <button className="btn btn-sm btn-ghost" style={{ marginTop: 14 }} onClick={() => go('calculadora')}>Abrir calculadora</button>
        </div>
      </div>
    </div>
  );
}
window.Overview = Overview;