"use client";

import { useState, useMemo, useCallback } from "react";
import { RefreshCw } from "lucide-react";
import { PageHeader } from "@/components/ui/PageHeader";
import { ErrorMessage } from "@/components/ui/ErrorMessage";
import { useAssetSettings } from "@/hooks/useAssetSettings";
import { KanbanBoard } from "@/components/settings/assets/KanbanBoard";
import { CreateGroupModal } from "@/components/settings/assets/CreateGroupModal";
import { TabNavigation } from "@/components/settings/assets/TabNavigation";
import { BridgeGroupView } from "@/components/settings/assets/BridgeGroupView";
import { AssetTableView } from "@/components/settings/assets/AssetTableView";
import { AssetSettingsActions } from "@/components/settings/assets/AssetSettingsActions";
import {
  TabType,
  ViewMode,
  KanbanGroupBy,
  KanbanCard,
} from "@/types/asset-settings";
import {
  buildGroupedAssets,
  calculateBridgeClassTotals,
  hasDataForTab,
  getReportingCurrencyForTab,
} from "@/utils/asset-settings-utils";
import { buildFilteredColumns } from "@/utils/asset-settings-columns";
import { BREADCRUMBS } from "@/constants/breadcrumbs";
import { SETTINGS_PAGE_CONTAINER } from "../constants";

