import { createPortal } from 'react-dom';
import { X, Trash2 } from 'lucide-react';
import { NoteItem } from '@/types';

interface NoteViewModalProps {
  isOpen: boolean;
  note: NoteItem | null;
  onClose: () => void;
  onEdit: (note: NoteItem) => void;
  onDelete?: (note: NoteItem) => void;
}

export function NoteViewModal({ isOpen, note, onClose, onEdit, onDelete }: NoteViewModalProps) {
  if (!isOpen || !note) return null;

  const handleDelete = () => {
    if (window.confirm('정말 삭제하시겠습니까?')) {
      onDelete?.(note);
    }
  };

  return createPortal(
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
      <div className="dialog-container rounded-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden transition-all duration-300">
        {/* 헤더 */}
        <div className="dialog-header flex items-center justify-between px-6 py-4">
          <h2 className="dialog-title">{note.title || '제목 없음'}</h2>
          <button
            onClick={onClose}
            className="text-text-secondary hover:text-text-primary transition-colors"
          >
            <X className="w-6 h-6" />
          </button>
        </div>

        {/* 본문 - 메모 내용만 표시 */}
        <div className="overflow-y-auto max-h-[calc(80vh-140px)] p-6">
          <div className="bg-white/10 border border-white/20 rounded-lg p-4 text-white whitespace-pre-wrap min-h-[300px]">
            {note.description || '내용이 없습니다.'}
          </div>
        </div>

        {/* 하단 버튼 */}
        <div className="dialog-footer flex items-center justify-between px-6 py-4">
          <button
            onClick={handleDelete}
            className="px-4 py-2 rounded-lg bg-danger-500 hover:bg-danger-600 text-white transition-colors flex items-center gap-2"
          >
            <Trash2 className="w-4 h-4" />
            삭제
          </button>
          <div className="flex items-center gap-3">
            <button
              onClick={onClose}
              className="px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-colors"
            >
              닫기
            </button>
            <button
              onClick={() => {
                onClose();
                onEdit(note);
              }}
              className="px-4 py-2 bg-success-500 hover:bg-success-600 text-white rounded-lg transition-colors"
            >
              편집
            </button>
          </div>
        </div>
      </div>
    </div>,
    document.body
  );
}