ERP-node/frontend/components/screen/toolbar/SlimToolbar.tsx

"use client";

import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Database,
  ArrowLeft,
  Save,
  Monitor,
  Smartphone,
  Tablet,
  ChevronDown,
  Settings,
  Grid3X3,
  Eye,
  EyeOff,
  Zap,
  Languages,
  Settings2,
  PanelLeft,
  PanelLeftClose,
  AlignStartVertical,
  AlignCenterVertical,
  AlignEndVertical,
  AlignStartHorizontal,
  AlignCenterHorizontal,
  AlignEndHorizontal,
  AlignHorizontalSpaceAround,
  AlignVerticalSpaceAround,
  RulerIcon,
  Tag,
  Keyboard,
  Equal,
} from "lucide-react";
import { ScreenResolution, SCREEN_RESOLUTIONS } from "@/types/screen";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";

interface GridSettings {
  columns: number;
  gap: number;
  padding: number;
  snapToGrid: boolean;
  showGrid: boolean;
  gridColor?: string;
  gridOpacity?: number;
}

type AlignMode = "left" | "centerX" | "right" | "top" | "centerY" | "bottom";
type DistributeDirection = "horizontal" | "vertical";
type MatchSizeMode = "width" | "height" | "both";

interface SlimToolbarProps {
  screenName?: string;
  tableName?: string;
  screenResolution?: ScreenResolution;
  onBack: () => void;
  onSave: () => void;
  isSaving?: boolean;
  onPreview?: () => void;
  onResolutionChange?: (resolution: ScreenResolution) => void;
  gridSettings?: GridSettings;
  onGridSettingsChange?: (settings: GridSettings) => void;
  onGenerateMultilang?: () => void;
  isGeneratingMultilang?: boolean;
  onOpenMultilangSettings?: () => void;
  // 패널 토글 기능
  isPanelOpen?: boolean;
  onTogglePanel?: () => void;
  // 정렬/배분/크기 기능
  selectedCount?: number;
  onAlign?: (mode: AlignMode) => void;
  onDistribute?: (direction: DistributeDirection) => void;
  onMatchSize?: (mode: MatchSizeMode) => void;
  onToggleLabels?: () => void;
  onShowShortcuts?: () => void;
}

