"use client";

import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  LabelList,
  Legend,
  Line,
  LineChart,
  PolarAngleAxis,
  PolarGrid,
  Radar,
  RadarChart,
  ResponsiveContainer,
  Scatter,
  ScatterChart,
  Tooltip,
  XAxis,
  YAxis,
  ZAxis
} from "recharts";
import type { TooltipProps } from "recharts";
import { Card } from "@/components/ui/card";

const palette = ["#4A0E1F", "#B08D57", "#6B7F5C", "#A0421C", "#8A8278", "#2B0810", "#D4B98C"];

function ChartTooltip({ active, payload, label }: TooltipProps<number, string>) {
  if (!active || !payload?.length) return null;
  return (
    <div className="rounded-md border border-gold/40 bg-ivory p-3 text-xs shadow-vellum">
      {label ? <p className="mb-2 font-serif text-base font-semibold text-bordeaux-deep">{label}</p> : null}
      <div className="space-y-1">
        {payload.map((item) => (
          <p key={`${item.name}-${item.value}`} className="font-mono text-smoke">
            <span style={{ color: item.color }}>{item.name}</span> · {item.value}
          </p>
        ))}
      </div>
    </div>
  );
}

export function SourceAreaChart({ data }: { data: Record<string, string | number>[] }) {
  const keys = Object.keys(data[0] ?? {}).filter((key) => key !== "month");
  return (
    <div className="h-[330px] w-full">
      <ResponsiveContainer>
        <AreaChart data={data} margin={{ top: 16, right: 16, left: -20, bottom: 0 }}>
          <CartesianGrid stroke="#D4B98C" strokeOpacity={0.28} vertical={false} />
          <XAxis dataKey="month" tickLine={false} axisLine={false} tick={{ fill: "#8A8278", fontSize: 12 }} />
          <YAxis tickLine={false} axisLine={false} tick={{ fill: "#8A8278", fontSize: 12 }} />
          <Tooltip content={<ChartTooltip />} />
          {keys.map((key, index) => (
            <Area
              key={key}
              type="monotone"
              dataKey={key}
              stackId="1"
              stroke={palette[index % palette.length]}
              fill={palette[index % palette.length]}
              fillOpacity={0.78}
            />
          ))}
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}

export function SentimentLineChart({ data }: { data: { month: string; sentiment: number; mentions: number }[] }) {
  return (
    <div className="h-[300px] w-full">
      <ResponsiveContainer>
        <LineChart data={data} margin={{ top: 16, right: 16, left: -20, bottom: 0 }}>
          <CartesianGrid stroke="#D4B98C" strokeOpacity={0.28} vertical={false} />
          <XAxis dataKey="month" tickLine={false} axisLine={false} tick={{ fill: "#8A8278", fontSize: 12 }} />
          <YAxis domain={[0, 100]} tickLine={false} axisLine={false} tick={{ fill: "#8A8278", fontSize: 12 }} />
          <Tooltip content={<ChartTooltip />} />
          <Line type="monotone" dataKey="sentiment" name="Sentiment" stroke="#4A0E1F" strokeWidth={2.5} dot={false} />
          <Line type="monotone" dataKey="mentions" name="Mentions" stroke="#B08D57" strokeWidth={1.5} dot={false} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

export function DescriptorSparkline({ values }: { values: number[] }) {
  const data = values.map((value, index) => ({ index, value }));
  return (
    <div className="h-9 w-28">
      <ResponsiveContainer>
        <LineChart data={data}>
          <Line type="monotone" dataKey="value" stroke="#B08D57" strokeWidth={1.8} dot={false} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

export function WordCloud({
  words,
  height = 360
}: {
  words: { term: string; count: number; sentiment: number }[];
  height?: number;
}) {
  const max = Math.max(...words.map((word) => word.count), 1);
  const rendered = words.slice(0, 56).map((word) => {
    const size = 13 + (word.count / max) * 35;
    const color = word.sentiment > 0.18 ? "#6B7F5C" : word.sentiment < -0.12 ? "#A0421C" : "#4A0E1F";
    return { ...word, size, color };
  });
  return (
    <div
      className="overflow-hidden rounded-md border border-gold/25 bg-ivory-warm p-6"
      style={{ minHeight: height }}
      role="img"
      aria-label="Nuage de descripteurs"
    >
      <div className="flex h-full min-h-[inherit] flex-wrap content-center items-center justify-center gap-x-5 gap-y-3">
        {rendered.map((word) => (
          <span
            key={word.term}
            className="whitespace-nowrap font-serif leading-none transition-transform hover:scale-105"
            style={{
              color: word.color,
              fontSize: `${word.size}px`,
              fontWeight: word.count > max * 0.45 ? 700 : 600,
              opacity: 0.78 + Math.min(0.22, word.count / max)
            }}
            title={`${word.term} · ${word.count} occurrences`}
          >
            {word.term}
          </span>
        ))}
      </div>
    </div>
  );
}

export function MarketRadarChart({ data }: { data: { axis: string; market: number; global: number }[] }) {
  return (
    <div className="h-[330px] w-full">
      <ResponsiveContainer>
        <RadarChart data={data}>
          <PolarGrid stroke="#D4B98C" />
          <PolarAngleAxis dataKey="axis" tick={{ fill: "#2B0810", fontSize: 12 }} />
          <Radar name="Marché" dataKey="market" stroke="#4A0E1F" fill="#4A0E1F" fillOpacity={0.34} />
          <Radar name="Global" dataKey="global" stroke="#B08D57" fill="#B08D57" fillOpacity={0.18} />
          <Legend />
          <Tooltip content={<ChartTooltip />} />
        </RadarChart>
      </ResponsiveContainer>
    </div>
  );
}

export function CompetitorScatter({
  data
}: {
  data: { id: string; name: string; sentiment: number; mentions: number; uniqueDescriptors: number }[];
}) {
  return (
    <div className="h-[430px] w-full">
      <ResponsiveContainer>
        <ScatterChart margin={{ top: 54, right: 150, bottom: 30, left: 36 }}>
          <CartesianGrid stroke="#D4B98C" strokeOpacity={0.3} />
          <XAxis type="number" dataKey="sentiment" name="Sentiment" domain={[55, 100]} tick={{ fill: "#8A8278", fontSize: 12 }} />
          <YAxis type="number" dataKey="mentions" name="Mentions" domain={[0, "dataMax + 90"]} tick={{ fill: "#8A8278", fontSize: 12 }} />
          <ZAxis type="number" dataKey="uniqueDescriptors" range={[90, 420]} />
          <Tooltip content={<ChartTooltip />} />
          <Scatter data={data} name="Domaines">
            {data.map((item) => (
              <Cell key={item.id} fill={item.id === "chevalier" ? "#4A0E1F" : "#8A8278"} />
            ))}
            <LabelList
              dataKey="name"
              position="top"
              fill="#2B0810"
              fontSize={12}
              offset={14}
              className="font-medium"
            />
          </Scatter>
        </ScatterChart>
      </ResponsiveContainer>
    </div>
  );
}

export function ShareOfVoiceChart({ data }: { data: Record<string, string | number>[] }) {
  const keys = Object.keys(data[0] ?? {}).filter((key) => key !== "market");
  return (
    <div className="h-[340px] w-full">
      <ResponsiveContainer>
        <BarChart data={data} layout="vertical" margin={{ top: 8, right: 16, left: 18, bottom: 0 }}>
          <CartesianGrid stroke="#D4B98C" strokeOpacity={0.24} horizontal={false} />
          <XAxis type="number" tick={{ fill: "#8A8278", fontSize: 12 }} />
          <YAxis type="category" dataKey="market" tick={{ fill: "#2B0810", fontSize: 12 }} />
          <Tooltip content={<ChartTooltip />} />
          <Legend />
          {keys.map((key, index) => (
            <Bar key={key} dataKey={key} stackId="voice" fill={palette[index % palette.length]} />
          ))}
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

export function SignalsTrendChart({ data }: { data: { month: string; mentions: number; sentiment: number; geography: number }[] }) {
  return (
    <div className="h-[340px] w-full">
      <ResponsiveContainer>
        <LineChart data={data} margin={{ top: 16, right: 16, left: -20, bottom: 0 }}>
          <CartesianGrid stroke="#D4B98C" strokeOpacity={0.28} vertical={false} />
          <XAxis dataKey="month" tickLine={false} axisLine={false} tick={{ fill: "#8A8278", fontSize: 11 }} />
          <YAxis tickLine={false} axisLine={false} tick={{ fill: "#8A8278", fontSize: 12 }} />
          <Tooltip content={<ChartTooltip />} />
          <Line type="monotone" dataKey="mentions" name="Mentions" stroke="#4A0E1F" strokeWidth={2} dot={false} />
          <Line type="monotone" dataKey="sentiment" name="Sentiment" stroke="#B08D57" strokeWidth={2} dot={false} />
          <Line type="monotone" dataKey="geography" name="Diversité géographique" stroke="#6B7F5C" strokeWidth={2} dot={false} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

export function CompactBars({ data }: { data: { label: string; value: number }[] }) {
  const max = Math.max(...data.map((item) => item.value), 1);
  return (
    <div className="space-y-3">
      {data.map((item) => (
        <div key={item.label}>
          <div className="mb-1 flex justify-between text-xs">
            <span className="text-charcoal">{item.label}</span>
            <span className="font-mono text-smoke">{item.value}</span>
          </div>
          <div className="h-2 rounded-sm bg-parchment">
            <div className="h-2 rounded-sm bg-bordeaux-deep" style={{ width: `${(item.value / max) * 100}%` }} />
          </div>
        </div>
      ))}
    </div>
  );
}

export function ChartFrame({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <Card>
      <h2 className="mb-5 font-serif text-2xl font-semibold text-bordeaux-deep">{title}</h2>
      {children}
    </Card>
  );
}