import { useEffect } from 'react'
import { X, ChevronLeft } from 'lucide-react'

export default function DrillDownModal({ title, subtitle, onClose, onBack, children }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose() }
    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
  }, [onClose])

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/30 backdrop-blur-sm"
      onClick={onClose}
    >
      <div
        className="relative max-h-[88vh] w-[960px] max-w-[94vw] overflow-hidden rounded-lg bg-white shadow-2xl ring-1 ring-slate-200"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-start justify-between border-b border-slate-200 px-6 py-4">
          <div className="flex items-center gap-3">
            {onBack && (
              <button
                onClick={onBack}
                className="flex items-center gap-1 rounded-md px-2 py-1 text-[12px] text-slate-500 hover:bg-slate-100 hover:text-slate-700"
              >
                <ChevronLeft className="h-3.5 w-3.5" />
                Πίσω
              </button>
            )}
            <div>
              <div className="text-[15px] font-semibold text-slate-900">{title}</div>
              {subtitle && <div className="mt-0.5 text-[12px] text-slate-500">{subtitle}</div>}
            </div>
          </div>
          <button
            onClick={onClose}
            className="rounded p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600"
          >
            <X className="h-4 w-4" />
          </button>
        </div>
        <div className="max-h-[76vh] overflow-auto">{children}</div>
      </div>
    </div>
  )
}
