// screen-dashboard.jsx — workspace overview
function Dashboard({ leads, role, go, setOpenId }) {
  const counts = leads.reduce((a, l) => { a[l.status] = (a[l.status]||0)+1; return a; }, {});
  const newCount = counts.new || 0;
  const approved = (counts.approved||0)+(counts.synced||0)+(counts.exported||0);
  const reviewable = leads.filter(l => l.status === "new" || l.status === "reviewed");
  const top = [...leads].sort((a,b)=>b.score-a.score).slice(0,5);
  const avgScore = Math.round(leads.reduce((s,l)=>s+l.score,0)/leads.length);
  const approvalRate = Math.round(approved / leads.length * 100);

  const roleLine = {
    sdr: "Here's your review queue. Newest, highest-fit leads first.",
    leader: "Pipeline health across the workspace this week.",
    admin: "Workspace activity, agent runs, and usage at a glance.",
  }[role];

  return (
    <div className="page">
      <div className="page-head">
        <h2>Good morning, {role === "leader" ? "Dana" : role === "admin" ? "Alex" : "Sam"}</h2>
        <p>{roleLine}</p>
      </div>

      <div className="stats mb-16">
        <Stat label="New leads to review" value={newCount} delta="+6 today" deltaDir="up" icon="leads" />
        <Stat label="Approved this week" value={approved} delta="+18%" deltaDir="up" icon="check" sub="vs last wk" />
        <Stat label="Avg fit score" value={avgScore} delta="+3 pts" deltaDir="up" icon="target" />
        <Stat label="Approval rate" value={approvalRate + "%"} delta="steady" deltaDir="flat" icon="report" />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 340px", gap: 16, alignItems: "start" }}>
        {/* Review queue */}
        <div className="card">
          <div className="card-head">
            <Icon name="leads" size={16} color="var(--gray-500)" />
            <h3>Top of your review queue</h3>
            <span className="sub">{reviewable.length} awaiting review</span>
            <div className="spacer" />
            <button className="btn btn-sm" onClick={() => go("leads")}>View all<Icon name="chevRight" size={14} /></button>
          </div>
          <div className="table-wrap">
            <table className="tbl">
              <thead><tr><th>Company</th><th>Score</th><th>Signals</th><th>Source</th><th>Status</th></tr></thead>
              <tbody>
                {top.map(l => (
                  <tr key={l.id} onClick={() => { go("leads"); setOpenId(l.id); }}>
                    <td><div className="cell-co"><CompanyLogo name={l.company} size={28} /><div><div className="co-name">{l.company}</div><div className="co-url">{l.location}</div></div></div></td>
                    <td><ScoreMeter value={l.score} showBar={false} /></td>
                    <td><span className="muted" style={{ fontSize: 12.5 }}>{l.signals[0]}{l.signals.length > 1 && <span className="badge b-gray" style={{ marginLeft: 6 }}>+{l.signals.length-1}</span>}</span></td>
                    <td><SourceTag source={l.source} /></td>
                    <td><StatusBadge status={l.status} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Side column */}
        <div className="col gap-16">
          <div className="card">
            <div className="card-head"><Icon name="sparkle" size={15} color="var(--accent)" /><h3>Latest agent run</h3></div>
            <div className="card-pad">
              <div className="row" style={{ justifyContent: "space-between", marginBottom: 12 }}>
                <span className="mono muted">{RUNS[0].id}</span>
                <span className="badge b-approved"><span className="dot" style={{ background: "var(--green)" }} />Completed</span>
              </div>
              <div className="grid-2 gap-12">
                <div><div className="stat-val" style={{ fontSize: 22 }}>{RUNS[0].found}</div><div className="stat-label">leads found</div></div>
                <div><div className="stat-val" style={{ fontSize: 22 }}>{RUNS[0].qualified}</div><div className="stat-label">qualified</div></div>
              </div>
              <div className="kv mt-16"><span className="k">Duration</span><span className="v">{RUNS[0].duration}</span></div>
              <div className="kv"><span className="k">Sources used</span><span className="v">{RUNS[0].sources.length}</span></div>
              <div className="kv"><span className="k">Est. cost</span><span className="v">${RUNS[0].cost.toFixed(2)}</span></div>
              <button className="btn btn-sm" style={{ width: "100%", marginTop: 12 }} onClick={() => go("usage")}>View run history</button>
            </div>
          </div>

          <div className="card">
            <div className="card-head"><Icon name="report" size={15} color="var(--gray-500)" /><h3>This week</h3></div>
            <div className="card-pad">
              <div className="bar-row" style={{ gridTemplateColumns: "1fr auto" }}><span className="muted">Leads discovered</span><span className="bar-val">97</span></div>
              <div className="bar-row" style={{ gridTemplateColumns: "1fr auto" }}><span className="muted">Approved</span><span className="bar-val">61</span></div>
              <div className="bar-row" style={{ gridTemplateColumns: "1fr auto" }}><span className="muted">Synced to HubSpot</span><span className="bar-val">44</span></div>
              <div className="bar-row" style={{ gridTemplateColumns: "1fr auto" }}><span className="muted">Avg cost / approved lead</span><span className="bar-val">$2.18</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
window.Dashboard = Dashboard;