import React, { useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

/**
 * Right-side slide-over (same pattern as Leads detail). Use on Leads, Contacts, and Deals.
 */
export default function SlideOverPanel({
    open,
    onClose,
    title,
    subtitle,
    headerActions = null,
    children,
    widthClassName = 'max-w-lg',
}) {
    useEffect(() => {
        if (!open) return;
        const onKey = (e) => {
            if (e.key === 'Escape') onClose();
        };
        window.addEventListener('keydown', onKey);
        return () => window.removeEventListener('keydown', onKey);
    }, [open, onClose]);

    if (!open) return null;

    return (
        <div className="fixed inset-0 z-50 flex justify-end bg-black/30" role="dialog" aria-modal="true">
            <button
                type="button"
                className="flex-1 cursor-default min-h-0"
                aria-label="Close panel"
                onClick={onClose}
            />
            <div
                className={cn(
                    'w-full bg-white shadow-xl h-full overflow-y-auto border-l border-slate-200 p-6',
                    widthClassName
                )}
            >
                <div className="flex justify-between items-start gap-4 mb-6">
                    <div className="min-w-0 pr-2 flex-1">
                        {typeof title === 'string' || title == null ? (
                            <h3 className="text-lg font-bold text-slate-900 truncate">{title || ''}</h3>
                        ) : (
                            <div className="w-full min-w-0">{title}</div>
                        )}
                        {subtitle ? (
                            <p className="text-sm text-slate-500 mt-1 break-words">{subtitle}</p>
                        ) : null}
                    </div>
                    <div className="flex items-center gap-2 shrink-0">
                        {headerActions}
                        <Button variant="ghost" size="sm" onClick={onClose}>
                            Close
                        </Button>
                    </div>
                </div>
                {children}
            </div>
        </div>
    );
}