"use client";

import { useMemo } from "react";
import { PageHeader } from "@/components/ui/PageHeader";
import { useDashboardWidgets } from "@/hooks/useDashboardWidgets";
import { SelectedWidgetsList } from "@/components/settings/dashboard/SelectedWidgetsList";
import { AvailableWidgetsList } from "@/components/settings/dashboard/AvailableWidgetsList";
import { AlertMessage } from "@/components/settings/banks/AlertMessage";
import { SaveButton } from "@/components/settings/banks/SaveButton";

export default function DashboardWidgetSettings() {
  const {
    available,
    selected,
    loading,
    error,
    saving,
    saveError,
    saveSuccess,
    dragId,
    addToSelected,
    removeSelected,
    handleDragStart,
    handleDragOver,
    handleDrop,
    handleSave,
  } = useDashboardWidgets();

  const selectedIds = useMemo(
    () => new Set(selected.map((w) => w.widget_id)),
    [selected]
  );

  return (
    <div className="container mx-auto px-4 py-6">
      <PageHeader
        title="Asset Allocation Widgets"
        description="Manage which asset allocation widgets are active and their display priority."
        breadcrumbs={[
          { label: "Home", href: "/" },
          { label: "Settings" },
          { label: "Dashboard" },
        ]}
        actions={
          <SaveButton
            onClick={handleSave}
            disabled={saving || loading || !!error}
            saving={saving}
          />
        }
      />

      <AlertMessage error={saveError} success={saveSuccess} />

      <div className="w-full grid gap-4 lg:grid-cols-[30%_70%]">
        <SelectedWidgetsList
          widgets={selected}
          loading={loading}
          error={error}
          dragId={dragId}
          onDragStart={handleDragStart}
          onDragOver={handleDragOver}
          onDrop={handleDrop}
          onRemove={removeSelected}
        />

        <AvailableWidgetsList
          widgets={available}
          selectedIds={selectedIds}
          loading={loading}
          error={error}
          onAdd={addToSelected}
        />
      </div>
    </div>
  );
}