export default function Assets() {
  const {
    groupingData,
    bridgeData,
    bridgeGroupData,
    loading,
    error,
    loadGroupingData,
  } = useAssetSettings();

  const [activeTab, setActiveTab] = useState<TabType>("grouping");
  const [viewMode, setViewMode] = useState<ViewMode>("kanban");
  const [kanbanGroupBy, setKanbanGroupBy] = useState<KanbanGroupBy>("assetClass");
  const [expandedClasses, setExpandedClasses] = useState<Set<string>>(new Set());
  const [showCreateGroupModal, setShowCreateGroupModal] = useState(false);

  const groupedAssets = useMemo(
    () =>
      buildGroupedAssets(activeTab, groupingData, bridgeData, kanbanGroupBy),
    [activeTab, groupingData, bridgeData, kanbanGroupBy]
  );

  const classTotals = useMemo(() => {
    if (activeTab === "grouping") return {};
    return calculateBridgeClassTotals(bridgeData, kanbanGroupBy);
  }, [activeTab, bridgeData, kanbanGroupBy]);

  const reportingCurrency = getReportingCurrencyForTab(
    activeTab,
    groupingData,
    bridgeData
  );

  const filteredColumns = useMemo(
    () => buildFilteredColumns(activeTab, groupingData),
    [activeTab, groupingData]
  );

  const hasData = hasDataForTab(
    activeTab,
    groupingData,
    bridgeData,
    bridgeGroupData
  );

  const kanbanAssets = useMemo(() => {
    if (activeTab === "bridge-group" || activeTab === "grouping") return [];
    if (activeTab === "bridge") return bridgeData?.data?.results ?? [];
    return groupingData?.data?.results ?? [];
  }, [activeTab, bridgeData, groupingData]);

  // Handle kanban item move
  const handleKanbanMove = useCallback(
    async (cardId: string, newColumnId: string) => {
      if (activeTab !== "grouping" || !groupingData?.data?.columns) {
        return;
      }

      // Find the card being moved
      let card: KanbanCard | undefined;
      for (const column of groupingData.data.columns) {
        card = column.cards.find((c) => c.id === cardId);
        if (card) break;
      }

      if (!card) {
        console.error("Card not found:", cardId);
        return;
      }

      // Handle not_grouped case - send empty string
      const groupId = newColumnId === "not_grouped" ? "" : newColumnId;

      try {
        const res = await fetch("/api/settings/assets/move-card", {
          method: "POST",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          credentials: "include",
          body: new URLSearchParams({
            ref_id: card.ref_id,
            group_id: groupId,
          }).toString(),
        });

        const data = await res.json();

        if (!res.ok || data.status !== "success") {
          throw new Error(data.error || data.message || "Failed to move card");
        }

        await loadGroupingData();
      } catch (error) {
        console.error("Move card error:", error);
        alert("Failed to update group. Please try again.");
      }
    },
    [activeTab, groupingData, loadGroupingData]
  );

  const toggleAssetClass = useCallback((className: string) => {
    setExpandedClasses((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(className)) {
        newSet.delete(className);
      } else {
        newSet.add(className);
      }
      return newSet;
    });
  }, []);

  const expandAll = useCallback(() => {
    if (!groupedAssets) return;
    setExpandedClasses(new Set(Object.keys(groupedAssets)));
  }, [groupedAssets]);

  const collapseAll = useCallback(() => {
    setExpandedClasses(new Set());
  }, []);

  const handleCreateGroup = useCallback(
    async (title: string) => {
      const res = await fetch("/api/settings/assets", {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        credentials: "include",
        body: new URLSearchParams({
          title: title,
        }).toString(),
      });

      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.error || "Failed to create group");
      }

      await loadGroupingData();
    },
    [loadGroupingData]
  );

  const handleOpenCreateGroupModal = useCallback(() => {
    setShowCreateGroupModal(true);
  }, []);

  if (loading) {
    return (
      <div className={SETTINGS_PAGE_CONTAINER}>
        <PageHeader
          title="Asset Settings"
          description="Loading assets..."
          breadcrumbs={[...BREADCRUMBS.assetSettings]}
        />
        <div className="flex h-64 items-center justify-center">
          <RefreshCw className="h-8 w-8 animate-spin text-[#428B4D]" />
        </div>
      </div>
    );
  }

  return (
    <div className={SETTINGS_PAGE_CONTAINER}>
      <PageHeader
        title="Asset Settings"
        description="View and manage all assets grouped by asset class."
        breadcrumbs={[...BREADCRUMBS.assetSettings]}
        actions={
          <AssetSettingsActions
            activeTab={activeTab}
            hasData={hasData}
            viewMode={viewMode}
            onViewModeChange={setViewMode}
            kanbanGroupBy={kanbanGroupBy}
            onKanbanGroupByChange={setKanbanGroupBy}
            onCreateGroup={handleOpenCreateGroupModal}
          />
        }
      />

      <TabNavigation activeTab={activeTab} onTabChange={setActiveTab} />

      {/* Error Message */}
      {error && (
        <ErrorMessage
          error={error}
          onDismiss={() => {}}
          className="mt-6"
        />
      )}

      {!hasData && !loading && (
        <div className="rounded-lg border border-slate-200 bg-white p-8 text-center">
          <p className="text-slate-500">No assets available for {activeTab} view.</p>
        </div>
      )}

      {activeTab === "bridge-group" && hasData && (
        <BridgeGroupView
          data={bridgeGroupData}
          reportingCurrency={reportingCurrency}
        />
      )}

      {(activeTab === "grouping" || activeTab === "bridge") && hasData && (
        <>
          {viewMode === "kanban" ? (
            <KanbanBoard
              assets={kanbanAssets}
              groupBy={kanbanGroupBy}
              activeTab={activeTab}
              groupingData={groupingData}
              reportingCurrency={reportingCurrency}
              onItemMove={handleKanbanMove}
            />
          ) : (
            <AssetTableView
              groupedAssets={groupedAssets}
              expandedClasses={expandedClasses}
              onToggleClass={toggleAssetClass}
              onExpandAll={expandAll}
              onCollapseAll={collapseAll}
              filteredColumns={filteredColumns}
              classTotals={classTotals}
              activeTab={activeTab}
            />
          )}
        </>
      )}

      <CreateGroupModal
        isOpen={showCreateGroupModal}
        onClose={() => setShowCreateGroupModal(false)}
        onCreate={handleCreateGroup}
      />
    </div>
  );
}