import { useMemo } from "react";
import { InsightCard } from "./InsightCard";
import { FindingsChart } from "./FindingsChart";
import { ResearchFilters } from "./ResearchFilters";
type Finding = {
  id: string;
  label: string;
  confidence: number;
  trend: number[];
  category: "product" | "market" | "ops";
};
export function ResearchDashboard({
  findings,
}: {
  findings: Finding[];
}) {
  const summary = useMemo(() => {
    return findings.reduce(
      (acc, finding) => {
        acc.total += 1;
        acc.avgConfidence += finding.confidence;
        if (finding.category === "product") acc.product += 1;
        return acc;
      },
      { total: 0, avgConfidence: 0, product: 0 },
    );
  }, [findings]);
  const avgConfidence =
    summary.total > 0 ? Math.round(summary.avgConfidence / summary.total) : 0;
  return (
<section className="grid gap-6">
<header className="flex items-end justify-between">
<div>
<h1 className="text-2xl font-semibold">Research Dashboard</h1>
<p className="text-sm text-slate-500">
            Explore findings, confidence, and rollout readiness.
</p>
</div>
<ResearchFilters />
</header>
<div className="grid grid-cols-3 gap-4">
<InsightCard label="Findings" value={summary.total} />
<InsightCard label="Avg confidence" value={`${avgConfidence}%`} />
<InsightCard label="Product signals" value={summary.product} />
</div>
<div className="rounded-2xl border border-slate-200 p-5">
<FindingsChart
          series={findings.map((finding) => ({
            id: finding.id,
            label: finding.label,
            points: finding.trend,
          }))}
        />
</div>
</section>
  );
}