import { useEffect } from 'react'
import { X } from 'lucide-react'
import Button from './Button'

// General-purpose modal — replaces ConfirmModal and can wrap any content.
//
// Usage (confirm pattern):
//   <Modal title="Διαγραφή" onClose={onCancel}>
//     <p>Θέλετε σίγουρα να διαγράψετε αυτό το στοιχείο;</p>
//     <Modal.Footer>
//       <Button variant="secondary" onClick={onCancel}>Ακύρωση</Button>
//       <Button variant="danger" onClick={onConfirm}>Διαγραφή</Button>
//     </Modal.Footer>
//   </Modal>

export default function Modal({ title, onClose, children, footer, maxWidth = 'max-w-sm', className = '', tabs = null, activeTab = null, onTabChange = null }) {
  // Close on Escape
  useEffect(() => {
    function handler(e) {
      if (e.key === 'Escape') onClose?.()
    }
    document.addEventListener('keydown', handler)
    return () => document.removeEventListener('keydown', handler)
  }, [onClose])

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
      onMouseDown={(e) => { if (e.target === e.currentTarget) onClose?.() }}
    >
      <div className={`relative w-full ${maxWidth} rounded-xl border border-slate-200 bg-white shadow-xl flex flex-col ${className}`}
        style={{ maxHeight: 'calc(100vh - 2rem)' }}>
        {/* Header */}
        {title && (
          <div className="flex items-center justify-between border-b border-slate-100 px-5 py-4 shrink-0">
            <h2 className="text-[15px] font-semibold text-slate-900">{title}</h2>
            {onClose && (
              <button
                onClick={onClose}
                className="rounded-md p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600"
              >
                <X className="h-4 w-4" />
              </button>
            )}
          </div>
        )}

        {/* Tab bar */}
        {tabs && (
          <div className="flex border-b border-slate-100 px-5 shrink-0 gap-1">
            {tabs.map(tab => (
              <button
                key={tab.key}
                type="button"
                onClick={() => onTabChange?.(tab.key)}
                className={`px-3 py-2.5 text-[12px] font-medium border-b-2 transition-colors -mb-px ${
                  activeTab === tab.key
                    ? 'border-sky-500 text-sky-700'
                    : 'border-transparent text-slate-500 hover:text-slate-700'
                }`}
              >
                {tab.label}
              </button>
            ))}
          </div>
        )}

        {/* Body — scrollable */}
        <div className="px-5 py-4 text-[13px] text-slate-700 overflow-y-auto flex-1 min-h-0">
          {children}
        </div>

        {/* Footer — fixed outside scroll area when provided via prop */}
        {footer && (
          <div className="shrink-0 border-t border-slate-100 px-5 py-3 flex items-center justify-end gap-2">
            {footer}
          </div>
        )}
      </div>
    </div>
  )
}

// Footer helper — for modals without tabs (renders inline, modal doesn't scroll)
function ModalFooter({ children }) {
  return (
    <div className="flex items-center justify-end gap-2 border-t border-slate-100 pt-4 mt-2">
      {children}
    </div>
  )
}

Modal.Footer = ModalFooter

// Convenience: ConfirmModal wrapping Modal for the most common pattern
export function ConfirmModal({
  title,
  message,
  confirmLabel = 'Επιβεβαίωση',
  confirmVariant = 'danger',
  onConfirm,
  onCancel,
}) {
  return (
    <Modal title={title} onClose={onCancel}>
      {message && <p className="text-[13px] text-slate-600">{message}</p>}
      <Modal.Footer>
        <Button variant="secondary" onClick={onCancel}>Ακύρωση</Button>
        <Button variant={confirmVariant} onClick={onConfirm}>{confirmLabel}</Button>
      </Modal.Footer>
    </Modal>
  )
}
