"use client";

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

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { type ClientType, clients } from "@/data/clients";

const TYPE_ORDER: ClientType[] = ["Corporate", "Individual", "Trust", "Partnership"];

const COLORS: Record<ClientType, string> = {
  Corporate: "#6366f1",
  Individual: "#3b82f6",
  Trust: "#f59e0b",
  Partnership: "#10b981",
};

export function OverviewClientDistribution() {
  const chartData = TYPE_ORDER.map((type) => ({
    type,
    count: clients.filter((c) => c.type === type).length,
  }));

  return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="font-semibold text-base">Clients by Type</CardTitle>
      </CardHeader>
      <CardContent className="pt-1">
        <ResponsiveContainer width="100%" height={220}>
          <BarChart data={chartData} barCategoryGap="24%">
            <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" vertical={false} />
            <XAxis dataKey="type" tick={{ fontSize: 12, fill: "#64748b" }} axisLine={false} tickLine={false} />
            <YAxis
              allowDecimals={false}
              tick={{ fontSize: 12, fill: "#64748b" }}
              axisLine={false}
              tickLine={false}
              width={28}
            />
            <Tooltip
              cursor={{ fill: "rgba(0,0,0,0.04)" }}
              contentStyle={{
                background: "#fff",
                border: "1px solid #e2e8f0",
                borderRadius: 8,
                fontSize: 12,
              }}
            />
            <Bar dataKey="count" radius={[4, 4, 0, 0]}>
              {chartData.map((row) => (
                <Cell key={row.type} fill={COLORS[row.type]} />
              ))}
            </Bar>
          </BarChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
}