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

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: "300ms",
        animationFillMode: "both",
      }}
    >
      {widgets.map((widget, index) => {
        const allocation = allocations[widget.widget_id] ?? {
          slices: null,
          totals: null,
          loading: true,
          error: null,
        };
        return (
          <div
            key={widget.widget_id}
            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: `${400 + index * 150}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">
              <div>
                <p className="text-lg font-semibold text-slate-900">
                  Asset Allocation
                </p>
              </div>
            </div>

            <div className="relative mt-3">
              {allocation.error ? (
                <div className="flex h-64 items-center justify-center rounded-lg bg-amber-50 text-xs text-amber-700">
                  {allocation.error}
                </div>
              ) : allocation.loading ? (
                <div className="flex h-[400px] items-center justify-center rounded-lg bg-slate-50 text-xs text-slate-500">
                  Loading chart...
                </div>
              ) : !allocation.slices || allocation.slices.length === 0 ? (
                <div className="flex h-[400px] flex-col items-center justify-center rounded-lg bg-slate-50 text-xs text-slate-500">
                  <p className="mb-2">No chart data available.</p>
                  {allocation.error && (
                    <p className="text-amber-600">Error: {allocation.error}</p>
                  )}
                </div>
              ) : (
                <AllocationChart
                  slices={allocation.slices}
                  currency={currency}
                  piePalette={piePalette}
                />
              )}
            </div>
          </div>
        );
      })}
    </section>
  );
}