// src/components/ui/Modal.tsx
'use client';

import { useEffect, useCallback } from 'react';
import { createPortal } from 'react-dom';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  message: string;
  confirmText?: string;
  cancelText?: string;
  type?: 'danger' | 'warning' | 'info' | 'success';
  isLoading?: boolean;
}

export default function Modal({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  confirmText = 'Confirm',
  cancelText = 'Cancel',
  type = 'danger',
  isLoading = false,
}: ModalProps) {
  
  const handleEscape = useCallback((e: KeyboardEvent) => {
    if (e.key === 'Escape' && isOpen && !isLoading) {
      onClose();
    }
  }, [isOpen, isLoading, onClose]);
  
  useEffect(() => {
    if (isOpen) {
      document.addEventListener('keydown', handleEscape);
      document.body.style.overflow = 'hidden';
    }
    
    return () => {
      document.removeEventListener('keydown', handleEscape);
      document.body.style.overflow = 'unset';
    };
  }, [isOpen, handleEscape]);
  
  if (!isOpen) return null;
  
  const getConfirmButtonStyle = () => {
    switch (type) {
      case 'danger':
        return { background: 'var(--color-danger)', color: 'white' };
      case 'warning':
        return { background: 'var(--color-warning)', color: 'white' };
      case 'success':
        return { background: 'var(--color-success)', color: 'white' };
      default:
        return { background: 'var(--color-cta)', color: 'white' };
    }
  };
  
  const getIcon = () => {
    switch (type) {
      case 'danger':
        return (
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <circle cx="12" cy="12" r="10"/>
            <line x1="12" y1="8" x2="12" y2="12"/>
            <line x1="12" y1="16" x2="12.01" y2="16"/>
          </svg>
        );
      case 'warning':
        return (
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M12 9v4M12 17h.01"/>
            <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"/>
          </svg>
        );
      case 'success':
        return (
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
            <polyline points="22 4 12 14.01 9 11.01"/>
          </svg>
        );
      default:
        return (
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <circle cx="12" cy="12" r="10"/>
            <line x1="12" y1="8" x2="12" y2="12"/>
            <line x1="12" y1="16" x2="12.01" y2="16"/>
          </svg>
        );
    }
  };
  
  const modalStyles = {
    overlay: {
      position: 'fixed' as const,
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      background: 'rgba(0, 0, 0, 0.6)',
      backdropFilter: 'blur(4px)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      zIndex: 1000,
      animation: 'fadeIn 0.2s ease-out',
    },
    container: {
      background: 'var(--color-surface)',
      borderRadius: 'var(--radius-card)',
      width: '90%',
      maxWidth: '450px',
      boxShadow: 'var(--shadow-card-xl)',
      animation: 'slideIn 0.2s ease-out',
      border: '1px solid var(--color-border)',
    },
    header: {
      padding: '20px 24px',
      borderBottom: '1px solid var(--color-border)',
      display: 'flex',
      alignItems: 'center',
      gap: '12px',
    },
    iconContainer: {
      width: '40px',
      height: '40px',
      borderRadius: '50%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      background: type === 'danger' ? 'var(--color-danger-light)' : 'var(--color-cta-light)',
      color: type === 'danger' ? 'var(--color-danger)' : 'var(--color-cta)',
    },
    title: {
      color: 'var(--color-text)',
      fontSize: '1.125rem',
      fontWeight: 600,
      margin: 0,
    },
    content: {
      padding: '24px',
    },
    message: {
      color: 'var(--color-text-secondary)',
      fontSize: '0.875rem',
      lineHeight: 1.5,
      margin: 0,
    },
    footer: {
      padding: '16px 24px',
      borderTop: '1px solid var(--color-border)',
      display: 'flex',
      justifyContent: 'flex-end',
      gap: '12px',
    },
    confirmButton: {
      ...getConfirmButtonStyle(),
      border: 'none',
      padding: '8px 20px',
      borderRadius: 'var(--radius-button)',
      fontSize: '0.875rem',
      fontWeight: 500,
      cursor: isLoading ? 'not-allowed' : 'pointer',
      opacity: isLoading ? 0.6 : 1,
      transition: 'all 0.2s ease',
    },
    cancelButton: {
      background: 'var(--color-surface-alt)',
      color: 'var(--color-text)',
      border: '1px solid var(--color-border)',
      padding: '8px 20px',
      borderRadius: 'var(--radius-button)',
      fontSize: '0.875rem',
      fontWeight: 500,
      cursor: isLoading ? 'not-allowed' : 'pointer',
      transition: 'all 0.2s ease',
    },
  };
  
  return createPortal(
    <div style={modalStyles.overlay} onClick={isLoading ? undefined : onClose}>
      <div style={modalStyles.container} onClick={(e) => e.stopPropagation()}>
        <div style={modalStyles.header}>
          <div style={modalStyles.iconContainer}>
            {getIcon()}
          </div>
          <h3 style={modalStyles.title}>{title}</h3>
        </div>
        
        <div style={modalStyles.content}>
          <p style={modalStyles.message}>{message}</p>
        </div>
        
        <div style={modalStyles.footer}>
          <button
            onClick={onClose}
            disabled={isLoading}
            style={modalStyles.cancelButton}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = 'var(--color-sidebar-hover)';
              e.currentTarget.style.color = 'white';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = 'var(--color-surface-alt)';
              e.currentTarget.style.color = 'var(--color-text)';
            }}
          >
            {cancelText}
          </button>
          <button
            onClick={onConfirm}
            disabled={isLoading}
            style={modalStyles.confirmButton}
            onMouseEnter={(e) => {
              e.currentTarget.style.opacity = '0.9';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.opacity = '1';
            }}
          >
            {isLoading ? 'Processing...' : confirmText}
          </button>
        </div>
      </div>
      
      <style jsx>{`
        @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
        
        @keyframes slideIn {
          from {
            transform: translateY(-20px);
            opacity: 0;
          }
          to {
            transform: translateY(0);
            opacity: 1;
          }
        }
      `}</style>
    </div>,
    document.body
  );
}