/**
 * Side drawer — companion to the centered <Modal> for screens where
 * the UX calls for a right-side slide-in panel (invoice detail,
 * payslip detail, profile peek).
 *
 * Defaults match the modal conventions in this app: backdrop blur +
 * click-outside-to-close + Escape-to-close + body scroll-lock + a
 * max-w container that grows from the right.
 */

import { ReactNode, useEffect } from 'react';
import { X, LucideIcon } from 'lucide-react';

interface DrawerProps {
  open: boolean;
  onClose: () => void;
  title: string;
  icon?: LucideIcon;
  children: ReactNode;
  footer?: ReactNode;
  maxWidth?: string;
  /** z-index override; default 110 (above Nav at 100) */
  zIndex?: number;
}

export function Drawer({
  open,
  onClose,
  title,
  icon: Icon,
  children,
  footer,
  maxWidth = 'max-w-2xl',
  zIndex = 110,
}: DrawerProps) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div
      className="fixed inset-0 flex justify-end bg-black/40 backdrop-blur-sm"
      style={{ zIndex }}
      onClick={(e) => {
        if (e.target === e.currentTarget) onClose();
      }}
    >
      <div
        className={`relative bg-card border-l border-border w-full ${maxWidth} h-full overflow-y-auto shadow-2xl animate-in slide-in-from-right`}
        role="dialog"
        aria-modal="true"
        aria-label={title}
      >
        <DrawerHeader title={title} icon={Icon} onClose={onClose} />
        <div className="flex-1">{children}</div>
        {footer && <DrawerFooter>{footer}</DrawerFooter>}
      </div>
    </div>
  );
}

interface DrawerHeaderProps {
  title: string;
  icon?: LucideIcon;
  onClose: () => void;
  subtitle?: string;
}

export function DrawerHeader({ title, icon: Icon, onClose, subtitle }: DrawerHeaderProps) {
  return (
    <div className="sticky top-0 z-10 px-6 py-5 border-b border-border bg-muted/30 backdrop-blur">
      <div className="flex items-start justify-between gap-3">
        <div className="flex items-center gap-3 min-w-0">
          {Icon && (
            <div className="flex-shrink-0 w-10 h-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center">
              <Icon className="w-5 h-5" />
            </div>
          )}
          <div className="min-w-0">
            <h2 className="text-lg font-semibold text-foreground truncate">{title}</h2>
            {subtitle && <p className="text-sm text-muted-foreground mt-0.5">{subtitle}</p>}
          </div>
        </div>
        <button
          type="button"
          onClick={onClose}
          className="flex-shrink-0 w-9 h-9 rounded-xl border border-border bg-card hover:bg-muted flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors"
          aria-label="Close"
        >
          <X className="w-4 h-4" />
        </button>
      </div>
    </div>
  );
}

export function DrawerFooter({ children }: { children: ReactNode }) {
  return (
    <div className="sticky bottom-0 px-6 py-4 border-t border-border bg-muted/30 backdrop-blur flex flex-wrap items-center justify-end gap-2">
      {children}
    </div>
  );
}

export default Drawer;
