
import React, { useEffect, useState } from 'react';
import { X } from 'lucide-react';
import { createPortal } from 'react-dom';

interface SideSheetProps {
    isOpen: boolean;
    onClose: () => void;
    title?: string;
    children: React.ReactNode;
    width?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
    footer?: React.ReactNode;
}

export const SideSheet: React.FC<SideSheetProps> = ({ isOpen, onClose, title, children, width = 'md', footer }) => {
    const [isMounted, setIsMounted] = useState(false);
    const [isVisible, setIsVisible] = useState(false);

    useEffect(() => {
        setIsMounted(true);
    }, []);

    useEffect(() => {
        if (isOpen) {
            setIsVisible(true);
            document.body.style.overflow = 'hidden';
        } else {
            const timer = setTimeout(() => setIsVisible(false), 500); // Allow exit animation
            document.body.style.overflow = 'unset';
            return () => clearTimeout(timer);
        }
        return () => {
            document.body.style.overflow = 'unset';
        };
    }, [isOpen]);

    if (!isMounted || (!isOpen && !isVisible)) return null;

    // Width classes for Desktop side sheet
    const widthClasses = {
        sm: 'sm:max-w-sm',
        md: 'sm:max-w-md',
        lg: 'sm:max-w-lg',
        xl: 'sm:max-w-xl',
        full: 'sm:max-w-full'
    };

    return createPortal(
        <div
            className={`fixed inset-0 z-50 flex flex-col sm:flex-row justify-end items-end sm:items-stretch transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
            role="dialog"
            aria-modal="true"
        >
            {/* Backdrop */}
            <div
                className="absolute inset-0 bg-black/40 backdrop-blur-sm"
                onClick={onClose}
            />

            {/* Sheet */}
            <div
                className={`
                    relative 
                    bg-surface-container 
                    w-full 
                    ${widthClasses[width]} 
                    
                    /* Mobile Styles (Bottom Sheet) */
                    rounded-t-[28px] sm:rounded-none sm:rounded-l-[28px]
                    max-h-[85vh] sm:max-h-full h-full sm:h-full
                    flex flex-col
                    shadow-elevation-3
                    
                    /* Animations */
                    transition-transform duration-500 ease-[cubic-bezier(0.2,0.0,0,1.0)]
                    ${isOpen
                        ? 'translate-y-0 sm:translate-y-0 sm:translate-x-0'
                        : 'translate-y-full sm:translate-y-0 sm:translate-x-full'
                    }
                `}
                onClick={(e) => e.stopPropagation()}
            >
                {/* Mobile Drag Handle */}
                <div className="sm:hidden flex justify-center pt-4 pb-2 shrink-0">
                    <div className="w-8 h-1 bg-outline-variant rounded-full opacity-40" />
                </div>

                {/* Header */}
                <div className="flex items-center justify-between px-6 pb-6 pt-2 sm:pt-6 shrink-0 border-b border-transparent">
                    <h3 className="text-[22px] leading-[28px] font-normal text-on-surface">{title}</h3>
                    <button
                        onClick={onClose}
                        className="p-2 -mr-2 text-on-surface-variant hover:text-on-surface hover:bg-surface-container-high rounded-full transition-colors"
                        aria-label="Close"
                    >
                        <X size={24} />
                    </button>
                </div>

                {/* Content */}
                <div className="flex-1 overflow-y-auto px-6 pb-6 pt-0">
                    {children}
                </div>

                {/* Footer */}
                {footer && (
                    <div className="px-6 py-4 border-t border-outline-variant shrink-0 bg-surface-container">
                        {footer}
                    </div>
                )}
            </div>
        </div>,
        document.body
    );
};
