"use client";

import React, { useRef, useState, useEffect, useCallback } from "react";
import { X, RotateCw, ChevronDown } from "lucide-react";
import { useTabStore, selectTabs, selectActiveTabId, Tab } from "@/stores/tabStore";
import { menuScreenApi } from "@/lib/api/screen";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { cn } from "@/lib/utils";

const TAB_WIDTH = 180;
const TAB_GAP = 2;
const TAB_UNIT = TAB_WIDTH + TAB_GAP;
const OVERFLOW_BTN_WIDTH = 48;
const DRAG_THRESHOLD = 5;
const SETTLE_MS = 200;
const BAR_PAD_X = 8;

interface DragState {
  tabId: string;
  pointerId: number;
  startX: number;
  currentX: number;
  tabRect: DOMRect;
  fromIndex: number;
  targetIndex: number;
  activated: boolean;
  settling: boolean;
}

export function TabBar() {
  const tabs = useTabStore(selectTabs);
  const activeTabId = useTabStore(selectActiveTabId);
  const {
    switchTab, closeTab, refreshTab,
    closeOtherTabs, closeTabsToLeft, closeTabsToRight, closeAllTabs,
    updateTabOrder, openTab,
  } = useTabStore();

  const containerRef = useRef<HTMLDivElement>(null);
  const settleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const dragActiveRef = useRef(false);

  const [visibleCount, setVisibleCount] = useState(tabs.length);
  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; tabId: string } | null>(null);
  const [dragState, setDragState] = useState<DragState | null>(null);
  const [externalDragIdx, setExternalDragIdx] = useState<number | null>(null);

  dragActiveRef.current = !!dragState;

  useEffect(() => {
    return () => { if (settleTimer.current) clearTimeout(settleTimer.current); };
  }, []);

  // --- 오버플로우 계산 (드래그 중 재계산 방지) ---
  const recalcVisible = useCallback(() => {
    if (dragActiveRef.current) return;
    if (!containerRef.current) return;
    const w = containerRef.current.clientWidth;
    setVisibleCount(Math.max(1, Math.floor((w - OVERFLOW_BTN_WIDTH) / TAB_UNIT)));
  }, []);

  useEffect(() => {
    recalcVisible();
    const obs = new ResizeObserver(recalcVisible);
    if (containerRef.current) obs.observe(containerRef.current);
    return () => obs.disconnect();
  }, [recalcVisible]);

  useEffect(() => { recalcVisible(); }, [tabs.length, recalcVisible]);

  const visibleTabs = tabs.slice(0, visibleCount);
  const overflowTabs = tabs.slice(visibleCount);
  const hasOverflow = overflowTabs.length > 0;

  const activeInOverflow = activeTabId && overflowTabs.some((t) => t.id === activeTabId);
  let displayVisible = visibleTabs;
  let displayOverflow = overflowTabs;

  if (activeInOverflow && activeTabId) {
    const activeTab = tabs.find((t) => t.id === activeTabId)!;
    displayVisible = [...visibleTabs.slice(0, -1), activeTab];
    displayOverflow = overflowTabs.filter((t) => t.id !== activeTabId);
    if (visibleTabs.length > 0) {
      displayOverflow = [visibleTabs[visibleTabs.length - 1], ...displayOverflow];
    }
  }

  // ============================================================
  // 사이드바 -> 탭 바 드롭 (네이티브 DnD + 삽입 위치 애니메이션)
  // ============================================================

  const resolveMenuAndOpenTab = async (
    menuName: string, menuObjid: string | number, url: string, insertIndex?: number,
  ) => {
    const numericObjid = typeof menuObjid === "string" ? parseInt(menuObjid) : menuObjid;
    try {
      const screens = await menuScreenApi.getScreensByMenu(numericObjid);
      if (screens.length > 0) {
        openTab(
          { type: "screen", title: menuName, screenId: screens[0].screenId, menuObjid: numericObjid },
          insertIndex,
        );
        return;
      }
    } catch { /* ignore */ }
    if (url && url !== "#") {
      openTab({ type: "admin", title: menuName, adminUrl: url }, insertIndex);
    }
  };

  const handleBarDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = "copy";
    const bar = containerRef.current?.getBoundingClientRect();
    if (bar) {
      let idx = Math.round((e.clientX - bar.left - BAR_PAD_X) / TAB_UNIT);
      idx = Math.max(0, Math.min(idx, displayVisible.length));
      setExternalDragIdx(idx);
    }
  };

  const handleBarDragLeave = (e: React.DragEvent) => {
    if (!containerRef.current?.contains(e.relatedTarget as Node)) {
      setExternalDragIdx(null);
    }
  };

  const handleBarDrop = (e: React.DragEvent) => {
    e.preventDefault();
    const insertIdx = externalDragIdx ?? undefined;
    setExternalDragIdx(null);

    const pending = e.dataTransfer.getData("application/tab-menu-pending");
    if (pending) {
      try {
        const { menuName, menuObjid, url } = JSON.parse(pending);
        resolveMenuAndOpenTab(menuName, menuObjid, url, insertIdx);
      } catch { /* ignore */ }
      return;
    }
    const menuData = e.dataTransfer.getData("application/tab-menu");
    if (menuData && menuData.length > 2) {
      try { openTab(JSON.parse(menuData), insertIdx); } catch { /* ignore */ }
    }
  };

  // ============================================================
  // 탭 드래그 (Pointer Events) - 임계값 + settling 애니메이션
  // ============================================================

  const calcTarget = useCallback(
    (clientX: number): number => {
      const bar = containerRef.current?.getBoundingClientRect();
      if (!bar) return 0;
      let idx = Math.round((clientX - bar.left - BAR_PAD_X) / TAB_UNIT);
      return Math.max(0, Math.min(idx, displayVisible.length - 1));
    },
    [displayVisible.length],
  );

  const handlePointerDown = (e: React.PointerEvent, tabId: string, idx: number) => {
    if ((e.target as HTMLElement).closest("button")) return;
    if (dragState?.settling) return;

    e.preventDefault();
    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);

    setDragState({
      tabId,
      pointerId: e.pointerId,
      startX: e.clientX,
      currentX: e.clientX,
      tabRect: (e.currentTarget as HTMLElement).getBoundingClientRect(),
      fromIndex: idx,
      targetIndex: idx,
      activated: false,
      settling: false,
    });
  };

  const handlePointerMove = useCallback(
    (e: React.PointerEvent) => {
      if (!dragState || dragState.settling) return;
      const bar = containerRef.current?.getBoundingClientRect();
      if (!bar) return;

      const clampedX = Math.max(bar.left, Math.min(e.clientX, bar.right));

      if (!dragState.activated) {
        if (Math.abs(clampedX - dragState.startX) < DRAG_THRESHOLD) return;
        setDragState((p) =>
          p ? { ...p, activated: true, currentX: clampedX, targetIndex: calcTarget(clampedX) } : null,
        );
        return;
      }

      setDragState((p) =>
        p ? { ...p, currentX: clampedX, targetIndex: calcTarget(clampedX) } : null,
      );
    },
    [dragState, calcTarget],
  );

  const handlePointerUp = useCallback(
    (e: React.PointerEvent) => {
      if (!dragState || dragState.settling) return;
      (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);

      // 임계값 미달 → 클릭으로 처리
      if (!dragState.activated) {
        switchTab(dragState.tabId);
        setDragState(null);
        return;
      }

      const { fromIndex, targetIndex, tabId } = dragState;

      // settling 시작: 고스트가 목표(또는 원래) 슬롯으로 부드럽게 복귀
      setDragState((p) => (p ? { ...p, settling: true } : null));

      if (targetIndex === fromIndex) {
        // 이동 없음: 고스트가 원래 위치로 애니메이션 후 정리
        settleTimer.current = setTimeout(() => setDragState(null), SETTLE_MS + 30);
        return;
      }

      // 실제 배열 인덱스 계산 (setTimeout 전에 캡처)
      const actualFrom = tabs.findIndex((t) => t.id === tabId);
      const tgtTab = displayVisible[targetIndex];
      const actualTo = tgtTab ? tabs.findIndex((t) => t.id === tgtTab.id) : actualFrom;

      settleTimer.current = setTimeout(() => {
        setDragState(null);
        if (actualFrom !== -1 && actualTo !== -1 && actualFrom !== actualTo) {
          updateTabOrder(actualFrom, actualTo);
        }
      }, SETTLE_MS + 30);
    },
    [dragState, tabs, displayVisible, switchTab, updateTabOrder],
  );

  // ============================================================
  // 스타일 계산
  // ============================================================

  const getTabAnimStyle = (tabId: string, index: number): React.CSSProperties => {
    // 사이드바 드래그 호버: 삽입 지점 이후 탭이 오른쪽으로 shift
    if (externalDragIdx !== null && !dragState) {
      return {
        transform: index >= externalDragIdx ? `translateX(${TAB_UNIT}px)` : "none",
        transition: `transform ${SETTLE_MS}ms cubic-bezier(0.25, 1, 0.5, 1)`,
      };
    }

    // 탭 드래그 미활성화 → 기본
    if (!dragState || !dragState.activated) return {};

    const { fromIndex, targetIndex, tabId: draggedId } = dragState;

    if (tabId === draggedId) {
      return { opacity: 0, transition: "none" };
    }

    let shift = 0;
    if (fromIndex < targetIndex) {
      if (index > fromIndex && index <= targetIndex) shift = -TAB_UNIT;
    } else if (fromIndex > targetIndex) {
      if (index >= targetIndex && index < fromIndex) shift = TAB_UNIT;
    }

    return {
      transform: shift !== 0 ? `translateX(${shift}px)` : "none",
      transition: `transform ${SETTLE_MS}ms cubic-bezier(0.25, 1, 0.5, 1)`,
    };
  };

  const getGhostStyle = (): React.CSSProperties | null => {
    if (!dragState || !dragState.activated) return null;
    const bar = containerRef.current?.getBoundingClientRect();
    if (!bar) return null;

    const base: React.CSSProperties = {
      position: "fixed",
      top: dragState.tabRect.top,
      width: TAB_WIDTH,
      height: dragState.tabRect.height,
      zIndex: 100,
      pointerEvents: "none",
      opacity: 0.9,
    };

    if (dragState.settling) {
      return {
        ...base,
        left: bar.left + BAR_PAD_X + dragState.targetIndex * TAB_UNIT,
        transition: `left ${SETTLE_MS}ms cubic-bezier(0.25, 1, 0.5, 1)`,
      };
    }

    const offsetX = dragState.currentX - dragState.startX;
    const rawLeft = dragState.tabRect.left + offsetX;
    return {
      ...base,
      left: Math.max(bar.left, Math.min(rawLeft, bar.right - TAB_WIDTH)),
      transition: "none",
    };
  };

  const ghostStyle = getGhostStyle();
  const draggedTab = dragState ? tabs.find((t) => t.id === dragState.tabId) : null;

  // ============================================================
  // 우클릭 컨텍스트 메뉴
  // ============================================================

  const handleContextMenu = (e: React.MouseEvent, tabId: string) => {
    e.preventDefault();
    setContextMenu({ x: e.clientX, y: e.clientY, tabId });
  };

  useEffect(() => {
    if (!contextMenu) return;
    const close = () => setContextMenu(null);
    window.addEventListener("click", close);
    window.addEventListener("scroll", close);
    return () => {
      window.removeEventListener("click", close);
      window.removeEventListener("scroll", close);
    };
  }, [contextMenu]);

  // ============================================================
  // 렌더링
  // ============================================================

  const renderTab = (tab: Tab, displayIndex: number) => {
    const isActive = tab.id === activeTabId;
    const animStyle = getTabAnimStyle(tab.id, displayIndex);

    return (
      <div
        key={tab.id}
        onPointerDown={(e) => handlePointerDown(e, tab.id, displayIndex)}
        onPointerMove={handlePointerMove}
        onPointerUp={handlePointerUp}
        onContextMenu={(e) => handleContextMenu(e, tab.id)}
        className={cn(
          "group relative flex h-7 shrink-0 cursor-pointer items-center gap-0.5 rounded-t-md border border-b-0 px-3 select-none",
          isActive
            ? "border-border bg-white text-foreground z-10 mb-[-1px] h-[30px]"
            : "border-transparent bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground",
        )}
        style={{ width: TAB_WIDTH, touchAction: "none", ...animStyle }}
        title={tab.title}
      >
        <span className="min-w-0 flex-1 truncate text-[11px] font-medium">{tab.title}</span>

        <div className="flex shrink-0 items-center">
          {isActive && (
            <button
              onClick={(e) => { e.stopPropagation(); refreshTab(tab.id); }}
              className="text-muted-foreground hover:bg-accent hover:text-foreground flex h-4 w-4 items-center justify-center rounded-sm transition-colors"
            >
              <RotateCw className="h-2.5 w-2.5" />
            </button>
          )}
          <button
            onClick={(e) => { e.stopPropagation(); closeTab(tab.id); }}
            className={cn(
              "text-muted-foreground hover:bg-destructive/10 hover:text-destructive flex h-4 w-4 items-center justify-center rounded-sm transition-colors",
              !isActive && "opacity-0 group-hover:opacity-100",
            )}
          >
            <X className="h-2.5 w-2.5" />
          </button>
        </div>
      </div>
    );
  };

  if (tabs.length === 0) return null;

  return (
    <>
      <div
        ref={containerRef}
        className="border-border bg-muted/30 relative flex h-[33px] shrink-0 items-end gap-[2px] overflow-hidden px-1.5"
        onDragOver={handleBarDragOver}
        onDragLeave={handleBarDragLeave}
        onDrop={handleBarDrop}
      >
        <div className="border-border pointer-events-none absolute inset-x-0 bottom-0 z-0 border-b" />
        {displayVisible.map((tab, i) => renderTab(tab, i))}

        {hasOverflow && (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button className="bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground flex h-7 shrink-0 items-center gap-0.5 rounded-t-md border border-b-0 border-transparent px-2 text-[11px] font-medium transition-colors">
                +{displayOverflow.length}
                <ChevronDown className="h-2.5 w-2.5" />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="max-h-[300px] overflow-y-auto">
              {displayOverflow.map((tab) => (
                <DropdownMenuItem key={tab.id} onClick={() => switchTab(tab.id)} className="flex items-center justify-between gap-2">
                  <span className="min-w-0 flex-1 truncate text-xs">{tab.title}</span>
                  <button
                    onClick={(e) => { e.stopPropagation(); closeTab(tab.id); }}
                    className="hover:bg-destructive/10 hover:text-destructive flex h-4 w-4 shrink-0 items-center justify-center rounded-sm"
                  >
                    <X className="h-3 w-3" />
                  </button>
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        )}
      </div>

      {/* 드래그 고스트 */}
      {ghostStyle && draggedTab && (
        <div
          style={ghostStyle}
          className="border-primary/50 bg-background rounded-t-md border border-b-0 px-3 shadow-lg"
        >
          <div className="flex h-full items-center">
            <span className="truncate text-[11px] font-medium">{draggedTab.title}</span>
          </div>
        </div>
      )}

      {/* 우클릭 컨텍스트 메뉴 */}
      {contextMenu && (
        <div
          className="border-border bg-popover fixed z-50 min-w-[180px] rounded-md border p-1 shadow-md"
          style={{ left: contextMenu.x, top: contextMenu.y }}
        >
          <ContextMenuItem label="새로고침" onClick={() => { refreshTab(contextMenu.tabId); setContextMenu(null); }} />
          <div className="bg-border my-1 h-px" />
          <ContextMenuItem label="왼쪽 탭 닫기" onClick={() => { closeTabsToLeft(contextMenu.tabId); setContextMenu(null); }} />
          <ContextMenuItem label="오른쪽 탭 닫기" onClick={() => { closeTabsToRight(contextMenu.tabId); setContextMenu(null); }} />
          <ContextMenuItem label="다른 탭 모두 닫기" onClick={() => { closeOtherTabs(contextMenu.tabId); setContextMenu(null); }} />
          <div className="bg-border my-1 h-px" />
          <ContextMenuItem label="모든 탭 닫기" onClick={() => { closeAllTabs(); setContextMenu(null); }} destructive />
        </div>
      )}
    </>
  );
}

function ContextMenuItem({ label, onClick, destructive }: { label: string; onClick: () => void; destructive?: boolean }) {
  return (
    <button
      onClick={onClick}
      className={cn(
        "flex w-full items-center rounded-sm px-2 py-1.5 text-xs transition-colors",
        destructive ? "text-destructive hover:bg-destructive/10" : "text-foreground hover:bg-accent",
      )}
    >
      {label}
    </button>
  );
}
