PocketVeto/frontend/components/bills/TrendChart.tsx

"use client";

import { TrendingUp, Newspaper, Radio } from "lucide-react";
import {
  ComposedChart,
  Line,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
  CartesianGrid,
  Legend,
} from "recharts";
import { TrendScore, MemberTrendScore } from "@/lib/types";

type AnyTrendScore = TrendScore | MemberTrendScore;

interface TrendChartProps {
  data?: AnyTrendScore[];
  title?: string;
}

function ScoreBadge({ label, value, icon }: { label: string; value: number | string; icon: React.ReactNode }) {
  return (
    <div className="flex flex-col items-center gap-0.5">
      <div className="text-muted-foreground">{icon}</div>
      <span className="text-xs font-semibold tabular-nums">{value}</span>
      <span className="text-[10px] text-muted-foreground">{label}</span>
    </div>
  );
}

export function TrendChart({ data, title = "Public Interest" }: TrendChartProps) {
  const chartData = data?.map((d) => ({
    date: new Date(d.score_date + "T00:00:00").toLocaleDateString("en-US", { month: "short", day: "numeric" }),
    score: Math.round(d.composite_score),
    newsapi: d.newsapi_count,
    gnews: d.gnews_count,
    gtrends: Math.round(d.gtrends_score),
  })) ?? [];

  const latest = data?.[data.length - 1];

  return (
    <div className="bg-card border border-border rounded-lg p-4 space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="font-semibold text-sm flex items-center gap-2">
          <TrendingUp className="w-4 h-4" />
          {title}
        </h3>
        {latest !== undefined && (
          <span className="text-2xl font-bold tabular-nums">{Math.round(latest.composite_score)}</span>
        )}
      </div>

      {/* Signal breakdown badges */}
      {latest && (
        <div className="flex justify-around border border-border rounded-md p-2 bg-muted/30">
          <ScoreBadge
            label="NewsAPI"
            value={latest.newsapi_count}
            icon={<Newspaper className="w-3 h-3" />}
          />
          <div className="w-px bg-border" />
          <ScoreBadge
            label="Google News"
            value={latest.gnews_count}
            icon={<Radio className="w-3 h-3" />}
          />
          <div className="w-px bg-border" />
          <ScoreBadge
            label="Trends"
            value={`${Math.round(latest.gtrends_score)}/100`}
            icon={<TrendingUp className="w-3 h-3" />}
          />
        </div>
      )}

      {chartData.length === 0 ? (
        <p className="text-xs text-muted-foreground italic text-center py-8">
          Interest data not yet available. Check back after the nightly scoring run.
        </p>
      ) : (
        <ResponsiveContainer width="100%" height={180}>
          <ComposedChart data={chartData} margin={{ top: 4, right: 4, left: -20, bottom: 0 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
            <XAxis
              dataKey="date"
              tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
              tickLine={false}
            />
            <YAxis
              domain={[0, 100]}
              tick={{ fontSize: 10, fill: "hsl(var(--muted-foreground))" }}
              tickLine={false}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: "hsl(var(--card))",
                border: "1px solid hsl(var(--border))",
                borderRadius: "6px",
                fontSize: "12px",
              }}
              formatter={(value: number, name: string) => {
                const labels: Record<string, string> = {
                  score: "Composite",
                  newsapi: "NewsAPI articles",
                  gnews: "Google News articles",
                  gtrends: "Google Trends",
                };
                return [value, labels[name] ?? name];
              }}
            />
            <Bar dataKey="gnews" fill="hsl(var(--muted-foreground))" opacity={0.3} name="gnews" radius={[2, 2, 0, 0]} />
            <Bar dataKey="newsapi" fill="hsl(var(--primary))" opacity={0.3} name="newsapi" radius={[2, 2, 0, 0]} />
            <Line
              type="monotone"
              dataKey="score"
              stroke="hsl(var(--primary))"
              strokeWidth={2}
              dot={false}
              name="score"
            />
          </ComposedChart>
        </ResponsiveContainer>
      )}

      <p className="text-[10px] text-muted-foreground">
        Composite 0–100 · NewsAPI articles (max 40 pts) + Google News volume (max 30 pts) + Google Trends score (max 30 pts)
      </p>
    </div>
  );
}