/**
 * Dialog component
 * @description Reusable modal/dialog component with backdrop
 */

import * as React from 'react';
import { cn } from '@/lib/utils';

interface DialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    children: React.ReactNode;
    className?: string;
}

interface DialogContentProps {
    children: React.ReactNode;
    className?: string;
}

interface DialogHeaderProps {
    children: React.ReactNode;
    className?: string;
}

interface DialogTitleProps {
    children: React.ReactNode;
    className?: string;
}

interface DialogDescriptionProps {
    children: React.ReactNode;
    className?: string;
}

interface DialogCloseProps {
    className?: string;
    onClick?: () => void;
}

/**
 * Dialog component
 * @description Modal dialog with backdrop blur
 */
export function Dialog({ open, onOpenChange, children, className }: DialogProps) {
    if (!open) return null;

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center">
            {/* Backdrop */}
            <div
                className="fixed inset-0 bg-black/35 backdrop-blur-[17.5px]"
                onClick={() => onOpenChange(false)}
                aria-hidden="true"
            />
            {/* Dialog Content */}
            <div className={cn('relative z-50', className)}>{children}</div>
        </div>
    );
}

/**
 * DialogContent component
 * @description Container for dialog content
 */
export function DialogContent({ children, className }: DialogContentProps) {
    return (
        <div
            className={cn(
                'bg-white rounded-[24px] shadow-lg w-full max-w-[720px]',
                className
            )}
            onClick={(e) => e.stopPropagation()}
        >
            {children}
        </div>
    );
}

/**
 * DialogHeader component
 * @description Header section of dialog
 */
export function DialogHeader({ children, className }: DialogHeaderProps) {
    return (
        <div
            className={cn(
                'bg-[#EEF1F7] border-b border-[#E5E8F4] px-8 py-6 rounded-tl-[24px] rounded-tr-[24px] flex items-center justify-between',
                className
            )}
        >
            {children}
        </div>
    );
}

/**
 * DialogTitle component
 * @description Title section of dialog header
 */
export function DialogTitle({ children, className }: DialogTitleProps) {
    return (
        <div className={cn('flex flex-col gap-0.5', className)}>{children}</div>
    );
}

/**
 * DialogDescription component
 * @description Description/subtitle in dialog header
 */
export function DialogDescription({
    children,
    className,
}: DialogDescriptionProps) {
    return (
        <p
            className={cn(
                'font-["Poppins:Regular",sans-serif] text-base text-[rgba(0,0,0,0.75)]',
                className
            )}
        >
            {children}
        </p>
    );
}

/**
 * DialogClose component
 * @description Close button for dialog
 */
export function DialogClose({ className, onClick }: DialogCloseProps) {
    const closeIcon = 'https://www.figma.com/api/mcp/asset/d151f987-7858-49a2-85dd-eac10b6bf0b0';
    const closeCircleBg = 'https://www.figma.com/api/mcp/asset/3702e7bd-24a9-4380-83be-0347e18baa40';

    return (
        <button
            type="button"
            onClick={onClick}
            className={cn(
                'relative size-[30px] flex items-center justify-center cursor-pointer',
                className
            )}
            aria-label="Close dialog"
        >
            <div className="absolute inset-0">
                <img
                    src={closeCircleBg}
                    alt=""
                    className="block max-w-none size-full"
                />
            </div>
            <div className="relative ml-[3px] mt-[3.5px] size-6">
                <img
                    src={closeIcon}
                    alt=""
                    className="block max-w-none size-full"
                />
            </div>
        </button>
    );
}