export const SlimToolbar: React.FC<SlimToolbarProps> = ({
  screenName,
  tableName,
  screenResolution,
  onBack,
  onSave,
  isSaving = false,
  onPreview,
  onResolutionChange,
  gridSettings,
  onGridSettingsChange,
  onGenerateMultilang,
  isGeneratingMultilang = false,
  onOpenMultilangSettings,
  isPanelOpen = false,
  onTogglePanel,
  selectedCount = 0,
  onAlign,
  onDistribute,
  onMatchSize,
  onToggleLabels,
  onShowShortcuts,
}) => {
  // 사용자 정의 해상도 상태
  const [customWidth, setCustomWidth] = useState("");
  const [customHeight, setCustomHeight] = useState("");
  const [showCustomInput, setShowCustomInput] = useState(false);

  const getCategoryIcon = (category: string) => {
    switch (category) {
      case "desktop":
        return <Monitor className="h-4 w-4 text-blue-600" />;
      case "tablet":
        return <Tablet className="h-4 w-4 text-green-600" />;
      case "mobile":
        return <Smartphone className="h-4 w-4 text-purple-600" />;
      default:
        return <Monitor className="h-4 w-4 text-blue-600" />;
    }
  };

  const handleCustomResolution = () => {
    const width = parseInt(customWidth);
    const height = parseInt(customHeight);
    if (width > 0 && height > 0 && onResolutionChange) {
      const customResolution: ScreenResolution = {
        width,
        height,
        name: `사용자 정의 (${width}×${height})`,
        category: "custom",
      };
      onResolutionChange(customResolution);
      setShowCustomInput(false);
    }
  };

  const updateGridSetting = (key: keyof GridSettings, value: boolean) => {
    if (onGridSettingsChange && gridSettings) {
      onGridSettingsChange({
        ...gridSettings,
        [key]: value,
      });
    }
  };

  return (
    <div className="flex h-14 items-center justify-between border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white px-4 shadow-sm">
      {/* 좌측: 네비게이션 + 패널 토글 + 화면 정보 */}
      <div className="flex items-center space-x-4">
        <Button variant="ghost" size="sm" onClick={onBack} className="flex items-center space-x-2">
          <ArrowLeft className="h-4 w-4" />
          <span>목록으로</span>
        </Button>

        {onTogglePanel && <div className="h-6 w-px bg-gray-300" />}

        {/* 패널 토글 버튼 */}
        {onTogglePanel && (
          <Button
            variant={isPanelOpen ? "default" : "outline"}
            size="sm"
            onClick={onTogglePanel}
            className="flex items-center space-x-2"
            title="패널 열기/닫기 (P)"
          >
            {isPanelOpen ? (
              <PanelLeftClose className="h-4 w-4" />
            ) : (
              <PanelLeft className="h-4 w-4" />
            )}
            <span>패널</span>
          </Button>
        )}

        <div className="h-6 w-px bg-gray-300" />

        <div className="flex items-center space-x-3">
          <div>
            <h1 className="text-lg font-semibold text-gray-900">{screenName || "화면 설계"}</h1>
            {tableName && (
              <div className="mt-0.5 flex items-center space-x-1">
                <Database className="h-3 w-3 text-gray-500" />
                <span className="font-mono text-xs text-gray-500">{tableName}</span>
              </div>
            )}
          </div>
        </div>

        {/* 해상도 선택 드롭다운 */}
        {screenResolution && (
          <>
            <div className="h-6 w-px bg-gray-300" />
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <button className="flex items-center space-x-2 rounded-md bg-blue-50 px-3 py-1.5 transition-colors hover:bg-blue-100">
                  {getCategoryIcon(screenResolution.category || "desktop")}
                  <span className="text-sm font-medium text-blue-900">{screenResolution.name}</span>
                  <span className="text-xs text-blue-600">
                    ({screenResolution.width} × {screenResolution.height})
                  </span>
                  {onResolutionChange && <ChevronDown className="h-3 w-3 text-blue-600" />}
                </button>
              </DropdownMenuTrigger>
              {onResolutionChange && (
                <DropdownMenuContent align="start" className="w-64">
                  <DropdownMenuLabel className="text-xs text-gray-500">데스크톱</DropdownMenuLabel>
                  {SCREEN_RESOLUTIONS.filter((r) => r.category === "desktop").map((resolution) => (
                    <DropdownMenuItem
                      key={resolution.name}
                      onClick={() => onResolutionChange(resolution)}
                      className="flex items-center space-x-2"
                    >
                      <Monitor className="h-4 w-4 text-blue-600" />
                      <span className="flex-1">{resolution.name}</span>
                      <span className="text-xs text-gray-400">
                        {resolution.width}×{resolution.height}
                      </span>
                    </DropdownMenuItem>
                  ))}
                  <DropdownMenuSeparator />
                  <DropdownMenuLabel className="text-xs text-gray-500">태블릿</DropdownMenuLabel>
                  {SCREEN_RESOLUTIONS.filter((r) => r.category === "tablet").map((resolution) => (
                    <DropdownMenuItem
                      key={resolution.name}
                      onClick={() => onResolutionChange(resolution)}
                      className="flex items-center space-x-2"
                    >
                      <Tablet className="h-4 w-4 text-green-600" />
                      <span className="flex-1">{resolution.name}</span>
                      <span className="text-xs text-gray-400">
                        {resolution.width}×{resolution.height}
                      </span>
                    </DropdownMenuItem>
                  ))}
                  <DropdownMenuSeparator />
                  <DropdownMenuLabel className="text-xs text-gray-500">모바일</DropdownMenuLabel>
                  {SCREEN_RESOLUTIONS.filter((r) => r.category === "mobile").map((resolution) => (
                    <DropdownMenuItem
                      key={resolution.name}
                      onClick={() => onResolutionChange(resolution)}
                      className="flex items-center space-x-2"
                    >
                      <Smartphone className="h-4 w-4 text-purple-600" />
                      <span className="flex-1">{resolution.name}</span>
                      <span className="text-xs text-gray-400">
                        {resolution.width}×{resolution.height}
                      </span>
                    </DropdownMenuItem>
                  ))}
                  <DropdownMenuSeparator />
                  <DropdownMenuLabel className="text-xs text-gray-500">사용자 정의</DropdownMenuLabel>
                  <DropdownMenuItem
                    onClick={() => {
                      setCustomWidth(screenResolution.width.toString());
                      setCustomHeight(screenResolution.height.toString());
                      setShowCustomInput(true);
                    }}
                    className="flex items-center space-x-2"
                  >
                    <Settings className="h-4 w-4 text-gray-600" />
                    <span className="flex-1">사용자 정의...</span>
                  </DropdownMenuItem>
                </DropdownMenuContent>
              )}
            </DropdownMenu>

            {/* 사용자 정의 해상도 다이얼로그 */}
            <Dialog open={showCustomInput} onOpenChange={setShowCustomInput}>
              <DialogContent className="sm:max-w-[320px]">
                <DialogHeader>
                  <DialogTitle>사용자 정의 해상도</DialogTitle>
                </DialogHeader>
                <div className="grid grid-cols-2 gap-4 py-4">
                  <div className="space-y-2">
                    <Label htmlFor="customWidth" className="text-sm">너비 (px)</Label>
                    <Input
                      id="customWidth"
                      type="number"
                      value={customWidth}
                      onChange={(e) => setCustomWidth(e.target.value)}
                      placeholder="1920"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="customHeight" className="text-sm">높이 (px)</Label>
                    <Input
                      id="customHeight"
                      type="number"
                      value={customHeight}
                      onChange={(e) => setCustomHeight(e.target.value)}
                      placeholder="1080"
                    />
                  </div>
                </div>
                <DialogFooter>
                  <Button variant="outline" onClick={() => setShowCustomInput(false)}>
                    취소
                  </Button>
                  <Button onClick={handleCustomResolution}>
                    적용
                  </Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </>
        )}

        {/* 격자 설정 */}
        {gridSettings && onGridSettingsChange && (
          <>
            <div className="h-6 w-px bg-gray-300" />
            <div className="flex items-center space-x-2 rounded-md bg-gray-50 px-3 py-1.5">
              <Grid3X3 className="h-4 w-4 text-gray-600" />
              <div className="flex items-center space-x-3">
                <label className="flex cursor-pointer items-center space-x-1.5">
                  {gridSettings.showGrid ? (
                    <Eye className="h-3.5 w-3.5 text-primary" />
                  ) : (
                    <EyeOff className="h-3.5 w-3.5 text-gray-400" />
                  )}
                  <Checkbox
                    checked={gridSettings.showGrid}
                    onCheckedChange={(checked) => updateGridSetting("showGrid", checked as boolean)}
                    className="h-3.5 w-3.5"
                  />
                  <span className="text-xs text-gray-600">격자 표시</span>
                </label>
                <label className="flex cursor-pointer items-center space-x-1.5">
                  <Zap className={`h-3.5 w-3.5 ${gridSettings.snapToGrid ? "text-primary" : "text-gray-400"}`} />
                  <Checkbox
                    checked={gridSettings.snapToGrid}
                    onCheckedChange={(checked) => updateGridSetting("snapToGrid", checked as boolean)}
                    className="h-3.5 w-3.5"
                  />
                  <span className="text-xs text-gray-600">격자 스냅</span>
                </label>
              </div>
            </div>
          </>
        )}
      </div>

      {/* 중앙: 정렬/배분 도구 (다중 선택 시 표시) */}
      {selectedCount >= 2 && (onAlign || onDistribute || onMatchSize) && (
        <div className="flex items-center space-x-1 rounded-md bg-blue-50 px-2 py-1">
          {/* 정렬 */}
          {onAlign && (
            <>
              <span className="mr-1 text-xs font-medium text-blue-700">정렬</span>
              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("left")} title="좌측 정렬 (Alt+L)">
                <AlignStartVertical className="h-3.5 w-3.5" />
              </Button>
              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("centerX")} title="가로 중앙 (Alt+C)">
                <AlignCenterVertical className="h-3.5 w-3.5" />
              </Button>
              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("right")} title="우측 정렬 (Alt+R)">
                <AlignEndVertical className="h-3.5 w-3.5" />
              </Button>
              <div className="mx-0.5 h-4 w-px bg-blue-200" />
              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("top")} title="상단 정렬 (Alt+T)">
                <AlignStartHorizontal className="h-3.5 w-3.5" />
              </Button>
              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("centerY")} title="세로 중앙 (Alt+M)">
                <AlignCenterHorizontal className="h-3.5 w-3.5" />
              </Button>
              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("bottom")} title="하단 정렬 (Alt+B)">
                <AlignEndHorizontal className="h-3.5 w-3.5" />
              </Button>
            </>
          )}

          {/* 배분 (3개 이상 선택 시) */}
          {onDistribute && selectedCount >= 3 && (
            <>
              <div className="mx-1 h-4 w-px bg-blue-200" />
              <span className="mr-1 text-xs font-medium text-blue-700">배분</span>
              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onDistribute("horizontal")} title="가로 균등 배분 (Alt+H)">
                <AlignHorizontalSpaceAround className="h-3.5 w-3.5" />
              </Button>
              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onDistribute("vertical")} title="세로 균등 배분 (Alt+V)">
                <AlignVerticalSpaceAround className="h-3.5 w-3.5" />
              </Button>
            </>
          )}

          {/* 크기 맞추기 */}
          {onMatchSize && (
            <>
              <div className="mx-1 h-4 w-px bg-blue-200" />
              <span className="mr-1 text-xs font-medium text-blue-700">크기</span>
              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onMatchSize("width")} title="너비 맞추기 (Alt+W)">
                <RulerIcon className="h-3.5 w-3.5" />
              </Button>
              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onMatchSize("height")} title="높이 맞추기 (Alt+E)">
                <RulerIcon className="h-3.5 w-3.5 rotate-90" />
              </Button>
              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onMatchSize("both")} title="크기 모두 맞추기">
                <Equal className="h-3.5 w-3.5" />
              </Button>
            </>
          )}

          <div className="mx-1 h-4 w-px bg-blue-200" />
          <span className="text-xs text-blue-600">{selectedCount}개 선택</span>
        </div>
      )}

      {/* 우측: 버튼들 */}
      <div className="flex items-center space-x-2">
        {/* 라벨 토글 버튼 */}
        {onToggleLabels && (
          <Button
            variant="outline"
            size="sm"
            onClick={onToggleLabels}
            className="flex items-center space-x-1"
            title="라벨 일괄 표시/숨기기 (Alt+Shift+L)"
          >
            <Tag className="h-4 w-4" />
            <span>라벨</span>
          </Button>
        )}

        {/* 단축키 도움말 */}
        {onShowShortcuts && (
          <Button
            variant="ghost"
            size="icon"
            onClick={onShowShortcuts}
            className="h-9 w-9"
            title="단축키 도움말 (?)"
          >
            <Keyboard className="h-4 w-4" />
          </Button>
        )}

        {onPreview && (
          <Button variant="outline" onClick={onPreview} className="flex items-center space-x-2">
            <Eye className="h-4 w-4" />
            <span>POP 미리보기</span>
          </Button>
        )}
        {onGenerateMultilang && (
          <Button
            variant="outline"
            onClick={onGenerateMultilang}
            disabled={isGeneratingMultilang}
            className="flex items-center space-x-2"
            title="화면 라벨에 대한 다국어 키를 자동으로 생성합니다"
          >
            <Languages className="h-4 w-4" />
            <span>{isGeneratingMultilang ? "생성 중..." : "다국어 생성"}</span>
          </Button>
        )}
        {onOpenMultilangSettings && (
          <Button
            variant="outline"
            onClick={onOpenMultilangSettings}
            className="flex items-center space-x-2"
            title="다국어 키 연결 및 설정을 관리합니다"
          >
            <Settings2 className="h-4 w-4" />
            <span>다국어 설정</span>
          </Button>
        )}
        <Button onClick={onSave} disabled={isSaving} className="flex items-center space-x-2">
          <Save className="h-4 w-4" />
          <span>{isSaving ? "저장 중..." : "저장"}</span>
        </Button>
      </div>
    </div>
  );
};

export default SlimToolbar;