import { useEffect } from 'react'
import { createPortal } from 'react-dom'
import { X } from 'lucide-react'

const SIZE_CLASSES = {
  sm: 'max-w-md',
  md: 'max-w-lg',
  lg: 'max-w-2xl',
  xl: 'max-w-4xl',
}

export default function TabbedModal({
  onClose,
  size = 'md',
  header,
  tabs = [],
  activeTab,
  onTabChange,
  footer,
  children,
}) {
  useEffect(() => {
    document.body.style.overflow = 'hidden'
    return () => { document.body.style.overflow = '' }
  }, [])

  return createPortal(
    <div className="fixed inset-0 z-[9999] flex items-start justify-center pt-[5vh] px-4">
      <div className="fixed inset-0 bg-black/40 backdrop-blur-sm animate-backdrop-in" onClick={onClose} />

      <div className={`relative bg-white rounded-2xl shadow-2xl w-full ${SIZE_CLASSES[size] || SIZE_CLASSES.md} max-h-[90vh] flex flex-col animate-scale-in`}>
        {/* Header */}
        <div className="shrink-0">
          <div className="px-6 pt-5 pb-3">
            <div className="flex items-start justify-between gap-4">
              <div className="flex-1 min-w-0">
                {header}
              </div>
              <button
                onClick={onClose}
                className="p-2 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors shrink-0 -mt-1 -me-1"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
          </div>

          {/* Tabs */}
          {tabs.length > 0 && (
            <div className="flex gap-0 px-6 border-b border-border overflow-x-auto">
              {tabs.map(tab => {
                const TabIcon = tab.icon
                return (
                  <button
                    key={tab.key}
                    onClick={() => onTabChange(tab.key)}
                    className={`relative flex items-center gap-2 px-4 py-3 text-[13px] font-medium whitespace-nowrap transition-colors ${
                      activeTab === tab.key
                        ? 'text-brand-primary'
                        : 'text-text-tertiary hover:text-text-secondary'
                    }`}
                  >
                    {TabIcon && <TabIcon className="w-4 h-4" />}
                    {tab.label}
                    {tab.badge > 0 && (
                      <span className={`text-[10px] px-1.5 py-px rounded-full font-medium leading-tight ${
                        activeTab === tab.key ? 'bg-brand-primary/10 text-brand-primary' : 'bg-surface-tertiary text-text-tertiary'
                      }`}>
                        {tab.badge}
                      </span>
                    )}
                    {activeTab === tab.key && (
                      <span className="absolute bottom-0 inset-x-1 h-0.5 bg-brand-primary rounded-full" />
                    )}
                  </button>
                )
              })}
            </div>
          )}
        </div>

        {/* Body */}
        <div className="flex-1 overflow-y-auto">
          {children}
        </div>

        {/* Footer */}
        {footer && (
          <div className="border-t border-border px-6 py-3.5 flex items-center justify-between shrink-0 rounded-b-2xl bg-white">
            {footer}
          </div>
        )}
      </div>
    </div>,
    document.body
  )
}
