import React, { useMemo } from "react";
import {
  Chart as ChartJS,
  ArcElement,
  DoughnutController,
  Tooltip,
  type ChartOptions,
  type ChartData,
} from "chart.js";
import { Chart } from "react-chartjs-2";
import { useThemeVars } from "@/lib/theme-provider";
import { Card, CardContent, CardHeader, CardTitle } from "./card";
import { Empty, EmptyDescription } from "./empty";
import { Skeleton } from "./skeleton";
import { cn } from "@/lib/utils";
import {
  formatAbbrev,
  DoughnutLegendRow,
  FALLBACK_PRIMARY,
  FALLBACK_SECONDARY,
} from "./chart-shared";

ChartJS.register(ArcElement, DoughnutController, Tooltip);

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

export interface PropertyDebtEquityDoughnutChartProps {
  /** Current property estimate value in dollars */
  estimateValue?: number | null;
  /** Outstanding debt (mortgage) in dollars */
  debtValue?: number | null;
  title?: string;
  showLegend?: boolean;
  /** Chart canvas height in pixels */
  height?: number;
  /** Card max-width in pixels or CSS string */
  width?: number | string;
  className?: string;
  /** Show skeleton loading state instead of the chart */
  isLoading?: boolean;
}

// ---------------------------------------------------------------------------
// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

export function PropertyDebtEquityDoughnutChart({
  estimateValue,
  debtValue,
  title = "Debt & Equity",
  showLegend = true,
  height = 200,
  width = "100%",
  className,
  isLoading = false,
}: PropertyDebtEquityDoughnutChartProps) {
  const themeVars = useThemeVars();
  const brandPrimary: string =
    (themeVars["--theme-primary"] as string | undefined) || FALLBACK_PRIMARY;
  const brandSecondary: string =
    (themeVars["--theme-secondary"] as string | undefined) ||
    FALLBACK_SECONDARY;
  const fontFamily: string =
    (themeVars["--font-sans"] as string | undefined) || "Figtree, sans-serif";

  const estimate = estimateValue ?? 0;
  const debt = Math.min(debtValue ?? 0, estimate);
  const equity = Math.max(0, estimate - debt);
  const hasData = estimate > 0;

  const chartData = useMemo<ChartData<"doughnut">>(
    () => ({
      labels: ["Equity", "Debt"],
      datasets: [
        {
          data: [equity, debt],
          backgroundColor: [brandPrimary, brandSecondary],
          borderWidth: 0,
          hoverOffset: 4,
        },
      ],
    }),
    [equity, debt, brandPrimary, brandSecondary],
  );

  const options = useMemo<ChartOptions<"doughnut">>(
    () => ({
      responsive: true,
      maintainAspectRatio: false,
      cutout: "68%",
      animation: { duration: 600, easing: "easeOutQuart" },
      plugins: {
        legend: { display: false },
        tooltip: {
          padding: 10,
          cornerRadius: 0,
          titleFont: { size: 11, weight: 600 },
          bodyFont: { size: 12, weight: 500 },
          callbacks: {
            label: (ctx) => {
              const val = ctx.raw as number;
              const pct =
                estimate > 0 ? `${((val / estimate) * 100).toFixed(1)}%` : "0%";
              return ` ${ctx.label}: ${formatAbbrev(val)} (${pct})`;
            },
          },
        },
      },
    }),
    [estimate],
  );

  const equityPct =
    estimate > 0 ? `${((equity / estimate) * 100).toFixed(1)}%` : "0%";
  const debtPct =
    estimate > 0 ? `${((debt / estimate) * 100).toFixed(1)}%` : "0%";

  return (
    <Card
      className={cn("w-full py-4 sm:py-6 gap-2", className)}
      style={{ maxWidth: width, fontFamily }}
    >
      <CardHeader className="px-3 sm:px-6">
        <CardTitle className="text-xs font-semibold uppercase tracking-wide">
          {title}
        </CardTitle>
      </CardHeader>

      <CardContent className="px-3 sm:px-6">
        {isLoading ? (
          <Skeleton style={{ height, width: "100%" }} />
        ) : !hasData ? (
          <Empty className="flex-none p-4" style={{ height }}>
            <EmptyDescription>No data available</EmptyDescription>
          </Empty>
        ) : (
          <div className="flex flex-col gap-4">
            <div style={{ height, width: "100%", position: "relative" }}>
              <Chart
                key={`${brandPrimary}__${brandSecondary}`}
                type="doughnut"
                data={chartData}
                options={options}
                aria-label={title}
              />
              <div
                style={{
                  position: "absolute",
                  top: "50%",
                  left: "50%",
                  transform: "translate(-50%, -50%)",
                  textAlign: "center",
                  pointerEvents: "none",
                }}
              >
                <div className="text-base font-semibold leading-tight">
                  {formatAbbrev(equity)}
                </div>
                <div className="text-[11px] text-muted-foreground leading-none mt-1">
                  Equity
                </div>
              </div>
            </div>
            {showLegend && (
              <div className="flex flex-col gap-2">
                <DoughnutLegendRow
                  label="Equity"
                  color={brandPrimary}
                  value={equity}
                  percent={equityPct}
                />
                <DoughnutLegendRow
                  label="Debt"
                  color={brandSecondary}
                  value={debt}
                  percent={debtPct}
                />
              </div>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  );
}