import React, { useState, useEffect } from "react";
import { useTableOptions } from "@/contexts/TableOptionsContext";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ScrollArea } from "@/components/ui/scroll-area";
import { GripVertical, Eye, EyeOff, Lock } from "lucide-react";
import { ColumnVisibility } from "@/types/table-options";

interface Props {
  isOpen: boolean;
  onClose: () => void;
}

export const ColumnVisibilityPanel: React.FC<Props> = ({ isOpen, onClose }) => {
  const { getTable, selectedTableId } = useTableOptions();
  const table = selectedTableId ? getTable(selectedTableId) : undefined;

  const [localColumns, setLocalColumns] = useState<ColumnVisibility[]>([]);
  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
  const [frozenColumnCount, setFrozenColumnCount] = useState<number>(0);

  // 테이블 정보 로드
  useEffect(() => {
    if (table) {
      setLocalColumns(
        table.columns.map((col) => ({
          columnName: col.columnName,
          visible: col.visible,
          width: col.width,
          order: 0,
        })),
      );
      // 현재 틀고정 컬럼 수 로드
      setFrozenColumnCount(table.frozenColumnCount ?? 0);
    }
  }, [table]);

  const handleVisibilityChange = (columnName: string, visible: boolean) => {
    setLocalColumns((prev) => prev.map((col) => (col.columnName === columnName ? { ...col, visible } : col)));
  };

  const handleWidthChange = (columnName: string, width: number) => {
    setLocalColumns((prev) => prev.map((col) => (col.columnName === columnName ? { ...col, width } : col)));
  };

  const moveColumn = (fromIndex: number, toIndex: number) => {
    const newColumns = [...localColumns];
    const [movedItem] = newColumns.splice(fromIndex, 1);
    newColumns.splice(toIndex, 0, movedItem);
    setLocalColumns(newColumns);
  };

  const handleDragStart = (index: number) => {
    setDraggedIndex(index);
  };

  const handleDragOver = (e: React.DragEvent, index: number) => {
    e.preventDefault();
    if (draggedIndex === null || draggedIndex === index) return;
    moveColumn(draggedIndex, index);
    setDraggedIndex(index);
  };

  const handleDragEnd = () => {
    setDraggedIndex(null);
  };

  const handleApply = () => {
    table?.onColumnVisibilityChange(localColumns);

    // 컬럼 순서 변경 콜백 호출
    if (table?.onColumnOrderChange) {
      const newOrder = localColumns.map((col) => col.columnName).filter((name) => name !== "__checkbox__");
      table.onColumnOrderChange(newOrder);
    }

    // 틀고정 컬럼 수 변경 콜백 호출 (현재 컬럼 상태도 함께 전달)
    if (table?.onFrozenColumnCountChange) {
      const updatedColumns = localColumns.map((col) => ({
        columnName: col.columnName,
        visible: col.visible,
      }));
      table.onFrozenColumnCountChange(frozenColumnCount, updatedColumns);
    }

    onClose();
  };

  const handleReset = () => {
    if (table) {
      setLocalColumns(
        table.columns.map((col) => ({
          columnName: col.columnName,
          visible: true,
          width: 150,
          order: 0,
        })),
      );
      setFrozenColumnCount(0);
    }
  };

  // 틀고정 컬럼 수 변경 핸들러
  const handleFrozenColumnCountChange = (value: string) => {
    const count = parseInt(value) || 0;
    // 최대값은 표시 가능한 컬럼 수
    const maxCount = localColumns.filter((col) => col.visible).length;
    setFrozenColumnCount(Math.min(Math.max(0, count), maxCount));
  };

  const visibleCount = localColumns.filter((col) => col.visible).length;

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-[95vw] sm:max-w-2xl">
        <DialogHeader>
          <DialogTitle className="text-base sm:text-lg">테이블 옵션</DialogTitle>
          <DialogDescription className="text-xs sm:text-sm">
            컬럼 표시/숨기기, 순서 변경, 너비 등을 설정할 수 있습니다. 모든 테두리를 드래그하여 크기를 조정할 수
            있습니다.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-3 sm:space-y-4">
          {/* 상태 표시 및 틀고정 설정 */}
          <div className="bg-muted/50 flex flex-col gap-3 rounded-lg border p-3 sm:flex-row sm:items-center sm:justify-between">
            <div className="flex items-center gap-4">
              <div className="text-muted-foreground text-xs sm:text-sm">
                {visibleCount}/{localColumns.length}개 컬럼 표시 중
              </div>

              {/* 틀고정 설정 */}
              <div className="flex items-center gap-2">
                <Lock className="text-muted-foreground h-4 w-4" />
                <Label className="text-muted-foreground text-xs whitespace-nowrap">틀고정:</Label>
                <Input
                  type="number"
                  value={frozenColumnCount}
                  onChange={(e) => handleFrozenColumnCountChange(e.target.value)}
                  className="h-7 w-16 text-xs sm:h-8 sm:w-20 sm:text-sm"
                  min={0}
                  max={visibleCount}
                  placeholder="0"
                />
                <span className="text-muted-foreground text-xs whitespace-nowrap">개 컬럼</span>
              </div>
            </div>

            <Button variant="ghost" size="sm" onClick={handleReset} className="h-7 text-xs">
              초기화
            </Button>
          </div>

          {/* 컬럼 리스트 */}
          <ScrollArea className="h-[300px] sm:h-[400px]">
            <div className="space-y-2 pr-4">
              {localColumns.map((col, index) => {
                const columnMeta = table?.columns.find((c) => c.columnName === col.columnName);
                // 표시 가능한 컬럼 중 몇 번째인지 계산 (틀고정 표시용)
                const visibleIndex = localColumns.slice(0, index + 1).filter((c) => c.visible).length;
                const isFrozen = col.visible && visibleIndex <= frozenColumnCount;

                return (
                  <div
                    key={col.columnName}
                    draggable
                    onDragStart={() => handleDragStart(index)}
                    onDragOver={(e) => handleDragOver(e, index)}
                    onDragEnd={handleDragEnd}
                    className={`flex cursor-move items-center gap-3 rounded-lg border p-3 transition-colors ${
                      isFrozen
                        ? "border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950/30"
                        : "bg-background hover:bg-muted/50"
                    }`}
                  >
                    {/* 드래그 핸들 */}
                    <GripVertical className="text-muted-foreground h-4 w-4 shrink-0" />

                    {/* 체크박스 */}
                    <Checkbox
                      checked={col.visible}
                      onCheckedChange={(checked) => handleVisibilityChange(col.columnName, checked as boolean)}
                    />

                    {/* 가시성/틀고정 아이콘 */}
                    {isFrozen ? (
                      <Lock className="h-4 w-4 shrink-0 text-blue-500" />
                    ) : col.visible ? (
                      <Eye className="text-primary h-4 w-4 shrink-0" />
                    ) : (
                      <EyeOff className="text-muted-foreground h-4 w-4 shrink-0" />
                    )}

                    {/* 컬럼명 */}
                    <div className="flex-1">
                      <div className="flex items-center gap-2">
                        <span className="text-xs font-medium sm:text-sm">{columnMeta?.columnLabel}</span>
                        {isFrozen && (
                          <span className="text-[10px] font-medium text-blue-600 dark:text-blue-400">(고정)</span>
                        )}
                      </div>
                      <div className="text-muted-foreground text-[10px] sm:text-xs">{col.columnName}</div>
                    </div>

                    {/* 너비 설정 */}
                    <div className="flex items-center gap-2">
                      <Label className="text-muted-foreground text-xs">너비:</Label>
                      <Input
                        type="number"
                        value={col.width || 150}
                        onChange={(e) => handleWidthChange(col.columnName, parseInt(e.target.value) || 150)}
                        className="h-7 w-16 text-xs sm:h-8 sm:w-20 sm:text-sm"
                        min={50}
                        max={500}
                      />
                    </div>
                  </div>
                );
              })}
            </div>
          </ScrollArea>
        </div>

        <DialogFooter className="gap-2 sm:gap-0">
          <Button variant="outline" onClick={onClose} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
            취소
          </Button>
          <Button onClick={handleApply} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
            저장
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};
