import type { WidgetItem, DashboardAllocation } from "@/types/dashboard";
import { AllocationChart } from "./AllocationChart";

export const DEFAULT_ALLOCATION: DashboardAllocation = {
  slices: null,
  totals: null,
  loading: true,
  error: null,
};

export interface AllocationStateViewProps {
  allocation: DashboardAllocation;
  currency?: string;
  piePalette: string[];
  height?: number;
  widget?: WidgetItem | null;
  /** Min height for loading/error/empty placeholders */
  placeholderMinHeight?: number;
  className?: string;
}

export function AllocationStateView({
  allocation,
  currency,
  piePalette,
  height = 400,
  widget,
  placeholderMinHeight = 256,
  className = "",
}: AllocationStateViewProps) {
  if (allocation.error) {
    return (
      <div
        className={`flex items-center justify-center rounded-lg bg-amber-50 text-xs text-amber-700 ${className}`}
        style={{ minHeight: placeholderMinHeight }}
      >
        {allocation.error}
      </div>
    );
  }

  if (allocation.loading) {
    return (
      <div
        className={`flex items-center justify-center rounded-lg bg-slate-50 text-xs text-slate-500 ${className}`}
        style={{ minHeight: placeholderMinHeight }}
      >
        Loading chart...
      </div>
    );
  }

  const isCustomWithNoData =
    widget?.category_id === "custom" &&
    (!allocation.slices || allocation.slices.length === 0);

  if (isCustomWithNoData) {
    return (
      <div
        className={`flex flex-col items-center justify-center rounded-lg bg-slate-50 text-sm text-slate-600 ${className}`}
        style={{ minHeight: placeholderMinHeight }}
      >
        <p className="font-medium">{widget?.name ?? "Custom widget"}</p>
        <p className="mt-1 text-xs text-slate-500">Custom widget</p>
      </div>
    );
  }

  if (!allocation.slices || allocation.slices.length === 0) {
    return (
      <div
        className={`flex flex-col items-center justify-center rounded-lg bg-slate-50 text-xs text-slate-500 ${className}`}
        style={{ minHeight: placeholderMinHeight }}
      >
        <p>No chart data available.</p>
      </div>
    );
  }

  return (
    <AllocationChart
      slices={allocation.slices}
      currency={currency}
      piePalette={piePalette}
      height={height}
    />
  );
}