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

const SECTION_ANIMATION_DELAY_MS = 300;
const TILE_ANIMATION_OFFSET_MS = 400;
const TILE_ANIMATION_STEP_MS = 150;

interface WidgetSectionProps {
  widgets: WidgetItem[];
  allocations: Record<string, DashboardAllocation>;
  currency?: string;
  piePalette: string[];
}

export function WidgetSection({
  widgets,
  allocations,
  currency,
  piePalette,
}: WidgetSectionProps) {
  if (widgets.length === 0) return null;

  return (
    <section
      className="mt-8 grid gap-4 md:grid-cols-2 animate-[fadeIn_0.7s_ease-in-out,slideUp_0.7s_ease-in-out]"
      style={{
        animationDelay: `${SECTION_ANIMATION_DELAY_MS}ms`,
        animationFillMode: "both",
      }}
    >
      {widgets.map((widget, index) => (
        <WidgetSectionTile
          key={widget.widget_id}
          widget={widget}
          allocation={allocations[widget.widget_id] ?? DEFAULT_ALLOCATION}
          currency={currency}
          piePalette={piePalette}
          animationDelayMs={TILE_ANIMATION_OFFSET_MS + index * TILE_ANIMATION_STEP_MS}
        />
      ))}
    </section>
  );
}

interface WidgetSectionTileProps {
  widget: WidgetItem;
  allocation: DashboardAllocation;
  currency?: string;
  piePalette: string[];
  animationDelayMs: number;
}

function WidgetSectionTile({
  widget,
  allocation,
  currency,
  piePalette,
  animationDelayMs,
}: WidgetSectionTileProps) {
  return (
    <div
      className="relative overflow-hidden rounded-lg border border-slate-200 bg-white px-5 py-4 shadow-xl ring-1 ring-slate-100 transition-all duration-500 hover:scale-[1.02] hover:shadow-2xl animate-[fadeIn_0.5s_ease-in-out,slideUp_0.5s_ease-in-out]"
      style={{
        animationDelay: `${animationDelayMs}ms`,
        animationFillMode: "both",
      }}
    >
      <div className="pointer-events-none absolute -right-12 -top-16 h-40 w-40 rounded-lg bg-indigo-200/40 blur-3xl" />
      <div className="pointer-events-none absolute -left-14 bottom-0 h-36 w-36 rounded-lg bg-fuchsia-200/35 blur-3xl" />
      <div className="relative flex items-start justify-between gap-3">
        <p className="text-lg font-semibold text-slate-900">Asset Allocation</p>
      </div>
      <div className="relative mt-3">
        <AllocationStateView
          allocation={allocation}
          currency={currency}
          piePalette={piePalette}
          placeholderMinHeight={256}
        />
      </div>
    </div>
  );
}