import React, { useState, useEffect } from 'react';
import { FolderPlus, FilePenLine, Trash2, X, AlertTriangle } from 'lucide-react';

// --- Create Folder Modal ---
interface CreateFolderModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: (name: string) => void;
}

export const CreateFolderModal: React.FC<CreateFolderModalProps> = ({ isOpen, onClose, onConfirm }) => {
  const [folderName, setFolderName] = useState('새 폴더');

  useEffect(() => {
    if (isOpen) {
        setFolderName('새 폴더');
        // Auto focus hack
        setTimeout(() => document.getElementById('new-folder-input')?.focus(), 50);
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-sm p-4">
      <div className="bg-white border border-slate-200 rounded-lg shadow-xl w-full max-w-sm animate-in fade-in zoom-in-95 duration-200">
        <div className="p-3 border-b border-slate-100 flex justify-between items-center bg-slate-50 rounded-t-lg">
          <h3 className="text-sm font-bold text-slate-800 flex items-center gap-2">
            <FolderPlus size={16} className="text-blue-500" /> 디렉토리 생성
          </h3>
          <button onClick={onClose}><X size={16} className="text-slate-400 hover:text-slate-600" /></button>
        </div>
        <div className="p-4 space-y-4">
          <div>
            <label className="block text-xs text-slate-500 mb-1">새 디렉토리 이름:</label>
            <input 
              id="new-folder-input"
              type="text" 
              value={folderName}
              onChange={(e) => setFolderName(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && onConfirm(folderName)}
              className="w-full bg-white border border-slate-300 rounded px-3 py-2 text-sm text-slate-800 focus:border-blue-500 focus:outline-none"
            />
          </div>
          <div className="flex justify-end gap-2">
            <button onClick={onClose} className="px-3 py-1.5 text-xs text-slate-600 hover:text-slate-900 bg-slate-100 hover:bg-slate-200 rounded">취소</button>
            <button onClick={() => onConfirm(folderName)} className="px-3 py-1.5 text-xs bg-blue-600 hover:bg-blue-500 text-white rounded shadow-md shadow-blue-500/20">확인</button>
          </div>
        </div>
      </div>
    </div>
  );
};

// --- Rename Modal ---
interface RenameModalProps {
  isOpen: boolean;
  currentName: string;
  onClose: () => void;
  onConfirm: (newName: string) => void;
}

export const RenameModal: React.FC<RenameModalProps> = ({ isOpen, currentName, onClose, onConfirm }) => {
  const [newName, setNewName] = useState('');

  useEffect(() => {
    if (isOpen) {
        setNewName(currentName);
        setTimeout(() => document.getElementById('rename-input')?.focus(), 50);
    }
  }, [isOpen, currentName]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-sm p-4">
      <div className="bg-white border border-slate-200 rounded-lg shadow-xl w-full max-w-sm animate-in fade-in zoom-in-95 duration-200">
        <div className="p-3 border-b border-slate-100 flex justify-between items-center bg-slate-50 rounded-t-lg">
          <h3 className="text-sm font-bold text-slate-800 flex items-center gap-2">
            <FilePenLine size={16} className="text-yellow-500" /> 이름 변경/이동
          </h3>
          <button onClick={onClose}><X size={16} className="text-slate-400 hover:text-slate-600" /></button>
        </div>
        <div className="p-4 space-y-4">
          <div>
            <label className="block text-xs text-slate-500 mb-1">현재 이름:</label>
            <div className="text-sm text-slate-600 bg-slate-50 p-2 rounded border border-slate-200 mb-3 select-all">{currentName}</div>
            
            <label className="block text-xs text-slate-500 mb-1">새 이름:</label>
            <input 
              id="rename-input"
              type="text" 
              value={newName}
              onChange={(e) => setNewName(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && onConfirm(newName)}
              className="w-full bg-white border border-slate-300 rounded px-3 py-2 text-sm text-slate-800 focus:border-blue-500 focus:outline-none"
            />
          </div>
          <div className="flex justify-end gap-2">
            <button onClick={onClose} className="px-3 py-1.5 text-xs text-slate-600 hover:text-slate-900 bg-slate-100 hover:bg-slate-200 rounded">취소</button>
            <button onClick={() => onConfirm(newName)} className="px-3 py-1.5 text-xs bg-blue-600 hover:bg-blue-500 text-white rounded shadow-md shadow-blue-500/20">확인</button>
          </div>
        </div>
      </div>
    </div>
  );
};

// --- Delete Modal ---
interface DeleteModalProps {
  isOpen: boolean;
  fileCount: number;
  fileNames: string[];
  onClose: () => void;
  onConfirm: () => void;
}

export const DeleteModal: React.FC<DeleteModalProps> = ({ isOpen, fileCount, fileNames, onClose, onConfirm }) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-sm p-4">
      <div className="bg-white border border-slate-200 rounded-lg shadow-xl w-full max-w-sm animate-in fade-in zoom-in-95 duration-200">
        <div className="p-3 border-b border-slate-100 flex justify-between items-center bg-slate-50 rounded-t-lg">
          <h3 className="text-sm font-bold text-slate-800 flex items-center gap-2">
            <Trash2 size={16} className="text-red-500" /> 파일 삭제
          </h3>
          <button onClick={onClose}><X size={16} className="text-slate-400 hover:text-slate-600" /></button>
        </div>
        <div className="p-4 space-y-4">
          <div className="flex gap-3">
             <div className="bg-red-50 p-2 rounded h-fit shrink-0">
               <AlertTriangle size={24} className="text-red-500" />
             </div>
             <div className="text-sm text-slate-600 min-w-0">
               <p className="mb-2">정말로 다음 {fileCount}개 항목을 삭제하시겠습니까?</p>
               <ul className="list-disc list-inside text-xs text-slate-500 max-h-32 overflow-y-auto bg-slate-50 p-2 rounded border border-slate-200 mb-2">
                 {fileNames.map((name, i) => (
                   <li key={i} className="truncate">{name}</li>
                 ))}
               </ul>
               <p className="text-xs text-red-500 font-semibold">이 작업은 되돌릴 수 없습니다.</p>
             </div>
          </div>
          <div className="flex justify-end gap-2">
            <button onClick={onClose} className="px-3 py-1.5 text-xs text-slate-600 hover:text-slate-900 bg-slate-100 hover:bg-slate-200 rounded">취소</button>
            <button onClick={onConfirm} className="px-3 py-1.5 text-xs bg-red-600 hover:bg-red-500 text-white rounded shadow-md shadow-red-500/20">삭제</button>
          </div>
        </div>
      </div>
    </div>
  );
};