"use client";

import { Cell, Pie, PieChart } from "recharts";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";

import type { AdminDashboardOverview } from "../_lib/admin-dashboard-types";

const accountTypeConfig = {
  individual: { label: "Individual", color: "var(--chart-1)" },
  corporate: { label: "Corporate", color: "var(--chart-2)" },
} satisfies ChartConfig;

const STATUS_COLORS = [
  "var(--chart-1)",
  "var(--chart-2)",
  "var(--chart-3)",
  "var(--chart-4)",
  "var(--chart-5)",
];

type CustomerBreakdownProps = {
  breakdowns: AdminDashboardOverview["breakdowns"];
};

export function CustomerBreakdown({ breakdowns }: CustomerBreakdownProps) {
  const accountTypeData = [
    { key: "individual", label: "Individual", value: breakdowns.byAccountType.individual },
    { key: "corporate", label: "Corporate", value: breakdowns.byAccountType.corporate },
  ].filter((row) => row.value > 0);

  const statusEntries = Object.entries(breakdowns.byStatus)
    .filter(([, value]) => value > 0)
    .sort((a, b) => b[1] - a[1]);

  const statusTotal = statusEntries.reduce((sum, [, value]) => sum + value, 0);

  return (
    <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle className="leading-none">Account Type</CardTitle>
          <CardDescription>Individual vs corporate customers</CardDescription>
        </CardHeader>
        <CardContent>
          {accountTypeData.length === 0 ? (
            <p className="py-10 text-center text-muted-foreground text-sm">No account type data.</p>
          ) : (
            <div className="flex flex-col items-center gap-4 sm:flex-row">
              <ChartContainer config={accountTypeConfig} className="mx-auto aspect-square h-48 w-full max-w-48">
                <PieChart>
                  <ChartTooltip content={<ChartTooltipContent nameKey="key" hideLabel />} />
                  <Pie data={accountTypeData} dataKey="value" nameKey="key" innerRadius={48} outerRadius={72}>
                    {accountTypeData.map((entry) => (
                      <Cell
                        key={entry.key}
                        fill={`var(--color-${entry.key})`}
                        stroke="transparent"
                      />
                    ))}
                  </Pie>
                </PieChart>
              </ChartContainer>
              <ul className="w-full space-y-2 text-sm">
                {accountTypeData.map((row) => (
                  <li key={row.key} className="flex items-center justify-between gap-3">
                    <span className="text-muted-foreground">{row.label}</span>
                    <span className="font-medium tabular-nums">
                      {new Intl.NumberFormat("en-US").format(row.value)}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="leading-none">Customers by Status</CardTitle>
          <CardDescription>Live status counts from the customers service</CardDescription>
        </CardHeader>
        <CardContent>
          {statusEntries.length === 0 ? (
            <p className="py-10 text-center text-muted-foreground text-sm">No status breakdown.</p>
          ) : (
            <ul className="space-y-3">
              {statusEntries.map(([status, value], index) => {
                const pct = statusTotal > 0 ? Math.round((value / statusTotal) * 100) : 0;
                return (
                  <li key={status} className="space-y-1.5">
                    <div className="flex items-center justify-between gap-3 text-sm">
                      <span className="capitalize text-muted-foreground">{status.replaceAll("-", " ")}</span>
                      <span className="font-medium tabular-nums">
                        {new Intl.NumberFormat("en-US").format(value)}
                        <span className="ml-2 text-muted-foreground font-normal">{pct}%</span>
                      </span>
                    </div>
                    <div className="h-1.5 overflow-hidden rounded-full bg-muted">
                      <div
                        className="h-full rounded-full"
                        style={{
                          width: `${pct}%`,
                          background: STATUS_COLORS[index % STATUS_COLORS.length],
                        }}
                      />
                    </div>
                  </li>
                );
              })}
            </ul>
          )}
        </CardContent>
      </Card>
    </div>
  );
}