"use client";

import { useState, useMemo } from "react";
import { RefreshCw, Plus } from "lucide-react";
import { PageHeader } from "@/components/ui/PageHeader";
import { Button } from "@/components/ui/button";
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 { ViewModeToggle } from "@/components/settings/assets/ViewModeToggle";
import { GroupBySelector } from "@/components/settings/assets/GroupBySelector";
import { BridgeGroupView } from "@/components/settings/assets/BridgeGroupView";
import { AssetTableView } from "@/components/settings/assets/AssetTableView";
import {
  TabType,
  ViewMode,
  KanbanGroupBy,
  KanbanCard,
} from "@/types/asset-settings";
import {
  buildGroupedAssets,
  calculateBridgeClassTotals,
} from "@/utils/asset-settings-utils";
import { buildFilteredColumns } from "@/utils/asset-settings-columns";

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);

  // Get current data based on active tab
  const currentData = activeTab === "grouping" ? groupingData : bridgeData;

  // Group assets by selected grouping option
  const groupedAssets = useMemo(() => {
    return buildGroupedAssets(
      activeTab,
      groupingData,
      bridgeData,
      kanbanGroupBy
    );
  }, [activeTab, groupingData, bridgeData, kanbanGroupBy]);

  // Calculate totals for each asset class (only for bridge tab)
  const classTotals = useMemo(() => {
    if (activeTab === "grouping") return {};
    return calculateBridgeClassTotals(bridgeData, kanbanGroupBy);
  }, [activeTab, bridgeData, kanbanGroupBy]);

  const reportingCurrency = 
    (activeTab === "grouping" 
      ? groupingData?.data?.results?.[0]?.reporting_currency 
      : bridgeData?.data?.results?.[0]?.reporting_currency) || "";

  // Filtered columns for table view
  const filteredColumns = useMemo(() => {
    return buildFilteredColumns(activeTab, groupingData);
  }, [activeTab, groupingData]);

  const hasData =
    activeTab === "bridge-group"
      ? bridgeGroupData?.data && Object.keys(bridgeGroupData.data).length > 0
      : activeTab === "grouping"
      ? groupingData?.data?.columns && groupingData.data.columns.length > 0
      : (activeTab === "bridge" 
          ? bridgeData?.data?.results && bridgeData.data.results.length > 0
          : groupingData?.data?.results && groupingData.data.results.length > 0);

  // Get flat list of assets for kanban
  const kanbanAssets = useMemo(() => {
    if (activeTab === "bridge-group") return [];
    if (activeTab === "grouping") return [];
    if (activeTab === "bridge") {
      return bridgeData?.data?.results || [];
    }
    return groupingData?.data?.results || [];
  }, [activeTab, bridgeData, groupingData]);

  // Handle kanban item move
  const handleKanbanMove = 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.");
    }
  };

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

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

  const collapseAll = () => {
    setExpandedClasses(new Set());
  };

  const handleCreateGroup = 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();
  };

  if (loading) {
    return (
      <div className="container mx-auto px-4 mt-6">
        <PageHeader
          title="Asset Settings"
          description="Loading assets..."
          breadcrumbs={[
            { label: "Home", href: "/" },
            { label: "Settings" },
            { label: "Assets" },
          ]}
        />
        <div className="flex h-64 items-center justify-center">
          <RefreshCw className="h-8 w-8 animate-spin text-[#428B4D]" />
        </div>
      </div>
    );
  }

  return (
    <div className="container mx-auto px-4 mt-6">
      <PageHeader
        title="Asset Settings"
        description="View and manage all assets grouped by asset class."
        breadcrumbs={[
          { label: "Home", href: "/" },
          { label: "Settings" },
          { label: "Assets" },
        ]}
        actions={
          hasData && (activeTab === "grouping" || activeTab === "bridge") && (
            <div className="flex gap-2">
              {activeTab === "grouping" && (
                <Button
                  onClick={() => setShowCreateGroupModal(true)}
                  className="bg-[#428B4D] text-white hover:bg-[#428B4D]/90"
                >
                  <Plus className="h-4 w-4" />
                  Create Group
                </Button>
              )}
              <ViewModeToggle viewMode={viewMode} onViewModeChange={setViewMode} />
              {activeTab === "bridge" && (
                <GroupBySelector value={kanbanGroupBy} onChange={setKanbanGroupBy} />
              )}
            </div>
          )
        }
      />

      <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>
  );
}