"use client";

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

const MUTED = "#8A93A6";
const STATUS_COLORS: Record<string, string> = {
  Pending: "#F59E0B",
  Approved: "#17C3B2",
  Completed: "#22C55E",
  Rejected: "#EF4444",
};

export function StatusBarChart({ data }: { data: { status: string; count: number }[] }) {
  const chartData = data.map((d) => ({
    status: d.status.charAt(0).toUpperCase() + d.status.slice(1),
    count: d.count,
  }));

  return (
    <ResponsiveContainer width="100%" height={220}>
      <BarChart data={chartData} margin={{ top: 8, right: 8, left: -20, bottom: 0 }}>
        <CartesianGrid strokeDasharray="3 3" stroke={MUTED} strokeOpacity={0.12} vertical={false} />
        <XAxis dataKey="status" tick={{ fill: MUTED, fontSize: 11 }} axisLine={false} tickLine={false} />
        <YAxis tick={{ fill: MUTED, fontSize: 11 }} axisLine={false} tickLine={false} width={30} allowDecimals={false} />
        <Tooltip
          cursor={{ fill: MUTED, fillOpacity: 0.06 }}
          contentStyle={{ background: "#141824", border: "none", borderRadius: 12, fontSize: 12, color: "#F3F5F8" }}
        />
        <Bar dataKey="count" radius={[8, 8, 0, 0]} maxBarSize={48}>
          {chartData.map((d) => (
            <Cell key={d.status} fill={STATUS_COLORS[d.status] ?? MUTED} />
          ))}
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  );
}