"use client";

import React from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";

interface ShortcutItem {
  keys: string[];
  description: string;
}

interface ShortcutGroup {
  title: string;
  shortcuts: ShortcutItem[];
}

const shortcutGroups: ShortcutGroup[] = [
  {
    title: "기본 조작",
    shortcuts: [
      { keys: ["Ctrl", "S"], description: "레이아웃 저장" },
      { keys: ["Ctrl", "Z"], description: "실행취소" },
      { keys: ["Ctrl", "Y"], description: "다시실행" },
      { keys: ["Ctrl", "A"], description: "전체 선택" },
      { keys: ["Delete"], description: "선택 삭제" },
      { keys: ["Esc"], description: "선택 해제" },
    ],
  },
  {
    title: "복사/붙여넣기",
    shortcuts: [
      { keys: ["Ctrl", "C"], description: "컴포넌트 복사" },
      { keys: ["Ctrl", "V"], description: "컴포넌트 붙여넣기" },
    ],
  },
  {
    title: "그룹 관리",
    shortcuts: [
      { keys: ["Ctrl", "G"], description: "그룹 생성" },
      { keys: ["Ctrl", "Shift", "G"], description: "그룹 해제" },
    ],
  },
  {
    title: "이동 (Nudge)",
    shortcuts: [
      { keys: ["Arrow"], description: "1px 이동" },
      { keys: ["Shift", "Arrow"], description: "10px 이동" },
    ],
  },
  {
    title: "정렬 (다중 선택 시)",
    shortcuts: [
      { keys: ["Alt", "L"], description: "좌측 정렬" },
      { keys: ["Alt", "R"], description: "우측 정렬" },
      { keys: ["Alt", "C"], description: "가로 중앙 정렬" },
      { keys: ["Alt", "T"], description: "상단 정렬" },
      { keys: ["Alt", "B"], description: "하단 정렬" },
      { keys: ["Alt", "M"], description: "세로 중앙 정렬" },
    ],
  },
  {
    title: "배분/크기 (다중 선택 시)",
    shortcuts: [
      { keys: ["Alt", "H"], description: "가로 균등 배분" },
      { keys: ["Alt", "V"], description: "세로 균등 배분" },
      { keys: ["Alt", "W"], description: "너비 맞추기" },
      { keys: ["Alt", "E"], description: "높이 맞추기" },
    ],
  },
  {
    title: "보기/탐색",
    shortcuts: [
      { keys: ["Space", "Drag"], description: "캔버스 팬(이동)" },
      { keys: ["Wheel"], description: "줌 인/아웃" },
      { keys: ["P"], description: "패널 열기/닫기" },
      { keys: ["Alt", "Shift", "L"], description: "라벨 일괄 표시/숨기기" },
      { keys: ["?"], description: "단축키 도움말" },
    ],
  },
];

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

export const KeyboardShortcutsModal: React.FC<KeyboardShortcutsModalProps> = ({
  isOpen,
  onClose,
}) => {
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="text-base sm:text-lg">
            키보드 단축키
          </DialogTitle>
          <DialogDescription className="text-xs sm:text-sm">
            화면 디자이너에서 사용할 수 있는 단축키 목록입니다. Mac에서는 Ctrl 대신 Cmd를 사용합니다.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-5">
          {shortcutGroups.map((group) => (
            <div key={group.title}>
              <h3 className="text-sm font-semibold text-foreground mb-2">
                {group.title}
              </h3>
              <div className="space-y-1">
                {group.shortcuts.map((shortcut, idx) => (
                  <div
                    key={idx}
                    className="flex items-center justify-between rounded-md px-3 py-1.5 hover:bg-muted/50 transition-colors"
                  >
                    <span className="text-sm text-muted-foreground">
                      {shortcut.description}
                    </span>
                    <div className="flex items-center gap-1">
                      {shortcut.keys.map((key, kidx) => (
                        <React.Fragment key={kidx}>
                          {kidx > 0 && (
                            <span className="text-xs text-muted-foreground">+</span>
                          )}
                          <kbd className="inline-flex h-6 min-w-[24px] items-center justify-center rounded border border-border bg-muted px-1.5 font-mono text-xs text-muted-foreground shadow-sm">
                            {key}
                          </kbd>
                        </React.Fragment>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </DialogContent>
    </Dialog>
  );
};