"use client";

import { useMemo, useState } from "react";
import { LayoutDashboard, PieChart, Plus, X } from "lucide-react";
import { PageHeader } from "@/components/ui/PageHeader";
import { useDashboardWidgets } from "@/hooks/useDashboardWidgets";
import { AssetAllocationWidgetCard } from "@/components/settings/dashboard/AssetAllocationWidgetCard";
import { SaveButton } from "@/components/settings/banks/SaveButton";
import { AlertMessage } from "@/components/settings/banks/AlertMessage";
import { BREADCRUMBS } from "@/constants/breadcrumbs";
import { SETTINGS_PAGE_CONTAINER } from "../constants";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";
import type { Widget } from "@/types/dashboard-widgets";

export default function DashboardWidgetSettings() {
  const hook = useDashboardWidgets();
  const [activeTab, setActiveTab] = useState("dashboard");

  /** All asset allocation widgets: selected first, then available (no duplicates). */
  const allAssetAllocationWidgets = useMemo(() => {
    const ids = new Set<string>();
    const list: Widget[] = [];
    hook.selected.forEach((w) => {
      ids.add(w.widget_id);
      list.push(w);
    });
    hook.available.forEach((w) => {
      if (!ids.has(w.widget_id)) {
        ids.add(w.widget_id);
        list.push(w);
      }
    });
    return list;
  }, [hook.selected, hook.available]);

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

  /** Dashboard widget ids currently on dashboard (for quick lookup). */
  const dashboardSelectedIds = useMemo(
    () => new Set(hook.dashboardSelected?.map((w) => w.widget_id) ?? []),
    [hook.dashboardSelected]
  );

  /** Dashboard widgets not yet on dashboard (available to add). */
  const dashboardAvailable = useMemo(
    () =>
      hook.dashboardWidgets?.filter(
        (w) => !dashboardSelectedIds.has(w.widget_id)
      ) ?? [],
    [hook.dashboardWidgets, dashboardSelectedIds]
  );

  return (
    <div className={cn(SETTINGS_PAGE_CONTAINER, "min-h-[60vh] scrollbar-light")}>
      <PageHeader
        title="Dashboard & Asset Allocation Widgets"
        description="Manage which widgets appear on your dashboard and configure banks per asset allocation widget."
        breadcrumbs={[...BREADCRUMBS.dashboardSettings]}
        actions={
          <div className="flex flex-wrap items-center gap-2">
            <SaveButton
              onClick={hook.handleSave}
              disabled={hook.saving || hook.loading || !!hook.error}
              saving={hook.saving}
              label="Save order"
            />
            {activeTab === "dashboard" && (
              <SaveButton
                onClick={hook.handleSaveDashboardSelection}
                disabled={hook.saving || hook.loading || !!hook.error}
                saving={hook.saving}
                label="Save dashboard"
              />
            )}
          </div>
        }
      />

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

      <Tabs value={activeTab} onValueChange={setActiveTab} className="mt-8">
        <TabsList className="inline-flex h-12 w-full max-w-md rounded-2xl bg-slate-100/80 p-1.5 shadow-inner">
          <TabsTrigger
            value="dashboard"
            className={cn(
              "flex-1 gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold transition-all duration-200",
              "data-[state=inactive]:text-slate-500 data-[state=inactive]:hover:text-slate-700",
              "data-[state=active]:bg-white data-[state=active]:text-emerald-700 data-[state=active]:shadow-sm"
            )}
          >
            <LayoutDashboard className="h-4 w-4" />
            Dashboard widgets
          </TabsTrigger>
          <TabsTrigger
            value="asset-allocation"
            className={cn(
              "flex-1 gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold transition-all duration-200",
              "data-[state=inactive]:text-slate-500 data-[state=inactive]:hover:text-slate-700",
              "data-[state=active]:bg-white data-[state=active]:text-emerald-700 data-[state=active]:shadow-sm"
            )}
          >
            <PieChart className="h-4 w-4" />
            Asset allocation
          </TabsTrigger>
        </TabsList>

        <TabsContent value="dashboard" className="mt-8 outline-none">
          {hook.loading ? (
            <div className="rounded-2xl border border-slate-200/80 bg-white shadow-lg shadow-slate-200/20 px-6 py-16 text-center">
              <div className="inline-block h-10 w-10 animate-spin rounded-full border-2 border-slate-200 border-t-emerald-500" />
              <p className="mt-4 text-sm text-slate-500">Loading widgets…</p>
            </div>
          ) : hook.error ? (
            <div className="rounded-2xl border border-amber-200 bg-amber-50 px-6 py-5 text-sm text-amber-800">
              {hook.error}
            </div>
          ) : (
            <div className="space-y-8">
              {/* On your dashboard */}
              <div className="rounded-2xl border border-slate-200/80 bg-white shadow-lg shadow-slate-200/20 overflow-hidden">
                <div className="border-b border-slate-100 bg-gradient-to-br from-slate-50 to-white px-6 py-5">
                  <h2 className="text-base font-semibold text-slate-800">
                    On your dashboard
                  </h2>
                  <p className="mt-1 text-sm text-slate-500">
                    These widgets are currently shown on your dashboard. Remove any you don’t need.
                  </p>
                </div>
                <div className="max-h-[320px] overflow-y-auto scrollbar-light p-4">
                  {!hook.dashboardSelected?.length ? (
                    <div className="py-12 text-center">
                      <LayoutDashboard className="mx-auto h-12 w-12 text-slate-300" />
                      <p className="mt-3 text-sm font-medium text-slate-600">No widgets on dashboard</p>
                      <p className="mt-1 text-sm text-slate-500">Add some from the list below.</p>
                    </div>
                  ) : (
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                      {hook.dashboardSelected.map((w) => (
                        <div
                          key={w.widget_id}
                          className={cn(
                            "flex items-center justify-between gap-3 rounded-xl border bg-white p-4 transition-shadow hover:shadow-md",
                            "border-emerald-200/80 shadow-sm"
                          )}
                        >
                          <div className="min-w-0 flex-1">
                            <p className="font-semibold text-slate-900 truncate" title={w.name}>
                              {w.name}
                            </p>
                            <p className="mt-0.5 text-xs text-slate-500 truncate">
                              {w.file_path}
                            </p>
                          </div>
                          <button
                            type="button"
                            onClick={() => hook.removeDashboardWidget(w.widget_id)}
                            className="shrink-0 inline-flex items-center gap-1.5 rounded-lg border border-rose-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-rose-600 hover:bg-rose-50 transition-colors"
                          >
                            <X className="h-3.5 w-3.5" />
                            Remove
                          </button>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>

              {/* Available to add */}
              <div className="rounded-2xl border border-slate-200/80 bg-white shadow-lg shadow-slate-200/20 overflow-hidden">
                <div className="border-b border-slate-100 bg-gradient-to-br from-slate-50 to-white px-6 py-5">
                  <h2 className="text-base font-semibold text-slate-800">
                    Available to add
                  </h2>
                  <p className="mt-1 text-sm text-slate-500">
                    Select widgets to show on your dashboard, then click Save dashboard above.
                  </p>
                </div>
                <div className="max-h-[320px] overflow-y-auto scrollbar-light p-4">
                  {!dashboardAvailable.length ? (
                    <div className="py-12 text-center">
                      <p className="text-sm font-medium text-slate-600">All dashboard widgets are added</p>
                      <p className="mt-1 text-sm text-slate-500">Remove some above to add others.</p>
                    </div>
                  ) : (
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                      {dashboardAvailable.map((w) => (
                        <div
                          key={w.widget_id}
                          className="flex items-center justify-between gap-3 rounded-xl border border-slate-200 bg-white p-4 transition-shadow hover:shadow-md hover:border-slate-300"
                        >
                          <div className="min-w-0 flex-1">
                            <p className="font-semibold text-slate-900 truncate" title={w.name}>
                              {w.name}
                            </p>
                            <p className="mt-0.5 text-xs text-slate-500 truncate">
                              {w.file_path}
                            </p>
                          </div>
                          <button
                            type="button"
                            onClick={() => hook.addDashboardWidget(w)}
                            className="shrink-0 inline-flex items-center gap-1.5 rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-emerald-500 transition-colors"
                          >
                            <Plus className="h-3.5 w-3.5" />
                            Add to dashboard
                          </button>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </div>
          )}
        </TabsContent>

        <TabsContent value="asset-allocation" className="mt-8 outline-none">
          <div className="mb-6 rounded-2xl border border-slate-100 bg-gradient-to-br from-slate-50/80 to-white px-5 py-4 shadow-sm">
            <p className="text-sm text-slate-600 leading-relaxed">
              Each card is an asset allocation widget. Banks are listed inside the card—select or unselect banks and click <strong className="text-slate-800">Save banks</strong> to store. Use <strong className="text-slate-800">Add to dashboard</strong> to show the widget on your dashboard.
            </p>
          </div>

          {hook.loading ? (
            <div className="py-16 text-center">
              <div className="inline-block h-10 w-10 animate-spin rounded-full border-2 border-slate-200 border-t-emerald-500" />
              <p className="mt-4 text-sm text-slate-500">Loading asset allocation widgets…</p>
            </div>
          ) : hook.error ? (
            <div className="rounded-2xl border border-amber-200 bg-amber-50 px-6 py-5 text-sm text-amber-800">
              {hook.error}
            </div>
          ) : allAssetAllocationWidgets.length === 0 ? (
            <div className="rounded-2xl border border-slate-200 bg-slate-50/80 px-6 py-16 text-center">
              <PieChart className="mx-auto h-12 w-12 text-slate-300" />
              <p className="mt-3 text-sm font-medium text-slate-600">No asset allocation widgets</p>
              <p className="mt-1 text-sm text-slate-500">Nothing to configure yet.</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {allAssetAllocationWidgets.map((widget) => {
                const banks = hook.getBanksForWidget(widget.widget_id);
                return (
                  <AssetAllocationWidgetCard
                    key={widget.widget_id}
                    widget={widget}
                    banks={banks}
                    isBankSelected={hook.isBankSelectedForWidget}
                    onToggleBank={hook.toggleBankForWidget}
                    onSaveBanks={hook.handleSaveBanksForWidget}
                    saving={hook.savingWidgetId === widget.widget_id}
                    hasDirtySelection={hook.isWidgetBankSelectionDirty(
                      widget.widget_id
                    )}
                    isOnDashboard={selectedIds.has(widget.widget_id)}
                    onAddToDashboard={hook.addToSelected}
                    onRemoveFromDashboard={hook.removeSelected}
                  />
                );
              })}
            </div>
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
}