"use client";

import * as React from "react";
import { useMediaQuery } from "@/lib/use-media-query";
import { cn } from "@/lib/utils";

import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogDescription,
    DialogTrigger,
} from "@/components/ui/dialog";

import {
    Drawer,
    DrawerContent,
    DrawerHeader,
    DrawerTitle,
    DrawerDescription,
    DrawerTrigger,
} from "@/components/ui/drawer";

type ResponsiveSheetProps = {
    trigger?: React.ReactNode;
    title?: React.ReactNode;
    description?: React.ReactNode;
    children: React.ReactNode;
    /** وضعیت نمایش (Controlled) */
    open?: boolean;
    /** تغییر وضعیت نمایش */
    onOpenChange?: (open: boolean) => void;

    /** اختیاری — اگر داده شود جایگزین عرض پیش‌فرض می‌شود */
    contentClassName?: string;
};

export function ResponsiveSheet({
    trigger,
    title,
    description,
    children,
    contentClassName,
    open,
    onOpenChange,
}: ResponsiveSheetProps) {
    const isDesktop = useMediaQuery("(min-width: 768px)");

    // عرض پیش‌فرض (اگر مصرف‌کننده چیزی نفرستاد)
    const defaultDesktopWidth = "w-[96vw] max-w-5xl";

    if (isDesktop) {
        return (
            <Dialog open={open} onOpenChange={onOpenChange}>
                {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}

                <DialogContent
                    className={cn(contentClassName ?? defaultDesktopWidth)}
                    showCloseButton={false}
                >
                    {(title || description) && (
                        <DialogHeader>
                            {title && <DialogTitle>{title}</DialogTitle>}
                            {description && (
                                <DialogDescription>
                                    {description}
                                </DialogDescription>
                            )}
                        </DialogHeader>
                    )}

                    <div className="mt-2">{children}</div>
                </DialogContent>
            </Dialog>
        );
    }

    // موبایل → Drawer
    return (
        <Drawer open={open} onOpenChange={onOpenChange}>
            {trigger && <DrawerTrigger asChild>{trigger}</DrawerTrigger>}

            <DrawerContent className="max-h-dvh">
                <div className="mx-auto flex h-full w-full max-w-md flex-col">
                    {(title || description) && (
                        <DrawerHeader className="text-right">
                            {title && <DrawerTitle>{title}</DrawerTitle>}
                            {description && (
                                <DrawerDescription>
                                    {description}
                                </DrawerDescription>
                            )}
                        </DrawerHeader>
                    )}

                    <div className="flex-1 overflow-y-auto p-4 pt-2 pb-10">
                        {children}
                    </div>
                </div>
            </DrawerContent>
        </Drawer>
    );
}