"use client";
// @ts-nocheck — recharts v3 types (matches the repo's own ui/chart.tsx approach).

import {
  ResponsiveContainer,
  RadialBarChart,
  RadialBar,
  PolarAngleAxis,
  PieChart,
  Pie,
  Cell,
  AreaChart,
  Area,
  LineChart,
  Line,
  XAxis,
  YAxis,
  Tooltip,
  CartesianGrid,
} from "recharts";
import { cn } from "@/shared/lib/utils";
import type { HealthTier } from "@/domain/entities/health";
import { TIER_VAR, tierFromScore } from "./tier";

/** Semicircular 0–100 gauge, tier-coloured. */
export function HealthGauge({
  score,
  healthyCut = 75,
  atRiskCut = 50,
  size = 160,
  label,
}: {
  score: number;
  healthyCut?: number;
  atRiskCut?: number;
  size?: number;
  label?: string;
}) {
  const tier = tierFromScore(score, healthyCut, atRiskCut);
  const color = TIER_VAR[tier];
  return (
    <div className="relative" style={{ width: size, height: size * 0.72 }}>
      <ResponsiveContainer width="100%" height="100%">
        <RadialBarChart
          innerRadius="72%"
          outerRadius="100%"
          data={[{ value: Math.max(0, Math.min(100, score)) }]}
          startAngle={210}
          endAngle={-30}
        >
          <PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
          <RadialBar dataKey="value" cornerRadius={10} fill={color} background={{ fill: "var(--muted)" }} />
        </RadialBarChart>
      </ResponsiveContainer>
      <div className="absolute inset-0 flex flex-col items-center justify-center pt-3">
        <span className="text-3xl font-bold font-mono leading-none" style={{ color }}>
          {score}
        </span>
        {label && <span className="text-[10px] uppercase tracking-wider text-muted-foreground mt-1">{label}</span>}
      </div>
    </div>
  );
}

/** Donut of the tier distribution with the total in the centre. */
export function DistributionDonut({
  data,
  total,
  size = 180,
}: {
  data: { tier: HealthTier; label: string; count: number }[];
  total: number;
  size?: number;
}) {
  return (
    <div className="relative mx-auto" style={{ width: size, height: size }}>
      <ResponsiveContainer width="100%" height="100%">
        <PieChart>
          <Pie
            data={data}
            dataKey="count"
            nameKey="label"
            innerRadius="62%"
            outerRadius="100%"
            paddingAngle={2}
            strokeWidth={0}
          >
            {data.map((d) => (
              <Cell key={d.tier} fill={TIER_VAR[d.tier]} />
            ))}
          </Pie>
          <Tooltip
            contentStyle={{
              background: "var(--popover)",
              border: "1px solid var(--border)",
              borderRadius: 8,
              fontSize: 12,
            }}
          />
        </PieChart>
      </ResponsiveContainer>
      <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
        <span className="text-2xl font-bold font-mono leading-none">{total}</span>
      </div>
    </div>
  );
}

/** Tiny inline sparkline for the client-list trend column. */
export function Sparkline({ values, color = "var(--chart-1)" }: { values: number[]; color?: string }) {
  if (!values || values.length === 0) {
    return <span className="text-muted-foreground text-xs">—</span>;
  }
  const data = values.map((value, i) => ({ i, value }));
  return (
    <div className="w-24 h-8">
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart data={data} margin={{ top: 2, bottom: 2, left: 0, right: 0 }}>
          <Area type="monotone" dataKey="value" stroke={color} fill={color} fillOpacity={0.18} strokeWidth={1.5} dot={false} />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}

/** Small line chart (engagement / logins). */
export function TrendLine({
  data,
  color = "var(--chart-1)",
  height = 200,
  className,
}: {
  data: { label: string; value: number }[];
  color?: string;
  height?: number;
  className?: string;
}) {
  return (
    <div className={cn("w-full", className)} style={{ height }}>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={data} margin={{ top: 8, right: 12, bottom: 4, left: -12 }}>
          <CartesianGrid vertical={false} stroke="var(--border)" strokeOpacity={0.5} />
          <XAxis dataKey="label" tickLine={false} axisLine={false} tick={{ fontSize: 11, fill: "var(--muted-foreground)" }} />
          <YAxis tickLine={false} axisLine={false} width={40} tick={{ fontSize: 11, fill: "var(--muted-foreground)" }} />
          <Tooltip
            contentStyle={{
              background: "var(--popover)",
              border: "1px solid var(--border)",
              borderRadius: 8,
              fontSize: 12,
            }}
          />
          <Line type="monotone" dataKey="value" stroke={color} strokeWidth={2} dot={{ r: 3 }} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}