"use client";

import { useMemo } from "react";
import GlobalLoader from "@/components/ui/GlobalLoader";
import { useDashboard } from "@/hooks/useDashboard";
import { buildDashboardCards } from "@/utils/dashboard-utils";
import { DashboardCards } from "@/components/dashboard/DashboardCards";
import { WidgetSection } from "@/components/dashboard/WidgetSection";
import { WidgetModal } from "@/components/dashboard/WidgetModal";

export default function Home() {
  const piePalette = useMemo(
    () => [
      "#4f46e5",
      "#ec4899",
      "#f97316",
      "#22c55e",
      "#0ea5e9",
      "#a855f7",
      "#facc15",
      "#f43f5e",
      "#14b8a6",
    ],
    []
  );

  const {
    apiData,
    widgetLoading,
    widgetError,
    activeWidget,
    setActiveWidget,
    allocationData,
    allocationError,
    dashboardAllocations,
    allocationWidgets,
    modalChartData,
    isInitialLoading,
    closeModal,
  } = useDashboard();

  const snapshotCards = useMemo(() => buildDashboardCards(apiData), [apiData]);

  return (
    <>
      {isInitialLoading && <GlobalLoader />}
      <div className="container mx-auto px-4 pb-16 pt-10 select-none animate-[fadeIn_0.7s_ease-in-out,slideUp_0.7s_ease-in-out]">
        {widgetError && (
          <div
            className="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800 shadow-sm animate-[fadeIn_0.3s_ease-in-out,slideDown_0.3s_ease-in-out]"
            aria-live="polite"
          >
            Failed to load widgets: {widgetError}
          </div>
        )}

        <DashboardCards cards={snapshotCards} />

        {!widgetLoading && allocationWidgets.length > 0 && (
          <WidgetSection
            widgets={allocationWidgets}
            allocations={dashboardAllocations}
            currency={apiData?.data?.currency}
            piePalette={piePalette}
          />
        )}

        {activeWidget && (
          <WidgetModal
            widget={activeWidget}
            allocationData={allocationData}
            allocationError={allocationError}
            modalChartData={modalChartData}
            currency={apiData?.data?.currency}
            piePalette={piePalette}
            onClose={closeModal}
          />
        )}
      </div>
    </>
  );
}