import { X } from 'lucide-react'
import { useChatOverlay } from '../contexts/ChatOverlayContext'
import { getOverlayLayout } from '../services/overlayLayout.js'

export default function ChatOverlayShell({ title, onClose, children, compactHeader = false }) {
  const { activeOverlay } = useChatOverlay()
  const layout = getOverlayLayout(activeOverlay)

  return (
    <div className="fixed inset-0 z-50 pointer-events-none">
      <section
        className={[
          'absolute inset-y-0 pointer-events-auto bg-white border-l border-gray-200 shadow-2xl shadow-slate-900/20 flex flex-col',
          'animate-[overlayDrawerIn_180ms_cubic-bezier(.22,1,.36,1)_both]',
          layout.panelSideClass,
          layout.panelWidthClass,
          layout.mobilePanelWidthClass,
        ].join(' ')}
      >
        {compactHeader ? (
          <button
            onClick={onClose}
            className="absolute left-3 top-2 z-20 grid h-7 w-7 place-items-center rounded-md text-gray-400 transition hover:bg-gray-100 hover:text-gray-700"
            title={title ? `收起${title}` : '收起浮层'}
            aria-label={title ? `收起${title}` : '收起浮层'}
          >
            <X size={15} />
          </button>
        ) : (
          <div className="flex-shrink-0 h-12 border-b border-gray-200 px-4 flex items-center justify-between bg-white">
            <button
              onClick={onClose}
              className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-500"
              title="收起浮层"
              aria-label="收起浮层"
            >
              <X size={18} />
            </button>
            <span className="text-sm font-medium text-gray-700">{title}</span>
            <span className="text-sm font-semibold text-brand-600">AIPROS</span>
          </div>
        )}
        <div className="flex-1 min-h-0 overflow-hidden flex flex-col">
          {children}
        </div>
      </section>
    </div>
  )
}
