marketing-app/client/src/components/PortalSelect.jsx

import { useState, useRef, useEffect, useCallback } from 'react'
import { createPortal } from 'react-dom'
import { ChevronDown, Check } from 'lucide-react'

/**
 * Portal-based select dropdown that renders options outside any overflow/stacking context.
 * Drop-in replacement for <select> inside SlidePanel/TabbedModal/Modal.
 *
 * Props:
 *  value        - current value
 *  onChange     - (value) => void
 *  options      - [{ value, label }] or children-based (fallback to native if no options)
 *  placeholder  - text when no value selected
 *  className    - additional classes on the trigger button
 *  disabled     - boolean
 */
export default function PortalSelect({ value, onChange, options = [], placeholder = '—', className = '', disabled = false }) {
  const [open, setOpen] = useState(false)
  const triggerRef = useRef(null)
  const dropdownRef = useRef(null)
  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 })

  const selectedOption = options.find(o => String(o.value) === String(value))
  const displayText = selectedOption?.label || placeholder

  const updatePosition = useCallback(() => {
    if (!triggerRef.current) return
    const rect = triggerRef.current.getBoundingClientRect()
    const spaceBelow = window.innerHeight - rect.bottom
    const dropdownHeight = Math.min(options.length * 32 + 8, 240)
    const showAbove = spaceBelow < dropdownHeight && rect.top > dropdownHeight

    setPos({
      top: showAbove ? rect.top - dropdownHeight - 4 : rect.bottom + 4,
      left: rect.left,
      width: Math.max(rect.width, 160),
    })
  }, [options.length])

  const handleOpen = () => {
    if (disabled) return
    updatePosition()
    setOpen(true)
  }

  const handleSelect = (val) => {
    onChange(val)
    setOpen(false)
  }

  // Close on outside click
  useEffect(() => {
    if (!open) return
    const handleClick = (e) => {
      if (triggerRef.current?.contains(e.target)) return
      if (dropdownRef.current?.contains(e.target)) return
      setOpen(false)
    }
    const handleEsc = (e) => { if (e.key === 'Escape') setOpen(false) }
    const handleScroll = () => updatePosition()

    document.addEventListener('mousedown', handleClick)
    document.addEventListener('keydown', handleEsc)
    window.addEventListener('scroll', handleScroll, true)
    return () => {
      document.removeEventListener('mousedown', handleClick)
      document.removeEventListener('keydown', handleEsc)
      window.removeEventListener('scroll', handleScroll, true)
    }
  }, [open, updatePosition])

  return (
    <>
      <button
        ref={triggerRef}
        type="button"
        onClick={handleOpen}
        disabled={disabled}
        className={`flex items-center justify-between gap-1 text-start ${className} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
      >
        <span className={`truncate ${selectedOption ? '' : 'text-text-tertiary'}`}>{displayText}</span>
        <ChevronDown className={`w-3 h-3 shrink-0 text-text-tertiary transition-transform ${open ? 'rotate-180' : ''}`} />
      </button>

      {open && createPortal(
        <div
          ref={dropdownRef}
          className="fixed z-[99999] bg-surface border border-border rounded-lg shadow-lg overflow-y-auto animate-scale-in"
          style={{ top: pos.top, left: pos.left, width: pos.width, maxHeight: 240 }}
        >
          {options.map(opt => {
            const isSelected = String(opt.value) === String(value)
            return (
              <button
                key={opt.value}
                type="button"
                onClick={() => handleSelect(opt.value)}
                className={`w-full flex items-center gap-2 px-3 py-1.5 text-xs text-start transition-colors ${
                  isSelected
                    ? 'bg-brand-primary/10 text-brand-primary font-medium'
                    : 'text-text-primary hover:bg-surface-secondary'
                }`}
              >
                <span className="flex-1 truncate">{opt.label}</span>
                {isSelected && <Check className="w-3 h-3 shrink-0" />}
              </button>
            )
          })}
          {options.length === 0 && (
            <div className="px-3 py-2 text-xs text-text-tertiary text-center">—</div>
          )}
        </div>,
        document.body
      )}
    </>
  )
}