"use client";

import { useMemo } from "react";
import {
  AreaChart,
  Area,
  BarChart,
  Bar,
  Line,
  PieChart,
  Pie,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";

type TrendData = Array<{ date: string; count: number }>;
type TypeData = Array<{ type: string; count: number }>;
type StatusData = Array<{ name: string; count: number }>;

const PIE_COLORS: Record<string, string> = {
  Uploaded: "hsl(38 92% 50%)",
  Processing: "hsl(217 91% 60%)",
  Analyzed: "hsl(160 84% 39%)",
  Failed: "hsl(0 84% 60%)",
};

const FALLBACK_COLORS = [
  "hsl(217 91% 60%)",
  "hsl(260 89% 65%)",
  "hsl(190 85% 50%)",
  "hsl(340 82% 52%)",
];

const tooltipStyle = {
  backgroundColor: "hsl(var(--background) / 0.95)",
  border: "1px solid hsl(var(--border) / 0.6)",
  borderRadius: "16px",
  color: "hsl(var(--foreground))",
  backdropFilter: "blur(12px)",
  boxShadow: "0 8px 32px rgba(0,0,0,0.12)",
  padding: "12px 16px",
  fontSize: "13px",
};

const CustomTooltip = ({ active, payload, label }: any) => {
  if (!active || !payload?.length) return null;

  return (
    <div style={tooltipStyle} className="space-y-1.5 min-w-[140px]">
      {label && (
        <p className="text-[11px] font-bold uppercase tracking-wider text-muted-foreground border-b border-border/40 pb-1.5 mb-1.5">
          {label}
        </p>
      )}
      {payload.map((entry: any, index: number) => (
        <div key={index} className="flex items-center justify-between gap-4">
          <div className="flex items-center gap-2">
            <span
              className="h-2 w-2 rounded-full shrink-0"
              style={{ backgroundColor: entry.color }}
            />
            <span className="text-xs text-muted-foreground">{entry.name}</span>
          </div>
          <span className="text-xs font-bold text-foreground tabular-nums">
            {typeof entry.value === "number"
              ? entry.value.toLocaleString()
              : entry.value}
          </span>
        </div>
      ))}
    </div>
  );
};

export function TrendChart({ data }: { data: TrendData }) {
  const trendData = useMemo(
    () =>
      data.map((point, index) => {
        const start = Math.max(0, index - 6);
        const window = data.slice(start, index + 1);
        const average =
          window.reduce((sum, item) => sum + item.count, 0) / window.length;

        return {
          ...point,
          movingAverage: Number(average.toFixed(2)),
        };
      }),
    [data],
  );

  const xAxisInterval =
    trendData.length > 12 ? Math.floor(trendData.length / 8) : 0;

  return (
    <div className="w-full h-full">
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart
          data={trendData}
          margin={{ top: 10, right: 10, left: -24, bottom: 0 }}
        >
          <defs>
            <linearGradient id="trendFill" x1="0" y1="0" x2="0" y2="1">
              <stop
                offset="0%"
                stopColor="hsl(217 91% 60%)"
                stopOpacity={0.5}
              />
              <stop
                offset="60%"
                stopColor="hsl(217 91% 60%)"
                stopOpacity={0.15}
              />
              <stop
                offset="100%"
                stopColor="hsl(217 91% 60%)"
                stopOpacity={0.02}
              />
            </linearGradient>
            <linearGradient id="trendStroke" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor="hsl(217 91% 60%)" />
              <stop offset="100%" stopColor="hsl(260 89% 65%)" />
            </linearGradient>
            <linearGradient id="avgStroke" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor="hsl(260 89% 65%)" />
              <stop offset="100%" stopColor="hsl(190 85% 50%)" />
            </linearGradient>
            <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur stdDeviation="3" result="coloredBlur" />
              <feMerge>
                <feMergeNode in="coloredBlur" />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>
          </defs>
          <CartesianGrid
            strokeDasharray="3 6"
            stroke="hsl(var(--border) / 0.4)"
            vertical={false}
          />
          <XAxis
            dataKey="date"
            stroke="hsl(var(--muted-foreground) / 0.5)"
            interval={xAxisInterval}
            tick={{ fontSize: 11, fontWeight: 500 }}
            tickLine={false}
            axisLine={false}
            tickMargin={8}
          />
          <YAxis
            stroke="hsl(var(--muted-foreground) / 0.5)"
            allowDecimals={false}
            tick={{ fontSize: 11, fontWeight: 500 }}
            tickLine={false}
            axisLine={false}
            tickMargin={8}
          />
          <Tooltip content={<CustomTooltip />} />
          <Area
            type="monotone"
            dataKey="count"
            stroke="url(#trendStroke)"
            strokeWidth={2.5}
            fillOpacity={1}
            fill="url(#trendFill)"
            activeDot={{
              r: 6,
              stroke: "hsl(var(--background))",
              strokeWidth: 3,
              fill: "hsl(217 91% 60%)",
              filter: "url(#glow)",
            }}
            dot={false}
          />
          <Line
            type="monotone"
            dataKey="movingAverage"
            stroke="url(#avgStroke)"
            strokeWidth={2}
            strokeDasharray="6 4"
            dot={false}
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}

export function ContractTypeChart({ data }: { data: TypeData }) {
  const sortedData = useMemo(
    () => [...data].sort((a, b) => b.count - a.count),
    [data],
  );

  return (
    <div className="w-full h-full">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart
          data={sortedData}
          layout="vertical"
          margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
        >
          <defs>
            <linearGradient id="barGradient" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor="hsl(217 91% 60%)" />
              <stop offset="100%" stopColor="hsl(260 89% 65%)" />
            </linearGradient>
            <linearGradient id="barGradient2" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor="hsl(260 89% 65%)" />
              <stop offset="100%" stopColor="hsl(190 85% 50%)" />
            </linearGradient>
            <linearGradient id="barGradient3" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor="hsl(190 85% 50%)" />
              <stop offset="100%" stopColor="hsl(340 82% 52%)" />
            </linearGradient>
            <linearGradient id="barGradient4" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor="hsl(340 82% 52%)" />
              <stop offset="100%" stopColor="hsl(38 92% 50%)" />
            </linearGradient>
          </defs>
          <CartesianGrid
            strokeDasharray="3 6"
            stroke="hsl(var(--border) / 0.4)"
            horizontal={false}
          />
          <XAxis
            type="number"
            stroke="hsl(var(--muted-foreground) / 0.5)"
            allowDecimals={false}
            tick={{ fontSize: 11, fontWeight: 500 }}
            tickLine={false}
            axisLine={false}
            tickMargin={8}
          />
          <YAxis
            type="category"
            dataKey="type"
            width={128}
            stroke="hsl(var(--muted-foreground) / 0.5)"
            tick={{ fontSize: 11, fontWeight: 600 }}
            tickLine={false}
            axisLine={false}
            tickMargin={8}
          />
          <Tooltip
            content={<CustomTooltip />}
            cursor={{ fill: "hsl(var(--muted) / 0.15)", radius: 8 }}
          />
          <Bar dataKey="count" radius={[0, 10, 10, 0]} maxBarSize={32}>
            {sortedData.map((item, index) => {
              const gradients = [
                "url(#barGradient)",
                "url(#barGradient2)",
                "url(#barGradient3)",
                "url(#barGradient4)",
              ];
              return (
                <Cell
                  key={`${item.type}-${index}`}
                  fill={gradients[index % gradients.length]}
                  className="transition-all duration-300 hover:opacity-80"
                />
              );
            })}
          </Bar>
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

export function ContractStatusChart({ data }: { data: StatusData }) {
  const total = useMemo(
    () => data.reduce((sum, item) => sum + item.count, 0),
    [data],
  );

  return (
    <div className="w-full h-full flex flex-col">
      <div className="h-[76%] w-full">
        <ResponsiveContainer width="100%" height="100%">
          <PieChart>
            <defs>
              <filter id="pieGlow" x="-50%" y="-50%" width="200%" height="200%">
                <feGaussianBlur stdDeviation="4" result="coloredBlur" />
                <feMerge>
                  <feMergeNode in="coloredBlur" />
                  <feMergeNode in="SourceGraphic" />
                </feMerge>
              </filter>
            </defs>
            <Pie
              data={data}
              cx="50%"
              cy="50%"
              innerRadius={58}
              outerRadius={88}
              paddingAngle={4}
              dataKey="count"
              stroke="hsl(var(--background))"
              strokeWidth={3}
              cornerRadius={6}
            >
              {data.map((entry, index) => (
                <Cell
                  key={`${entry.name}-${index}`}
                  fill={
                    PIE_COLORS[entry.name] ??
                    FALLBACK_COLORS[index % FALLBACK_COLORS.length]
                  }
                  className="transition-all duration-300 hover:opacity-90"
                  style={{ filter: "drop-shadow(0 2px 8px rgba(0,0,0,0.1))" }}
                />
              ))}
            </Pie>
            {total > 0 && (
              <text
                x="50%"
                y="48%"
                textAnchor="middle"
                dominantBaseline="middle"
              >
                <tspan
                  x="50%"
                  y="48%"
                  className="fill-foreground text-xl font-bold tracking-tight"
                >
                  {total.toLocaleString()}
                </tspan>
                <tspan
                  x="50%"
                  dy="18"
                  className="fill-muted-foreground text-[11px] font-medium uppercase tracking-wider"
                >
                  Files
                </tspan>
              </text>
            )}
            <Tooltip content={<CustomTooltip />} />
          </PieChart>
        </ResponsiveContainer>
      </div>

      <div className="grid grid-cols-2 gap-2.5 pt-2">
        {data.map((item, index) => {
          const color =
            PIE_COLORS[item.name] ??
            FALLBACK_COLORS[index % FALLBACK_COLORS.length];

          return (
            <div
              key={`${item.name}-legend`}
              className="group flex items-center gap-2.5 rounded-xl border border-border/40 bg-background/40 backdrop-blur-md px-3 py-2 hover:bg-background/60 hover:border-border/60 transition-all cursor-default"
            >
              <span
                className="h-2.5 w-2.5 rounded-full ring-2 ring-offset-1 ring-offset-background"
                style={{ backgroundColor: color, "--tw-ring-color": color } as React.CSSProperties}
              />
              <span className="text-[11px] text-muted-foreground truncate font-medium">
                {item.name}
              </span>
              <span className="ml-auto text-[11px] font-bold text-foreground tabular-nums">
                {item.count}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}