"use client";

import {
  ResponsiveContainer,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Cell,
} from "recharts";
import { formatTokens } from "@/lib/utils";
import { useI18n } from "@/lib/i18n";

interface RankItem {
  name: string;
  total_tokens: number;
  calls: number;
}

const BAR_COLORS = [
  "#00e5ff", "#00bcd4", "#0097a7", "#7c4dff",
  "#651fff", "#536dfe", "#448aff", "#40c4ff",
  "#18ffff", "#84ffff",
];

export function RankingBar({
  data,
  title,
}: {
  data: RankItem[];
  title: string;
}) {
  const { t } = useI18n();
  if (!data.length) return null;
  const sliced = data.slice(0, 10);

  return (
    <div>
      <h3 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">{title}</h3>
      <ResponsiveContainer width="100%" height={300}>
        <BarChart
          data={sliced}
          layout="vertical"
          margin={{ top: 0, right: 20, left: 0, bottom: 0 }}
        >
          <CartesianGrid strokeDasharray="3 3" stroke="rgba(0,229,255,0.06)" horizontal={false} />
          <XAxis type="number" tickFormatter={(v) => formatTokens(v)} tick={{ fontSize: 10, fill: "rgba(200,214,229,0.4)" }} stroke="rgba(0,229,255,0.1)" />
          <YAxis type="category" dataKey="name" width={100} tick={{ fontSize: 11, fill: "rgba(200,214,229,0.6)" }} stroke="transparent" />
          <Tooltip
            contentStyle={{
              background: "rgba(6,8,13,0.95)",
              border: "1px solid rgba(0,229,255,0.2)",
              borderRadius: "8px",
              color: "#c8d6e5",
              fontSize: "12px",
            }}
            formatter={(v) => [formatTokens(Number(v)), t("th.totalToken")]}
          />
          <Bar dataKey="total_tokens" radius={[0, 4, 4, 0]}>
            {sliced.map((_, i) => (
              <Cell key={i} fill={BAR_COLORS[i % BAR_COLORS.length]} fillOpacity={0.7} />
            ))}
          </Bar>
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}