import { TrendingUp } from 'lucide-react';
import { Area, AreaChart, ResponsiveContainer, Tooltip } from 'recharts';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';

export interface NorthStarTrendPoint {
  date: string;
  value: number;
}

export interface NorthStarData {
  weekly_active_recommenders: number;
  active_sites: number;
  total_weekly_runs: number;
  baseline: number;
  target: number;
  trend: NorthStarTrendPoint[];
}

interface Props {
  data: NorthStarData;
}

export function NorthStarWidget({ data }: Props) {
  const progress =
    data.target > 0 ? Math.min((data.weekly_active_recommenders / data.target) * 100, 100) : 0;
  const isAboveBaseline = data.weekly_active_recommenders >= data.baseline;

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center gap-2">
          <TrendingUp className="h-4 w-4 text-muted-foreground" />
          <CardTitle className="text-base">North Star: Weekly Active Recommenders</CardTitle>
        </div>
        <CardDescription>
          Users who applied at least one recommendation in the trailing 7 days.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex items-end gap-3">
          <span
            className={`text-4xl font-bold tabular-nums ${isAboveBaseline ? 'text-foreground' : 'text-destructive'}`}
          >
            {Number.isFinite(data.weekly_active_recommenders) ? Math.round(data.weekly_active_recommenders) : '0'}
          </span>
          <span className="mb-1 text-sm text-muted-foreground">active recommenders</span>
        </div>

        {/* Progress bar toward target */}
        <div className="space-y-1">
          <div className="flex justify-between text-xs text-muted-foreground">
            <span>0</span>
            <span>Target: {data.target}</span>
          </div>
          <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
            <div
              className={`h-full rounded-full transition-all ${isAboveBaseline ? 'bg-primary' : 'bg-destructive'}`}
              style={{ width: `${progress}%` }}
            />
          </div>
        </div>

        {/* 12-week sparkline trend */}
        {data.trend.length > 1 && (
          <div className="border-t pt-4">
            <p className="mb-2 text-xs text-muted-foreground">12-week trend</p>
            <div aria-label="12-week north star trend chart" role="img">
              <ResponsiveContainer width="100%" height={56}>
                <AreaChart data={data.trend} margin={{ top: 2, right: 0, bottom: 0, left: 0 }}>
                  <defs>
                    <linearGradient id="nsGrad" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="5%" stopColor="hsl(var(--primary))" stopOpacity={0.3} />
                      <stop offset="95%" stopColor="hsl(var(--primary))" stopOpacity={0} />
                    </linearGradient>
                  </defs>
                  <Tooltip
                    contentStyle={{ fontSize: 11 }}
                    formatter={(v) => [(v != null ? Number(v).toFixed(0) : '0'), 'recommenders']}
                    labelFormatter={(label: unknown) => String(label)}
                  />
                  <Area
                    type="monotone"
                    dataKey="value"
                    stroke="hsl(var(--primary))"
                    strokeWidth={1.5}
                    fill="url(#nsGrad)"
                    dot={false}
                  />
                </AreaChart>
              </ResponsiveContainer>
            </div>
          </div>
        )}

        {/* Supporting stats */}
        <div className="grid grid-cols-3 gap-4 border-t pt-4 text-center text-sm">
          <div>
            <p className="font-semibold tabular-nums">{data.total_weekly_runs}</p>
            <p className="text-muted-foreground">Weekly runs</p>
          </div>
          <div>
            <p className="font-semibold tabular-nums">{data.active_sites}</p>
            <p className="text-muted-foreground">Active sites</p>
          </div>
          <div>
            <p className="font-semibold tabular-nums">{data.baseline}</p>
            <p className="text-muted-foreground">Baseline</p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}