// reports.jsx
function ReportsPage() {
  const [leads, setLeads] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    window.api.getLeads({ limit: 500 })
      .then(({ leads }) => setLeads(leads))
      .catch(console.error)
      .finally(() => setLoading(false));
  }, []);

  const byStatus = React.useMemo(() => {
    return window.STATUS_ORDER.map(s => ({
      key: s,
      label: window.STATUS_META[s].label,
      count: leads.filter(l => l.status === s).length,
      color: window.STATUS_META[s].dot,
    }));
  }, [leads]);

  const byCountry = React.useMemo(() => {
    const map = {};
    leads.forEach(l => { const k = l.countryName || l.country || '未知'; map[k] = (map[k] || 0) + 1; });
    return Object.entries(map).sort((a,b) => b[1]-a[1]);
  }, [leads]);

  const byProduct = React.useMemo(() => {
    const map = {};
    leads.forEach(l => { const k = l.product || '未知'; map[k] = (map[k] || 0) + 1; });
    return Object.entries(map).sort((a,b) => b[1]-a[1]);
  }, [leads]);

  const total = leads.length;
  const won = leads.filter(l => l.status === 'won').length;
  const convRate = total ? Math.round(won / total * 100) : 0;
  const following = leads.filter(l => ['contacted','qualified','following','proposal'].includes(l.status)).length;

  const maxStatus = Math.max(...byStatus.map(s => s.count), 1);
  const maxCountry = Math.max(...byCountry.map(([,c]) => c), 1);
  const maxProduct = Math.max(...byProduct.map(([,c]) => c), 1);

  return (
    <main className="main">
      <header className="main-header">
        <div className="crumbs">
          <span className="crumb-soft">销售</span>
          <span className="crumb-sep">/</span>
          <span className="crumb-cur">报表分析</span>
        </div>
      </header>

      <div className="page-body">
        <div className="page-title-row">
          <div>
            <h1 className="page-title">销售漏斗</h1>
            <div className="page-sub">基于全部线索数据的实时汇总</div>
          </div>
        </div>

        {loading ? <div className="empty">加载中…</div> : (
          <>
            <div className="stat-row">
              <StatCard label="线索总数" value={total} sub="全部" accent="violet" />
              <StatCard label="跟进中" value={following} sub="联系至报价" accent="amber" />
              <StatCard label="已成交" value={won} sub="成交客户" accent="green" />
              <StatCard label="成交率" value={`${convRate}%`} sub="成交 / 总线索" accent="blue" />
            </div>

            <div className="report-grid">
              <div className="report-card">
                <div className="report-card-title">线索状态分布</div>
                {byStatus.map(s => (
                  <div key={s.key} className="report-bar-row">
                    <span className="report-bar-label">{s.label}</span>
                    <div className="report-bar-track">
                      <div className="report-bar-fill" style={{ width: `${s.count / maxStatus * 100}%`, background: s.color }} />
                    </div>
                    <span className="report-bar-val">{s.count}</span>
                  </div>
                ))}
              </div>

              <div className="report-card">
                <div className="report-card-title">国家 / 地区分布</div>
                {byCountry.length === 0 ? <div className="report-empty">暂无数据</div> : byCountry.map(([name, count]) => (
                  <div key={name} className="report-bar-row">
                    <span className="report-bar-label">{name}</span>
                    <div className="report-bar-track">
                      <div className="report-bar-fill" style={{ width: `${count / maxCountry * 100}%`, background: '#7C5CFF' }} />
                    </div>
                    <span className="report-bar-val">{count}</span>
                  </div>
                ))}
              </div>

              <div className="report-card">
                <div className="report-card-title">产品意向分布</div>
                {byProduct.length === 0 ? <div className="report-empty">暂无数据</div> : byProduct.map(([name, count]) => (
                  <div key={name} className="report-bar-row">
                    <span className="report-bar-label">{name}</span>
                    <div className="report-bar-track">
                      <div className="report-bar-fill" style={{ width: `${count / maxProduct * 100}%`, background: '#10B981' }} />
                    </div>
                    <span className="report-bar-val">{count}</span>
                  </div>
                ))}
              </div>
            </div>
          </>
        )}
      </div>
    </main>
  );
}

window.ReportsPage = ReportsPage;