"use client";

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

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

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

const shortcuts: ShortcutItem[] = [
  // 기본 작업
  { keys: ["Delete"], description: "선택한 요소 삭제", category: "기본 작업" },
  { keys: ["Ctrl", "C"], description: "요소 복사", category: "기본 작업" },
  { keys: ["Ctrl", "V"], description: "요소 붙여넣기", category: "기본 작업" },

  // 실행 취소/재실행 (구현 예정)
  { keys: ["Ctrl", "Z"], description: "실행 취소 (구현 예정)", category: "편집" },
  { keys: ["Ctrl", "Shift", "Z"], description: "재실행 (구현 예정)", category: "편집" },
];

const KeyBadge = ({ keyName }: { keyName: string }) => (
  <kbd className="inline-flex h-6 min-w-6 items-center justify-center rounded border border-gray-300 bg-gray-100 px-2 text-xs font-semibold text-gray-800 shadow-sm">
    {keyName}
  </kbd>
);

export function KeyboardShortcutsGuide({ isOpen, onClose }: KeyboardShortcutsGuideProps) {
  // 카테고리별로 그룹화
  const groupedShortcuts = shortcuts.reduce(
    (acc, shortcut) => {
      if (!acc[shortcut.category]) {
        acc[shortcut.category] = [];
      }
      acc[shortcut.category].push(shortcut);
      return acc;
    },
    {} as Record<string, ShortcutItem[]>,
  );

  // Mac OS 감지
  const isMac = typeof navigator !== "undefined" && navigator.platform.toUpperCase().indexOf("MAC") >= 0;

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
        <DialogHeader>
          <div className="flex items-center gap-2">
            <Keyboard className="h-5 w-5" />
            <DialogTitle className="text-base sm:text-lg">키보드 단축키</DialogTitle>
          </div>
          <DialogDescription className="text-xs sm:text-sm">
            대시보드 편집을 더 빠르게 할 수 있는 단축키 목록입니다
            {isMac && " (Mac에서는 Ctrl 대신 Cmd 키를 사용하세요)"}
          </DialogDescription>
        </DialogHeader>

        <div className="max-h-[60vh] space-y-6 overflow-y-auto pr-2">
          {Object.entries(groupedShortcuts).map(([category, categoryShortcuts]) => (
            <div key={category}>
              <h3 className="mb-3 text-sm font-semibold text-gray-900">{category}</h3>
              <div className="space-y-2">
                {categoryShortcuts.map((shortcut, index) => (
                  <div
                    key={`${category}-${index}`}
                    className="flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 p-3"
                  >
                    <span className="text-sm text-gray-700">{shortcut.description}</span>
                    <div className="flex items-center gap-1">
                      {shortcut.keys.map((key, keyIndex) => (
                        <React.Fragment key={keyIndex}>
                          <KeyBadge keyName={isMac && key === "Ctrl" ? "⌘" : key} />
                          {keyIndex < shortcut.keys.length - 1 && <span className="text-xs text-gray-400">+</span>}
                        </React.Fragment>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div className="mt-4 rounded-lg bg-blue-50 p-3 text-xs text-blue-800">
          <p className="font-medium">💡 팁</p>
          <p className="mt-1">입력 필드나 모달에서는 단축키가 자동으로 비활성화됩니다.</p>
        </div>
      </DialogContent>
    </Dialog>
  );
}