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

const tooltipStyles = {
  contentStyle: {
    background: "var(--popover)",
    border: "1px solid var(--border)",
    borderRadius: 8,
    fontSize: 11,
    color: "var(--popover-foreground)",
    boxShadow: "var(--shadow-elegant)",
  },
  labelStyle: { color: "var(--muted-foreground)", fontSize: 10, fontWeight: 500 },
  itemStyle: { color: "var(--foreground)" },
  cursor: { fill: "color-mix(in oklab, var(--foreground) 5%, transparent)" },
};

export function ReachAreaChart({
  data,
}: {
  data: Array<{ day: string; reach: number; engaged: number }>;
}) {
  return (
    <ResponsiveContainer width="100%" height={220}>
      <AreaChart data={data} margin={{ left: -20, right: 8, top: 8, bottom: 0 }}>
        <defs>
          <linearGradient id="reachFill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--chart-1)" stopOpacity={0.45} />
            <stop offset="100%" stopColor="var(--chart-1)" stopOpacity={0} />
          </linearGradient>
          <linearGradient id="engagedFill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--chart-2)" stopOpacity={0.45} />
            <stop offset="100%" stopColor="var(--chart-2)" stopOpacity={0} />
          </linearGradient>
        </defs>
        <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} />
        <XAxis
          dataKey="day"
          stroke="var(--muted-foreground)"
          fontSize={10}
          tickLine={false}
          axisLine={false}
        />
        <YAxis
          stroke="var(--muted-foreground)"
          fontSize={10}
          tickLine={false}
          axisLine={false}
          tickFormatter={(v) => `${(v / 1000).toFixed(0)}K`}
        />
        <Tooltip {...tooltipStyles} />
        <Area
          type="monotone"
          dataKey="reach"
          stroke="var(--chart-1)"
          strokeWidth={2}
          fill="url(#reachFill)"
        />
        <Area
          type="monotone"
          dataKey="engaged"
          stroke="var(--chart-2)"
          strokeWidth={2}
          fill="url(#engagedFill)"
        />
      </AreaChart>
    </ResponsiveContainer>
  );
}

export function RevenueLineChart({
  data,
}: {
  data: Array<{ month: string; revenue: number; payouts: number }>;
}) {
  return (
    <ResponsiveContainer width="100%" height={240}>
      <LineChart data={data} margin={{ left: -20, right: 8, top: 8, bottom: 0 }}>
        <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} />
        <XAxis
          dataKey="month"
          stroke="var(--muted-foreground)"
          fontSize={10}
          tickLine={false}
          axisLine={false}
        />
        <YAxis
          stroke="var(--muted-foreground)"
          fontSize={10}
          tickLine={false}
          axisLine={false}
          tickFormatter={(v) => `₦${v}M`}
        />
        <Tooltip {...tooltipStyles} formatter={(v: number) => `₦${v}M`} />
        <Line
          type="monotone"
          dataKey="revenue"
          stroke="var(--chart-1)"
          strokeWidth={2.5}
          dot={{ r: 3, fill: "var(--chart-1)" }}
          activeDot={{ r: 5 }}
        />
        <Line
          type="monotone"
          dataKey="payouts"
          stroke="var(--chart-2)"
          strokeWidth={2}
          dot={{ r: 2.5, fill: "var(--chart-2)" }}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}

export function ChannelMixChart({
  data,
}: {
  data: Array<{ name: string; value: number; color: string }>;
}) {
  return (
    <div className="flex items-center gap-4">
      <ResponsiveContainer width="50%" height={160}>
        <PieChart>
          <Pie
            data={data}
            dataKey="value"
            innerRadius={42}
            outerRadius={68}
            paddingAngle={2}
            stroke="var(--background)"
            strokeWidth={2}
          >
            {data.map((d) => (
              <Cell key={d.name} fill={d.color} />
            ))}
          </Pie>
          <Tooltip {...tooltipStyles} formatter={(v: number) => `${v}%`} />
        </PieChart>
      </ResponsiveContainer>
      <ul className="flex-1 space-y-2">
        {data.map((d) => (
          <li key={d.name} className="flex items-center justify-between text-xs">
            <span className="flex items-center gap-2">
              <span className="h-2 w-2 rounded-sm" style={{ background: d.color }} />
              {d.name}
            </span>
            <span className="font-medium tabular-nums">{d.value}%</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export function StateReachBarChart({ data }: { data: Array<{ state: string; reach: number }> }) {
  return (
    <ResponsiveContainer width="100%" height={220}>
      <BarChart data={data} margin={{ left: -20, right: 8, top: 8, bottom: 0 }}>
        <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} />
        <XAxis
          dataKey="state"
          stroke="var(--muted-foreground)"
          fontSize={10}
          tickLine={false}
          axisLine={false}
        />
        <YAxis
          stroke="var(--muted-foreground)"
          fontSize={10}
          tickLine={false}
          axisLine={false}
          tickFormatter={(v) => `${v}K`}
        />
        <Tooltip {...tooltipStyles} formatter={(v: number) => `${v}K reach`} />
        <Bar dataKey="reach" radius={[6, 6, 0, 0]} fill="var(--chart-1)" />
      </BarChart>
    </ResponsiveContainer>
  );
}