"use client";

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";

interface ProjectionData {
  month: string;
  withoutLLMHosts: number;
  withLLMHosts: number;
}

interface ProjectionsBarChartProps {
  data: ProjectionData[];
}

function CustomTooltip({
  active,
  payload,
  label,
}: {
  active?: boolean;
  payload?: Array<{ name: string; value: number; color: string }>;
  label?: string;
}) {
  if (!active || !payload) return null;
  return (
    <div className="rounded-lg border border-gray-700 bg-gray-800 p-3 shadow-xl">
      <p className="mb-2 text-sm font-medium text-gray-300">{label}</p>
      {payload.map((entry) => (
        <p key={entry.name} className="text-sm" style={{ color: entry.color }}>
          {entry.name}: ${entry.value.toFixed(2)}
        </p>
      ))}
    </div>
  );
}

export function ProjectionsBarChart({ data }: ProjectionsBarChartProps) {
  return (
    <ResponsiveContainer width="100%" height={350}>
      <BarChart data={data} margin={{ top: 5, right: 30, left: 0, bottom: 5 }}>
        <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
        <XAxis dataKey="month" tick={{ fill: "#9CA3AF", fontSize: 12 }} />
        <YAxis
          tick={{ fill: "#9CA3AF", fontSize: 12 }}
          tickFormatter={(v) => `$${v}`}
        />
        <Tooltip content={<CustomTooltip />} />
        <Legend
          formatter={(value) => (
            <span className="text-sm text-gray-300">{value}</span>
          )}
        />
        <Bar
          dataKey="withoutLLMHosts"
          name="Without LLMHosts"
          fill="#EF4444"
          radius={[4, 4, 0, 0]}
        />
        <Bar
          dataKey="withLLMHosts"
          name="With LLMHosts"
          fill="#6366F1"
          radius={[4, 4, 0, 0]}
        />
      </BarChart>
    </ResponsiveContainer>
  );
}

export type { ProjectionData };
