import { useState, useMemo } from "react";
import { GripVertical } from "lucide-react";
import type { AssetItem } from "@/components/datatable/listassets/columns";
import type {
  TabType,
  KanbanGroupBy,
  GroupingApiResponse,
  KanbanCard,
} from "@/types/asset-settings";
import {
  formatCurrency,
  groupAssetsBy,
  sortGroupedAssets,
  extractAssetClassParts,
} from "@/utils/asset-settings-utils";
import { PRIMARY_COLOR } from "@/lib/common";
import { cn } from "@/lib/utils";

export interface KanbanColumnDisplay {
  id: string;
  title: string;
  cards: KanbanCard[];
  items: AssetItem[];
}

export interface KanbanBoardProps {
  assets: AssetItem[];
  groupBy: KanbanGroupBy;
  activeTab: TabType;
  groupingData: GroupingApiResponse | null;
  reportingCurrency?: string;
  onItemMove?: (assetId: string, newColumn: string) => void;
}

export function KanbanBoard({
  assets,
  groupBy,
  activeTab,
  groupingData,
  reportingCurrency = "",
  onItemMove,
}: KanbanBoardProps) {
  const [draggedItem, setDraggedItem] = useState<string | null>(null);
  const [dragOverColumn, setDragOverColumn] = useState<string | null>(null);

  const columns = useMemo(() => {
    // If grouping tab and we have columns from API, use them directly
    if (activeTab === "grouping" && groupingData?.data?.columns) {
      return groupingData.data.columns.map((col) => ({
        id: col.id,
        title: col.title,
        cards: col.cards,
        items: [] as AssetItem[],
      }));
    }

    // For bridge tab, group assets into columns
    const grouped = groupAssetsBy(assets, groupBy);
    const sorted = sortGroupedAssets(grouped, groupBy);

    return Object.entries(sorted).map(([key, items]) => ({
      id: key,
      title: key,
      cards: [] as KanbanCard[],
      items: items,
    }));
  }, [assets, groupBy, activeTab, groupingData]);

  const handleDragStart = (e: React.DragEvent, cardId: string) => {
    setDraggedItem(cardId);
    e.dataTransfer.effectAllowed = "move";
  };

  const handleDragOver = (e: React.DragEvent, columnId: string) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";
    setDragOverColumn(columnId);
  };

  const handleDragLeave = () => {
    setDragOverColumn(null);
  };

  const handleDrop = (e: React.DragEvent, targetColumnId: string) => {
    e.preventDefault();
    if (activeTab !== "grouping" || !draggedItem || !onItemMove) return;

    onItemMove(draggedItem, targetColumnId);
    setDraggedItem(null);
    setDragOverColumn(null);
  };

  const handleDragEnd = () => {
    setDraggedItem(null);
    setDragOverColumn(null);
  };

  return (
    <div className="flex gap-4 overflow-x-auto pb-4">
      {columns.map((column) => (
        <div
          key={column.id}
          className={cn(
            "flex-shrink-0 w-80 rounded-lg border-2 transition-colors",
            activeTab === "grouping" && dragOverColumn === column.id
              ? "bg-green-50"
              : "border-slate-200 bg-slate-50"
          )}
          style={
            activeTab === "grouping" && dragOverColumn === column.id
              ? { borderColor: PRIMARY_COLOR }
              : undefined
          }
          onDragOver={
            activeTab === "grouping"
              ? (e) => handleDragOver(e, column.id)
              : undefined
          }
          onDragLeave={activeTab === "grouping" ? handleDragLeave : undefined}
          onDrop={
            activeTab === "grouping" ? (e) => handleDrop(e, column.id) : undefined
          }
        >
          {/* Column Header */}
          <div className="p-4 border-b border-slate-200 bg-white rounded-t-lg">
            <div className="flex items-center justify-between">
              <h3 className="font-semibold text-slate-900">{column.title}</h3>
              <span className="text-xs font-medium text-slate-500 bg-slate-100 px-2 py-1 rounded">
                {activeTab === "grouping"
                  ? column.cards?.length || 0
                  : column.items?.length || 0}
              </span>
            </div>
          </div>

          {/* Column Items */}
          <div className="p-2 space-y-2 min-h-[200px] max-h-[calc(100vh-300px)] overflow-y-auto">
            {/* Render cards for grouping tab */}
            {activeTab === "grouping" &&
              column.cards &&
              column.cards.map((card, index) => {
                const isDragging = draggedItem === card.id;
                const uniqueKey = `${column.id}-${card.id}-${index}`;
                const { mainPart, smallPart } = extractAssetClassParts(
                  card.assetClass || ""
                );

                return (
                  <div
                    key={uniqueKey}
                    draggable={activeTab === "grouping"}
                    data-ref-id={card.ref_id}
                    onDragStart={(e) => {
                      if (activeTab === "grouping") {
                        handleDragStart(e, card.id);
                      }
                    }}
                    onDragEnd={handleDragEnd}
                    className={`bg-white rounded-lg border border-slate-200 p-3 shadow-sm transition-all hover:shadow-md ${
                      activeTab === "grouping" ? "cursor-move" : "cursor-default"
                    } ${isDragging ? "opacity-50 scale-95" : ""}`}
                  >
                    {activeTab === "grouping" && (
                      <div className="flex items-start gap-2 mb-2">
                        <GripVertical className="h-4 w-4 text-slate-400 mt-0.5 flex-shrink-0" />
                      </div>
                    )}

                    <div className="space-y-2 text-xs">
                      <div className="flex justify-between">
                        <span className="text-slate-500">Macro Class:</span>
                        <span className="text-slate-700 font-medium">
                          {card.macroAssetClass || "--"}
                        </span>
                      </div>

                      <div className="flex justify-between">
                        <span className="text-slate-500">Asset Class:</span>
                        <div className="text-right">
                          {card.assetClass ? (
                            <>
                              <span className="text-slate-700 font-medium">
                                {mainPart}
                              </span>
                              {smallPart && (
                                <div className="text-slate-500 text-[10px]">
                                  {smallPart}
                                </div>
                              )}
                            </>
                          ) : (
                            "--"
                          )}
                        </div>
                      </div>

                      <div className="flex justify-between">
                        <span className="text-slate-500">Asset Type:</span>
                        <span className="text-slate-600 truncate ml-2">
                          {card.assetType &&
                          card.assetType !== "--" &&
                          card.assetType !== "---"
                            ? card.assetType
                            : "--"}
                        </span>
                      </div>
                    </div>
                  </div>
                );
              })}

            {/* Render items for bridge tab */}
            {activeTab === "bridge" &&
              column.items &&
              column.items.map((asset, index) => {
                const uniqueKey = asset.uid
                  ? `${column.id}-${asset.uid}`
                  : `${column.id}-${asset.ref_id || asset.stock_id || index}-${index}`;
                const { mainPart, smallPart } = extractAssetClassParts(
                  asset.asetClass || ""
                );

                return (
                  <div
                    key={uniqueKey}
                    className="bg-white rounded-lg border border-slate-200 p-3 shadow-sm cursor-default transition-all hover:shadow-md"
                  >
                    <div className="space-y-2 text-xs">
                      <div className="flex justify-between">
                        <span className="text-slate-500">Macro Class:</span>
                        <span className="text-slate-700 font-medium">
                          {groupingData?.data?.macross_array
                            ? groupingData.data.macross_array[asset.f_type] || "--"
                            : "--"}
                        </span>
                      </div>

                      <div className="flex justify-between">
                        <span className="text-slate-500">Asset Class:</span>
                        <div className="text-right">
                          {asset.asetClass ? (
                            <>
                              <span className="text-slate-700 font-medium">
                                {mainPart}
                              </span>
                              {smallPart && (
                                <div className="text-slate-500 text-[10px]">
                                  {smallPart}
                                </div>
                              )}
                            </>
                          ) : (
                            "--"
                          )}
                        </div>
                      </div>

                      <div className="flex justify-between">
                        <span className="text-slate-500">Asset Type:</span>
                        <span className="text-slate-600 truncate ml-2">
                          {asset.asset_type_title &&
                          asset.asset_type_title !== "--" &&
                          asset.asset_type_title !== "---"
                            ? asset.asset_type_title
                            : "--"}
                        </span>
                      </div>

                      <div className="flex justify-between">
                        <span className="text-slate-500">Value:</span>
                        <span className="text-slate-700 font-medium">
                          {asset.value ? formatCurrency(asset.value, "") : "--"}
                        </span>
                      </div>
                    </div>
                  </div>
                );
              })}

            {/* Empty state */}
            {((activeTab === "grouping" &&
              (!column.cards || column.cards.length === 0)) ||
              (activeTab === "bridge" &&
                (!column.items || column.items.length === 0))) && (
              <div className="text-center text-sm text-slate-400 py-8">
                No assets
              </div>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}