"use client";

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Cell,
} from "recharts";
import { PLATFORM_MAP } from "@/lib/platforms";

interface PlatformData {
  platform: string;
  rate: number;
  label: string;
}

interface PlatformChartProps {
  data: Record<string, { queries: number; citations: number; rate: number; avg_position: number }>;
}

const COLORS = [
  "hsl(221.2 83.2% 53.3%)",
  "hsl(142.1 76.2% 36.3%)",
  "hsl(346.8 77.2% 49.8%)",
  "hsl(24.6 95% 53.1%)",
  "hsl(262.1 83.3% 57.8%)",
  "hsl(188.7 94.5% 42.6%)",
];

export function PlatformChart({ data }: PlatformChartProps) {
  const chartData: PlatformData[] = Object.entries(data).map(([platform, stats]) => ({
    platform,
    rate: Math.round(stats.rate * 100),
    label: PLATFORM_MAP[platform] || platform,
  }));

  return (
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={chartData} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
        <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
        <XAxis dataKey="label" tick={{ fontSize: 12 }} />
        <YAxis
          tick={{ fontSize: 12 }}
          domain={[0, 100]}
          tickFormatter={(value: number) => `${value}%`}
        />
        <Tooltip
          contentStyle={{
            backgroundColor: "hsl(var(--card))",
            border: "1px solid hsl(var(--border))",
            borderRadius: "var(--radius)",
          }}
          formatter={(value: number) => [`引用率: ${value}%`, ""]}
        />
        <Bar dataKey="rate" radius={[4, 4, 0, 0]}>
          {chartData.map((_, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  );
}