function ScreenReports() {
  const { BRL, BRLk } = window.SCP;
  const [period, setPeriod] = useState('90d');
  const [productId, setProductId] = useState(null);
  const [data, setData] = useState({ quotations: [], orders: [], products: [], receivings: [] });
  const [loading, setLoading] = useState(true);
  const [loadErr, setLoadErr] = useState(null);
  const [priceHistory, setPriceHistory] = useState([]);

  useEffect(() => {
    let mounted = true;
    (async () => {
      try {
        const [d, sups] = await Promise.all([
          window.scpDb.dashboard.load(),
          window.scpDb.suppliers.list(),
        ]);
        if (!mounted) return;
        setData({ ...d, suppliers: sups });
        // Default: produto mais cotado
        const topPid = computeTopProduct(d.orders);
        if (topPid) setProductId(topPid);
      } catch (e) {
        if (mounted) setLoadErr(e.message || 'Falha ao carregar relatórios');
      } finally {
        if (mounted) setLoading(false);
      }
    })();
    return () => { mounted = false; };
  }, []);

  // Carrega histórico de preço quando productId muda
  useEffect(() => {
    if (!productId || !data.orders?.length) { setPriceHistory([]); return; }
    const points = [];
    (data.orders || [])
      .filter(o => o.status !== 'cancelado' && o.emitted_at)
      .forEach(o => {
        (o.items || []).forEach(it => {
          if (it.product_id === productId && it.unit_price) {
            points.push({ d: new Date(o.emitted_at), v: Number(it.unit_price) });
          }
        });
      });
    points.sort((a, b) => a.d - b.d);
    setPriceHistory(points.map((p, i) => ({
      d: p.d.toLocaleDateString('pt-BR', { day: '2-digit', month: 'short' }).replace('.', ''),
      v: p.v,
    })));
  }, [productId, data.orders]);

  const days = period === '30d' ? 30 : period === '90d' ? 90 : period === '12m' ? 365 : 365 * 5;
  const today = new Date();
  const periodStart = new Date(today.getTime() - days * 86400000);
  const inPeriod = (d) => d && new Date(d) >= periodStart;

  // ====== KPIs ======
  const kpis = useMemo(() => {
    const fechadasPeriod = (data.quotations || []).filter(q => q.status === 'fechada' && inPeriod(q.closed_at));
    const allClosed = (data.quotations || []).filter(q => q.status === 'fechada');
    const economiaTotal = allClosed.reduce((s, q) => s + Number(q.saving_value || 0), 0);
    const cotacoesFechadas = fechadasPeriod.length;
    const ordersPeriod = (data.orders || []).filter(o => inPeriod(o.emitted_at) && o.status !== 'cancelado');
    const volume = ordersPeriod.reduce((s, o) => s + Number(o.total || 0), 0);
    const totalInvited = (data.quotations || []).reduce((s, q) => s + (q.invited?.length || 0), 0);
    const totalResponded = (data.quotations || []).reduce((s, q) => s + (q.invited || []).filter(i => i.status === 'respondida').length, 0);
    const taxa = totalInvited ? Math.round(100 * totalResponded / totalInvited) : 0;
    return { economiaTotal, cotacoesFechadas, volume, taxa };
  }, [data, period]);

  // ====== Evolução de preço ======
  const priceStats = useMemo(() => {
    if (!priceHistory.length) return { min: 0, max: 0, current: 0, variation: 0 };
    const vals = priceHistory.map(p => p.v);
    const min = Math.min(...vals);
    const max = Math.max(...vals);
    const current = vals[vals.length - 1];
    const first = vals[0];
    const variation = first ? ((current - first) / first) * 100 : 0;
    return { min, max, current, variation };
  }, [priceHistory]);

  // ====== Savings (últimos 6 meses) ======
  const savingsData = useMemo(() => {
    const byMonth = new Map();
    for (let i = 5; i >= 0; i--) {
      const d = new Date(today.getFullYear(), today.getMonth() - i, 1);
      const key = d.toISOString().slice(0, 7);
      const label = d.toLocaleDateString('pt-BR', { month: 'short', year: '2-digit' }).replace('.', '').replace(' de ', '/');
      byMonth.set(key, { m: label, value: 0, quotes: 0 });
    }
    (data.quotations || [])
      .filter(q => q.status === 'fechada' && q.closed_at && q.saving_value)
      .forEach(q => {
        const key = new Date(q.closed_at).toISOString().slice(0, 7);
        if (byMonth.has(key)) {
          const row = byMonth.get(key);
          row.value += Number(q.saving_value);
          row.quotes += 1;
        }
      });
    return Array.from(byMonth.values());
  }, [data]);

  // ====== Performance dos fornecedores ======
  const supplierPerf = useMemo(() => {
    const map = {};
    (data.orders || []).forEach(o => {
      if (o.status === 'cancelado') return;
      const sid = o.supplier?.id;
      const name = o.supplier?.name;
      if (!sid || !name) return;
      if (!map[sid]) map[sid] = { sid, name, wins: 0 };
      map[sid].wins += 1;
    });
    const arr = Object.values(map).sort((a, b) => b.wins - a.wins).slice(0, 10);
    const max = arr[0]?.wins || 1;
    return arr.map(s => ({ ...s, share: Math.round(100 * s.wins / max) }));
  }, [data]);

  // ====== Lista de produtos (para o select de evolução de preços) ======
  const productOptions = useMemo(() => {
    const used = new Map();
    (data.orders || []).forEach(o => {
      (o.items || []).forEach(it => {
        if (!it.product_id) return;
        used.set(it.product_id, (used.get(it.product_id) || 0) + 1);
      });
    });
    return (data.products || [])
      .filter(p => used.has(p.id))
      .map(p => ({ id: p.id, name: p.name, count: used.get(p.id) || 0 }))
      .sort((a, b) => b.count - a.count)
      .slice(0, 20);
  }, [data]);

  const dateRangeLabel = `${periodStart.toLocaleDateString('pt-BR')} até ${today.toLocaleDateString('pt-BR')}`;

  if (loading) {
    return <div className="scp-screen scp-fade-in" style={{ padding: 80, textAlign: 'center', color: 'var(--fg-3)' }}>
      Carregando relatórios…
    </div>;
  }

  return (
    <div className="scp-screen scp-fade-in">
      {loadErr && (
        <Card style={{ padding: 14, borderColor: 'oklch(0.42 0.10 25 / .55)', background: 'oklch(0.26 0.08 25 / .25)' }}>
          <strong style={{ color: 'oklch(0.88 0.14 25)' }}>Falha ao carregar relatórios:</strong>{' '}
          <span style={{ color: 'var(--fg-2)', fontSize: 13 }}>{loadErr}</span>
        </Card>
      )}

      <Card style={{ padding: '18px 22px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
          <div className="scp-tabs">
            {[['30d','30 dias'],['90d','90 dias'],['12m','12 meses'],['ano','Este ano']].map(([k, l]) => (
              <button key={k} className={cls(period === k && 'active')} onClick={() => setPeriod(k)}>{l}</button>
            ))}
          </div>
          <span style={{ color: 'var(--fg-3)', fontSize: 12 }}>· {dateRangeLabel}</span>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Btn kind="ghost" icon={<Icon.Download size={16}/>} onClick={() => window.scpToast('Gerando PDF', { kind: 'sky', sub: 'Relatório consolidado · ~12s' })}>Exportar PDF</Btn>
          <Btn kind="secondary" icon={<Icon.Download size={16}/>} onClick={() => window.scpToast('Gerando planilha', { kind: 'sky', sub: 'Excel com 4 abas · ~6s' })}>Exportar Excel</Btn>
          <Btn kind="primary" icon={<Icon.Mail size={16}/>} onClick={() => window.scpToast('Envio programado', { kind: 'emerald', sub: 'Toda segunda às 09h' })}>Agendar envio</Btn>
        </div>
      </Card>

      <div className="scp-dash-grid">
        <Stat
          label="Economia total"
          value={BRL(kpis.economiaTotal)}
          sub="Soma de todas as cotações fechadas"
          icon={<Icon.Trend size={16}/>}
        />
        <Stat
          label="Cotações fechadas"
          value={String(kpis.cotacoesFechadas)}
          sub={`Período: ${period === '30d' ? '30 dias' : period === '90d' ? '90 dias' : period === '12m' ? '12 meses' : 'este ano'}`}
          icon={<Icon.Check size={16}/>}
        />
        <Stat
          label="Volume comprado"
          value={BRL(kpis.volume)}
          sub={`${(data.orders || []).filter(o => inPeriod(o.emitted_at) && o.status !== 'cancelado').length} pedidos · ${(data.suppliers?.length || 0)} fornecedores`}
          icon={<Icon.Cart size={16}/>}
        />
        <Stat
          label="Taxa fornecedor"
          value={`${kpis.taxa}%`}
          sub="Respostas dentro do prazo"
          icon={<Icon.Reply size={16}/>}
        />
      </div>

      <Card style={{ padding: 22 }}>
        <SectionHead title="Evolução de preços por produto" sub="Linha temporal do preço unitário em pedidos" right={
          <select className="scp-select" value={productId || ''} onChange={e => setProductId(e.target.value)}>
            <option value="">— selecione —</option>
            {productOptions.map(p => (
              <option key={p.id} value={p.id}>{p.name}</option>
            ))}
          </select>
        }/>
        {priceHistory.length >= 2 ? (
          <>
            <LineChart data={priceHistory} height={220} />
            <div style={{ display: 'flex', gap: 24, marginTop: 12, padding: '12px 16px', background: 'var(--surface-2)', borderRadius: 10, fontSize: 12.5 }}>
              <div><span style={{ color: 'var(--fg-3)' }}>Mínimo: </span><strong className="num">{BRL(priceStats.min)}</strong></div>
              <div><span style={{ color: 'var(--fg-3)' }}>Máximo: </span><strong className="num">{BRL(priceStats.max)}</strong></div>
              <div><span style={{ color: 'var(--fg-3)' }}>Atual: </span><strong className="num" style={{ color: 'oklch(0.92 0.14 160)' }}>{BRL(priceStats.current)}</strong></div>
              <div>
                <span style={{ color: 'var(--fg-3)' }}>Variação: </span>
                <strong className="num" style={{ color: priceStats.variation <= 0 ? 'oklch(0.92 0.14 160)' : 'oklch(0.88 0.14 25)' }}>
                  {priceStats.variation <= 0 ? '↓' : '↑'} {Math.abs(priceStats.variation).toFixed(1)}%
                </strong>
              </div>
            </div>
          </>
        ) : (
          <div className="scp-detail-empty" style={{ padding: 30 }}>
            {productId ? 'Este produto só foi comprado em 1 pedido (ou nenhum). Selecione outro produto.' : 'Selecione um produto para ver a evolução do preço.'}
          </div>
        )}
      </Card>

      <div className="scp-row scp-row-2-1">
        <Card style={{ padding: 22 }}>
          <SectionHead title="Economia mensal por cotação" sub="R$ economizados a cada fechamento"/>
          <SavingsChart data={savingsData} height={240}/>
        </Card>

        <Card style={{ padding: 22 }}>
          <SectionHead title="Performance dos fornecedores" sub={`Pedidos confirmados ou entregues · top ${supplierPerf.length}`}/>
          <div className="scp-rank">
            {supplierPerf.length === 0 && (
              <div className="scp-detail-empty">Sem dados de pedidos no período.</div>
            )}
            {supplierPerf.map((s, i) => (
              <div key={s.sid} className="scp-rank-row">
                <span className={cls('rk', i === 0 && 'gold', i === 1 && 'silver', i === 2 && 'bronze')}>{i+1}</span>
                <div className="info">
                  <span className="n">{s.name}</span>
                  <div className="bar"><span style={{ width: s.share + '%' }}/></div>
                </div>
                <span className="v num">{s.wins}</span>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <Card style={{ padding: 22 }}>
        <SectionHead title="Relatórios disponíveis" sub="Gerados sob demanda em PDF profissional ou Excel" right={<Icon.Doc size={18}/>}/>
        <div className="scp-reports-grid">
          {[
            { t: 'Cotações realizadas',        s: 'Fornecedores participantes e vencedores', i: <Icon.Quote size={18}/> },
            { t: 'Evolução de preços',         s: 'Gráficos de linha por produto',           i: <Icon.Trend size={18}/> },
            { t: 'Performance de fornecedores',s: 'Taxa de resposta, vitórias, prazo médio', i: <Icon.Crown size={18}/> },
            { t: 'Economia gerada',            s: 'Comparativo com preços históricos',       i: <Icon.Lightning size={18}/> },
            { t: 'Pedidos de compra',          s: 'Emitidos, confirmados e atrasados',       i: <Icon.Order size={18}/> },
            { t: 'Movimentação de estoque',    s: 'Entradas, saídas e curva ABC',            i: <Icon.Stock size={18}/> },
            { t: 'NFe e fiscal',               s: 'Conferência e divergências de XML',       i: <Icon.Doc size={18}/> },
            { t: 'Curva ABC de produtos',      s: 'Importância no faturamento',              i: <Icon.Star size={18}/> },
          ].map(r => (
            <button
              key={r.t}
              className="scp-report-card"
              onClick={() => window.scpToast(`Relatório "${r.t}" pronto`, { kind: 'emerald', sub: 'Baixe em PDF ou Excel pelos botões do topo' })}
            >
              <span className="ico">{r.i}</span>
              <div>
                <span className="t">{r.t}</span>
                <span className="s">{r.s}</span>
              </div>
              <span className="arr"><Icon.Arrow size={16}/></span>
            </button>
          ))}
        </div>
      </Card>
    </div>
  );
}

function computeTopProduct(orders) {
  const count = new Map();
  (orders || []).forEach(o => {
    (o.items || []).forEach(it => {
      if (!it.product_id) return;
      count.set(it.product_id, (count.get(it.product_id) || 0) + 1);
    });
  });
  let top = null, max = 0;
  for (const [pid, c] of count) {
    if (c > max) { max = c; top = pid; }
  }
  return top;
}

(function() {
  if (document.getElementById('scp-reports-css')) return;
  const s = document.createElement('style'); s.id = 'scp-reports-css';
  s.textContent = `
    .scp-reports-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
    .scp-report-card {
      display: grid; grid-template-columns: 36px 1fr 18px; gap: 12px; align-items: center;
      padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border-soft);
      text-align: left; transition: background .12s, border-color .12s, transform .08s; cursor: pointer;
    }
    .scp-report-card:hover { background: var(--surface-3); border-color: var(--border); }
    .scp-report-card:active { transform: translateY(1px); }
    .scp-report-card .ico { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: oklch(0.30 0.06 160 / .5); color: oklch(0.92 0.14 160); }
    .scp-report-card .t { display: block; font-size: 13px; font-weight: 600; color: var(--fg); }
    .scp-report-card .s { display: block; font-size: 11.5px; color: var(--fg-3); margin-top: 2px; line-height: 1.3; }
    .scp-report-card .arr { color: var(--fg-3); }
    .scp-report-card:hover .arr { color: var(--fg); transform: translateX(2px); transition: transform .12s; }

    @media (max-width: 1200px) { .scp-reports-grid { grid-template-columns: repeat(2, 1fr); } }
  `;
  document.head.appendChild(s);
})();

window.ScreenReports = ScreenReports;