"use client";

import * as React from "react";
import { toast } from "sonner";

import { ResponsiveSheet } from "@/components/responsive-sheet";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Folder, FolderOpen, Layers, Home, Check, FileIcon, FileVideoIcon } from "lucide-react";
import type { ButtonHTMLAttributes } from "react";

import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from "@/components/ui/alert-dialog";

/* -------------------------------- Types -------------------------------- */

export type MediaPicked = {
    id: string;
    url: string;
    alt?: string | null;
    caption?: string | null;

    filename?: string | null;
    originalName?: string | null;
    mimeType?: string | null;
    size?: number | null;

    folderId?: string | null;
};

type MediaFolder = {
    id: string;
    name: string;
    parentId: string | null;
    createdAt?: string;
};

type MediaManagerProps = {
    mode?: "single" | "multiple";
    value?: MediaPicked | MediaPicked[] | null;
    onChange?: (val: MediaPicked | MediaPicked[] | null) => void;

    trigger?: React.ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>;

    triggerLabel?: string;
    triggerClassName?: string;

    title?: React.ReactNode;
    description?: React.ReactNode;

    readOnly?: boolean;
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    inline?: boolean;
};

/* ------------------------------ API helpers ------------------------------ */

async function apiGet<T>(url: string): Promise<T> {
    const res = await fetch(url, { cache: "no-store" });
    if (!res.ok) throw new Error(await res.text());
    return (await res.json()) as T;
}

async function apiPost<T>(url: string, body: unknown): Promise<T> {
    const res = await fetch(url, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
    });
    if (!res.ok) throw new Error(await res.text());
    return (await res.json()) as T;
}

async function apiPatch<T>(url: string, body: unknown): Promise<T> {
    const res = await fetch(url, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
    });
    if (!res.ok) throw new Error(await res.text());
    return (await res.json()) as T;
}

function isFileDrag(dt: DataTransfer | null) {
    if (!dt) return false;
    const types = Array.from(dt.types || []);
    // Chrome/Edge: "Files" - Firefox: "application/x-moz-file"
    return types.includes("Files") || types.includes("application/x-moz-file");
}

/* -------------------------------- Component ------------------------------ */

export default function MediaManager({
    mode = "single",
    value = null,
    onChange,
    trigger,
    triggerClassName,
    triggerLabel,
    title,
    description,
    readOnly = false,
    open,
    onOpenChange,
    inline = false,
}: MediaManagerProps) {
    const multiple = mode === "multiple";

    // Folder state
    const [folders, setFolders] = React.useState<MediaFolder[]>([]);
    const [currentFolderId, setCurrentFolderId] = React.useState<string | null>(
        null
    );

    type FolderViewMode = "all" | "root" | "folder";
    const [folderViewMode, setFolderViewMode] =
        React.useState<FolderViewMode>("all");

    // Items state
    const [q, setQ] = React.useState("");
    const [items, setItems] = React.useState<MediaPicked[]>([]);
    const [loading, setLoading] = React.useState(false);

    // Selection state (internal/external)
    const [internalValue, setInternalValue] = React.useState<MediaPicked | MediaPicked[] | null>(value || null);
    
    const [internalOpen, setInternalOpen] = React.useState(false);
    const isModalOpen = open !== undefined ? open : internalOpen;
    const handleOpenChange = (v: boolean) => {
        if (onOpenChange) onOpenChange(v);
        else setInternalOpen(v);
    };

    // Sync internal state with external value when modal opens
    React.useEffect(() => {
        if (isModalOpen) {
            setInternalValue(value || null);
        }
    }, [isModalOpen, value]);

    const actualValue = internalValue;

    const selectedIds = React.useMemo(() => {
        if (!actualValue) return new Set<string>();
        const arr = Array.isArray(actualValue) ? actualValue : [actualValue];
        return new Set(arr.map((x) => x.id || x.url)); // Use url as fallback ID
    }, [actualValue]);

    const selectedUrls = React.useMemo(() => {
        if (!actualValue) return new Set<string>();
        const arr = Array.isArray(actualValue) ? actualValue : [actualValue];
        return new Set(arr.map((x) => x.url));
    }, [actualValue]);

    const selectedItems = React.useMemo(() => {
        if (!actualValue) return [];
        return Array.isArray(actualValue) ? actualValue : [actualValue];
    }, [actualValue]);

    const focusedItem = React.useMemo(() => {
        return selectedItems[0] ?? null;
    }, [selectedItems]);

    // Create folder dialog
    const [folderDialogOpen, setFolderDialogOpen] = React.useState(false);
    const [newFolderName, setNewFolderName] = React.useState("");

    // Upload
    const fileInputRef = React.useRef<HTMLInputElement | null>(null);

    // Drag & Drop (upload)
    const [isDragOverGrid, setIsDragOverGrid] = React.useState(false);

    const [isExternalDragOver, setIsExternalDragOver] = React.useState(false);

    // Drag & Drop (move items)
    const [draggingMediaId, setDraggingMediaId] = React.useState<string | null>(
        null
    );
    const [dragOverFolderId, setDragOverFolderId] = React.useState<
        string | null
    >(null);

    const sheetTitle = title ?? (multiple ? "انتخاب فایل‌ها" : "انتخاب فایل");
    const sheetDesc =
        description ??
        "فایل را انتخاب کنید یا آپلود کنید. می‌توانید در پوشه‌ها جستجو و مدیریت کنید.";

    const triggerText =
        triggerLabel ?? (multiple ? "انتخاب از مدیا" : "انتخاب فایل");

    type FolderFilter = string | null | "ALL";
    function getFolderFilter(): FolderFilter {
        if (folderViewMode === "all") return "ALL";
        if (folderViewMode === "root") return null;
        return currentFolderId;
    }

    async function refreshFolders() {
        try {
            const data = await apiGet<{ folders: MediaFolder[] }>(
                "/api/media/folders?tree=0"
            );
            setFolders(data.folders ?? []);
        } catch (e) {
            console.error(e);
            toast.error("لود پوشه‌ها ناموفق بود.");
        }
    }

    async function refreshItems(folderId: FolderFilter, search: string) {
        setLoading(true);
        try {
            const params = new URLSearchParams();

            if (folderId !== "ALL") {
                if (folderId === null) params.set("folderId", "null");
                else if (folderId) params.set("folderId", folderId);
            }

            if (search.trim()) params.set("q", search.trim());

            const qs = params.toString();
            const data = await apiGet<{ items: MediaPicked[] }>(
                `/api/media/items${qs ? `?${qs}` : ""}`
            );

            setItems(Array.isArray(data.items) ? data.items : []);
        } catch (e) {
            console.error(e);
            toast.error("لود فایل‌ها ناموفق بود.");
            setItems([]);
        } finally {
            setLoading(false);
        }
    }

    React.useEffect(() => {
        refreshFolders();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    React.useEffect(() => {
        refreshItems(getFolderFilter(), q);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [folderViewMode, currentFolderId]);

    React.useEffect(() => {
        const t = setTimeout(() => refreshItems(getFolderFilter(), q), 250);
        return () => clearTimeout(t);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [q, folderViewMode, currentFolderId]);

    function togglePick(item: MediaPicked) {
        if (!multiple) {
            setInternalValue(item);
            
            // Auto close modal on single select
            if (!inline) {
               if (onChange) onChange(item);
               setTimeout(() => onOpenChange?.(false), 50);
            } else {
               if (onChange) onChange(item);
            }
            return;
        }

        const isSelected = selectedIds.has(item.id) || selectedUrls.has(item.url);
        let next: MediaPicked[];

        if (isSelected) {
            next = selectedItems.filter((x) => x.id !== item.id && x.url !== item.url);
        } else {
            next = [...selectedItems, item];
        }

        setInternalValue(next);
        if (inline && onChange) onChange(next);
    }

    function clearSelection() {
        if (onChange) onChange(multiple ? [] : null);
        else setInternalValue(multiple ? [] : null);
    }

    async function createFolder() {
        const name = newFolderName.trim();
        if (!name) {
            toast.error("نام پوشه الزامی است.");
            return;
        }

        const parentId =
            folderViewMode === "folder" && currentFolderId
                ? currentFolderId
                : null;

        try {
            await apiPost("/api/media/folders", { name, parentId });
            toast.success("پوشه ساخته شد.");
            setNewFolderName("");
            setFolderDialogOpen(false);
            await refreshFolders();
        } catch (e) {
            console.error(e);
            toast.error("ساخت پوشه ناموفق بود.");
        }
    }

    function getUploadFolderId(): string | null {
        if (folderViewMode === "folder" && currentFolderId)
            return currentFolderId;
        return null; // root یا all => به روت
    }

    async function uploadFiles(files: FileList | null) {
        if (!files || files.length === 0) return;

        const list = Array.from(files);
        const uploadFolderId = getUploadFolderId();

        try {
            for (const file of list) {
                const fd = new FormData();
                fd.append("file", file);
                if (uploadFolderId) fd.append("folderId", uploadFolderId);

                const res = await fetch("/api/media/upload", {
                    method: "POST",
                    body: fd,
                });

                if (!res.ok) {
                    throw new Error(await res.text());
                }
            }

            toast.success("آپلود انجام شد.");
            await refreshItems(getFolderFilter(), q);
        } catch (e) {
            console.error(e);
            toast.error("آپلود ناموفق بود.");
        } finally {
            if (fileInputRef.current) fileInputRef.current.value = "";
        }
    }

    async function saveMeta(patch: { alt?: string; caption?: string }) {
        if (!focusedItem?.id) return;

        try {
            await apiPatch(`/api/media/items/${focusedItem.id}`, patch);
            toast.success("متادیتا ذخیره شد.");
            await refreshItems(getFolderFilter(), q);
        } catch (e) {
            console.error(e);
            toast.error("ذخیره متادیتا ناموفق بود.");
        }
    }

    async function moveItemToFolder(mediaId: string, folderId: string | null) {
        try {
            await apiPatch(`/api/media/items/${mediaId}`, { folderId });
            toast.success("جابجایی انجام شد.");
            await refreshItems(getFolderFilter(), q);
        } catch (e) {
            console.error(e);
            toast.error("جابجایی ناموفق بود.");
        }
    }

    const rootFolders = React.useMemo(
        () => folders.filter((f) => !f.parentId),
        [folders]
    );

    const childFoldersByParent = React.useMemo(() => {
        const m = new Map<string, MediaFolder[]>();
        for (const f of folders) {
            if (!f.parentId) continue;
            m.set(f.parentId, [...(m.get(f.parentId) ?? []), f]);
        }
        return m;
    }, [folders]);

    const folderById = React.useMemo(() => {
        const m = new Map<string, MediaFolder>();
        for (const f of folders) m.set(f.id, f);
        return m;
    }, [folders]);

    type Crumb = { id: string | null; label: string; mode: FolderViewMode };

    const crumbs = React.useMemo<Crumb[]>(() => {
        // ALL
        if (folderViewMode === "all") {
            return [{ id: null, label: "همه فایل‌ها", mode: "all" }];
        }

        // ROOT
        if (folderViewMode === "root") {
            return [{ id: null, label: "روت", mode: "root" }];
        }

        // FOLDER path
        const out: Crumb[] = [{ id: null, label: "روت", mode: "root" }];

        let cur = currentFolderId ? folderById.get(currentFolderId) : null;
        const stack: MediaFolder[] = [];

        while (cur) {
            stack.push(cur);
            cur = cur.parentId ? folderById.get(cur.parentId) : null;
        }

        stack.reverse().forEach((f) => {
            out.push({ id: f.id, label: f.name, mode: "folder" });
        });

        return out;
    }, [folderViewMode, currentFolderId, folderById]);

    async function goToCrumb(c: Crumb) {
        if (c.mode === "all") {
            setFolderViewMode("all");
            setCurrentFolderId(null);
            await refreshItems("ALL", q);
            return;
        }

        if (c.mode === "root" && c.id === null) {
            setFolderViewMode("root");
            setCurrentFolderId(null);
            await refreshItems(null, q);
            return;
        }

        // folder
        setFolderViewMode("folder");
        setCurrentFolderId(c.id);
        await refreshItems(c.id, q);
    }

    async function goBack() {
        if (folderViewMode === "all") return;

        if (folderViewMode === "root") {
            // از روت برگرد به همه
            setFolderViewMode("all");
            setCurrentFolderId(null);
            await refreshItems("ALL", q);
            return;
        }

        // folder mode
        if (!currentFolderId) {
            setFolderViewMode("root");
            await refreshItems(null, q);
            return;
        }

        const cur = folderById.get(currentFolderId);
        const parentId = cur?.parentId ?? null;

        if (parentId === null) {
            setFolderViewMode("root");
            setCurrentFolderId(null);
            await refreshItems(null, q);
            return;
        }

        setFolderViewMode("folder");
        setCurrentFolderId(parentId);
        await refreshItems(parentId, q);
    }

    function renderFolderNode(f: MediaFolder, depth = 0): React.ReactNode {
        const children = childFoldersByParent.get(f.id) ?? [];
        const active = folderViewMode === "folder" && currentFolderId === f.id;

        return (
            <div key={f.id}>
                <button
                    type="button"
                    onClick={async () => {
                        setFolderViewMode("folder");
                        setCurrentFolderId(f.id);
                        await refreshItems(f.id, q);
                    }}
                    onDragEnter={() => setDragOverFolderId(f.id)}
                    onDragLeave={() => setDragOverFolderId(null)}
                    onDragOver={(e) => {
                        e.preventDefault();
                        e.dataTransfer.dropEffect = "move";
                    }}
                    onDrop={async (e) => {
                        e.preventDefault();
                        const mediaId = e.dataTransfer.getData("text/media-id");
                        setDragOverFolderId(null);
                        setDraggingMediaId(null);

                        if (!mediaId) return;
                        await moveItemToFolder(mediaId, f.id);
                    }}
                    className={[
                        "w-full rounded-md px-2 py-1.5 text-right text-sm flex items-center gap-2",
                        active
                            ? "bg-primary/10 text-primary"
                            : "hover:bg-muted",
                        dragOverFolderId === f.id ? "ring-2 ring-primary" : "",
                    ].join(" ")}
                    style={{ paddingRight: 8 + depth * 14 }}
                >
                    {active ? (
                        <FolderOpen className="h-4 w-4 shrink-0" />
                    ) : (
                        <Folder className="h-4 w-4 shrink-0" />
                    )}
                    <span className="truncate">{f.name}</span>
                </button>

                {children.length > 0 && (
                    <div className="mt-1 space-y-1">
                        {children.map((c) => renderFolderNode(c, depth + 1))}
                    </div>
                )}
            </div>
        );
    }

    // meta state
    const [altDraft, setAltDraft] = React.useState("");
    const [captionDraft, setCaptionDraft] = React.useState("");

    React.useEffect(() => {
        setAltDraft(focusedItem?.alt ?? "");
        setCaptionDraft(focusedItem?.caption ?? "");
    }, [focusedItem]);

    const builtTrigger = React.useMemo(() => {
        const disabled = !onChange || readOnly;

        // trigger سفارشی
        if (trigger && React.isValidElement(trigger)) {
            return React.cloneElement(trigger, {
                ...trigger.props,
                type: trigger.props.type ?? "button",
                disabled,
                className: [trigger.props.className, triggerClassName]
                    .filter(Boolean)
                    .join(" "),
            });
        }

        // پیش‌فرض: دکمه متنی
        return (
            <Button
                type="button"
                variant="outline"
                size="sm"
                disabled={disabled}
                className={triggerClassName}
            >
                {triggerText}
            </Button>
        );
    }, [trigger, triggerClassName, onChange, readOnly, triggerText]);

    const content = (
        <div className="grid gap-4 md:grid-cols-[240px_1fr] flex-1 overflow-hidden h-full min-h-0">
            {/* Left: folders */}
                <div className="rounded-lg border flex flex-col overflow-hidden min-h-0">
                    <div className="flex items-center justify-between gap-2 p-3 shrink-0">
                        <div className="text-sm font-medium">پوشه‌ها</div>
                        {!readOnly && (
                            <AlertDialog
                                open={folderDialogOpen}
                                onOpenChange={setFolderDialogOpen}
                            >
                                <AlertDialogTrigger asChild>
                                    <Button
                                        type="button"
                                        variant="secondary"
                                        size="sm"
                                    >
                                        پوشه جدید
                                    </Button>
                                </AlertDialogTrigger>
                                <AlertDialogContent>
                                    <AlertDialogHeader>
                                        <AlertDialogTitle>
                                            ساخت پوشه
                                        </AlertDialogTitle>
                                        <AlertDialogDescription>
                                            نام پوشه را وارد کنید. اگر داخل یک
                                            پوشه باشید، پوشه جدید زیرمجموعه همان
                                            ساخته می‌شود.
                                        </AlertDialogDescription>
                                    </AlertDialogHeader>

                                    <div className="space-y-2">
                                        <Label htmlFor="folderName">
                                            نام پوشه
                                        </Label>
                                        <Input
                                            id="folderName"
                                            value={newFolderName}
                                            onChange={(e) =>
                                                setNewFolderName(e.target.value)
                                            }
                                            autoFocus
                                        />
                                    </div>

                                    <AlertDialogFooter>
                                        <AlertDialogCancel>
                                            انصراف
                                        </AlertDialogCancel>
                                        <AlertDialogAction
                                            onClick={(e) => {
                                                e.preventDefault();
                                                createFolder();
                                            }}
                                        >
                                            ساخت
                                        </AlertDialogAction>
                                    </AlertDialogFooter>
                                </AlertDialogContent>
                            </AlertDialog>
                        )}
                    </div>

                    <Separator />

                    <ScrollArea className="flex-1 min-h-0">
                        <div className="space-y-1 p-2">
                            <button
                                type="button"
                                onClick={async () => {
                                    setFolderViewMode("all");
                                    setCurrentFolderId(null);
                                    await refreshItems("ALL", q);
                                }}
                                className={[
                                    "w-full rounded-md px-2 py-1.5 text-right text-sm flex items-center gap-2",
                                    folderViewMode === "all"
                                        ? "bg-primary/10 text-primary"
                                        : "hover:bg-muted",
                                ].join(" ")}
                            >
                                <Layers className="h-4 w-4 shrink-0" />
                                همه فایل‌ها
                            </button>

                            <button
                                type="button"
                                onClick={async () => {
                                    setFolderViewMode("root");
                                    setCurrentFolderId(null);
                                    await refreshItems(null, q);
                                }}
                                onDragEnter={() => setDragOverFolderId("ROOT")}
                                onDragLeave={() => setDragOverFolderId(null)}
                                onDragOver={(e) => {
                                    e.preventDefault();
                                    e.dataTransfer.dropEffect = "move";
                                }}
                                onDrop={async (e) => {
                                    e.preventDefault();
                                    const mediaId =
                                        e.dataTransfer.getData("text/media-id");
                                    setDragOverFolderId(null);
                                    setDraggingMediaId(null);
                                    if (!mediaId) return;
                                    await moveItemToFolder(mediaId, null);
                                }}
                                className={[
                                    "w-full rounded-md px-2 py-1.5 text-right text-sm flex items-center gap-2",
                                    folderViewMode === "root"
                                        ? "bg-primary/10 text-primary"
                                        : "hover:bg-muted",
                                    dragOverFolderId === "ROOT"
                                        ? "ring-2 ring-primary"
                                        : "",
                                ].join(" ")}
                            >
                                <Home className="h-4 w-4 shrink-0" />
                                روت
                            </button>

                            <div className="mt-2 space-y-1">
                                {rootFolders.map((f) => renderFolderNode(f, 0))}
                            </div>
                        </div>
                    </ScrollArea>
                </div>

                {/* Right: items + actions */}
                <div className="flex flex-col gap-3 min-h-0 h-full overflow-hidden">
                    <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between shrink-0">
                        <div className="flex flex-1 items-center gap-2">
                            <Input
                                placeholder="جستجو..."
                                value={q}
                                onChange={(e) => setQ(e.target.value)}
                            />
                        </div>

                        <div className="flex items-center gap-2 shrink-0">
                            {onChange && (
                                <Button type="button" onClick={() => {
                                    onChange(internalValue);
                                    handleOpenChange(false);
                                }} className="bg-emerald-600 hover:bg-emerald-700 text-white shadow-sm">
                                    تایید انتخاب ({multiple ? selectedItems.length : (internalValue ? 1 : 0)} فایل)
                                </Button>
                            )}
                            {!readOnly && (
                                <>
                                    <input
                                        ref={fileInputRef}
                                        type="file"
                                        className="hidden"
                                        multiple={multiple}
                                        onChange={(e) =>
                                            uploadFiles(e.target.files)
                                        }
                                    />
                                    <Button
                                        type="button"
                                        variant="secondary"
                                        onClick={() =>
                                            fileInputRef.current?.click()
                                        }
                                    >
                                        آپلود
                                    </Button>
                                </>
                            )}

                            <Button
                                type="button"
                                variant="ghost"
                                onClick={clearSelection}
                                disabled={!onChange}
                            >
                                پاک کردن انتخاب
                            </Button>
                        </div>
                    </div>

                    <div className="grid gap-4 lg:grid-cols-[1fr_320px] flex-1 min-h-0 overflow-hidden">
                        {/* Grid */}
                        <div className="rounded-lg border flex flex-col overflow-hidden min-h-0">
                            <div className="p-3 text-sm text-muted-foreground shrink-0">
                                {loading
                                    ? "در حال بارگذاری..."
                                    : `${items.length} فایل`}
                                {multiple && onChange && (
                                    <span className="ml-2">
                                        (انتخاب چندتایی فعال است)
                                    </span>
                                )}
                            </div>
                            <Separator />

                            {/* ✅ Dropzone wrapper inside ScrollArea (capture) */}

                            <div
                                className="relative flex-1 min-h-0 overflow-hidden"
                                onDragEnterCapture={(e) => {
                                    if (readOnly) return;
                                    if (!isFileDrag(e.dataTransfer)) return;
                                    // drag داخلی (move) را overlay نکن
                                    if (e.dataTransfer.getData("text/media-id"))
                                        return;

                                    e.preventDefault();
                                    setIsExternalDragOver(true);
                                }}
                                onDragOverCapture={(e) => {
                                    if (readOnly) return;
                                    if (!isFileDrag(e.dataTransfer)) return;
                                    if (e.dataTransfer.getData("text/media-id"))
                                        return;

                                    e.preventDefault(); // شرط اصلی برای فعال شدن drop
                                    e.dataTransfer.dropEffect = "copy";
                                    setIsExternalDragOver(true);
                                }}
                                onDragLeaveCapture={(e) => {
                                    if (readOnly) return;

                                    const next = e.relatedTarget as Node | null;
                                    if (next && e.currentTarget.contains(next))
                                        return;

                                    setIsExternalDragOver(false);
                                }}
                                onDropCapture={async (e) => {
                                    if (readOnly) return;

                                    if (
                                        e.dataTransfer.getData("text/media-id")
                                    ) {
                                        setIsExternalDragOver(false);
                                        return;
                                    }

                                    if (
                                        !isFileDrag(e.dataTransfer) ||
                                        !e.dataTransfer.files?.length
                                    ) {
                                        setIsExternalDragOver(false);
                                        return;
                                    }

                                    e.preventDefault();
                                    setIsExternalDragOver(false);

                                    await uploadFiles(e.dataTransfer.files);
                                }}
                            >
                                <ScrollArea className="h-full">
                                    <div className="grid grid-cols-3 gap-2 p-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-4 xl:grid-cols-5">
                                        {items.map((it) => {
                                            const active = selectedIds.has(it.id) || selectedUrls.has(it.url);
                                            return (
                                                <button
                                                    key={it.id}
                                                    type="button"
                                                    className={[
                                                        "group relative overflow-hidden rounded-md border",
                                                        active
                                                            ? "ring-2 ring-primary ring-offset-2 ring-offset-background border-primary"
                                                            : "hover:ring-1 hover:ring-muted-foreground/40",
                                                    ].join(" ")}
                                                    onClick={() => {
                                                        togglePick(it);
                                                    }}
                                                    draggable={!readOnly}
                                                    onDragStart={(e) => {
                                                        if (readOnly) return;
                                                        setDraggingMediaId(
                                                            it.id
                                                        );
                                                        e.dataTransfer.setData(
                                                            "text/media-id",
                                                            it.id
                                                        );
                                                        e.dataTransfer.effectAllowed =
                                                            "move";
                                                    }}
                                                    onDragEnd={() => {
                                                        setDraggingMediaId(
                                                            null
                                                        );
                                                        setDragOverFolderId(
                                                            null
                                                        );
                                                    }}
                                                    title={it.url}
                                                >
                                                    <div className="aspect-square bg-muted/30">
                                                        {it.mimeType?.startsWith(
                                                            "image/"
                                                        ) ? (
                                                            <img
                                                                src={it.url}
                                                                alt={it.alt ?? ""}
                                                                className={`w-full h-full object-cover transition-transform ${active ? "scale-95 rounded-sm" : ""}`}
                                                            />
                                                        ) : (
                                                            <div className="w-full h-full flex items-center justify-center text-muted-foreground/50">
                                                                <FileIcon className="h-8 w-8" />
                                                            </div>
                                                        )}
                                                    </div>
                                                    {active && (
                                                        <div className="absolute top-1.5 right-1.5 bg-indigo-600 text-white p-1 rounded shadow-md ring-2 ring-white">
                                                            <Check className="w-3 h-3" />
                                                        </div>
                                                    )}
                                                </button>
                                            );
                                        })}
                                    </div>
                                </ScrollArea>

                                {!readOnly && isExternalDragOver && (
                                    <div className="pointer-events-none absolute inset-0 z-10 grid place-items-center bg-background/70 backdrop-blur-sm">
                                        <div className="rounded-lg border bg-background px-4 py-3 text-sm font-medium shadow">
                                            برای آپلود فایل رو رها کنید
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>

                        {/* Meta */}
                        <div className="rounded-lg border flex flex-col overflow-hidden">
                            <div className="p-3 text-sm font-medium shrink-0">
                                جزئیات فایل
                            </div>
                            <Separator />
                            <div className="space-y-3 p-3">
                                {!focusedItem ? (
                                    <div className="text-sm text-muted-foreground">
                                        یک فایل را انتخاب کنید تا جزئیات آن
                                        نمایش داده شود.
                                    </div>
                                ) : (
                                    <>
                                        <div className="aspect-square bg-muted rounded-md overflow-hidden mb-4 border relative">
                                            {focusedItem.mimeType?.startsWith(
                                                "image/"
                                            ) ? (
                                                <img
                                                    src={focusedItem.url}
                                                    className="w-full h-full object-contain bg-muted/30"
                                                />
                                            ) : focusedItem.mimeType?.startsWith(
                                                  "video/"
                                              ) ? (
                                                <div className="w-full h-full flex items-center justify-center">
                                                    <FileVideoIcon className="h-10 w-10 text-muted-foreground" />
                                                </div>
                                            ) : (
                                                <div className="w-full h-full flex items-center justify-center">
                                                    <FileIcon className="h-10 w-10 text-muted-foreground" />
                                                </div>
                                            )}
                                        </div>

                                        {/* Action buttons on file details */}
                                        <div className="flex gap-2 w-full mb-4">
                                            <Button 
                                                variant={selectedIds.has(focusedItem.id) || selectedUrls.has(focusedItem.url) ? "destructive" : "default"} 
                                                className="flex-1 text-xs" 
                                                onClick={() => togglePick(focusedItem)}
                                            >
                                                {selectedIds.has(focusedItem.id) || selectedUrls.has(focusedItem.url) ? "حذف از انتخاب" : "انتخاب فایل"}
                                            </Button>
                                        </div>

                                        <div className="flex items-center gap-3 mb-2">
                                            <div className="min-w-0 flex-1">
                                                <div className="text-sm font-medium truncate">
                                                    {focusedItem.originalName ??
                                                        focusedItem.filename ??
                                                        focusedItem.url
                                                            .split("/")
                                                            .pop() ??
                                                        "file"}
                                                </div>
                                                <div className="text-[11px] font-mono text-muted-foreground mt-1 flex gap-2">
                                                    <span className="bg-muted px-1 py-0.5 rounded">{focusedItem.mimeType}</span>
                                                    <span className="bg-muted px-1 py-0.5 rounded">{((focusedItem.size || 0) / 1024).toFixed(1)} KB</span>
                                                </div>
                                            </div>
                                        </div>

                                        <div className="space-y-2">
                                            <Label htmlFor="alt">
                                                Alt (سئو)
                                            </Label>
                                            <Input
                                                id="alt"
                                                value={altDraft}
                                                onChange={(e) =>
                                                    setAltDraft(e.target.value)
                                                }
                                                disabled={readOnly}
                                            />
                                        </div>

                                        <div className="space-y-2">
                                            <Label htmlFor="caption">
                                                Caption
                                            </Label>
                                            <Input
                                                id="caption"
                                                value={captionDraft}
                                                onChange={(e) =>
                                                    setCaptionDraft(
                                                        e.target.value
                                                    )
                                                }
                                                disabled={readOnly}
                                            />
                                        </div>

                                        {!readOnly && (
                                            <Button
                                                type="button"
                                                onClick={() =>
                                                    saveMeta({
                                                        alt: altDraft,
                                                        caption: captionDraft,
                                                    })
                                                }
                                            >
                                                ذخیره متادیتا
                                            </Button>
                                        )}

                                        <div className="pt-2 text-xs text-muted-foreground">
                                            اگر انتخاب چندتایی باشد، متادیتا روی
                                            اولین آیتم انتخاب‌شده نمایش داده
                                            می‌شود.
                                        </div>
                                    </>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    );

    if (inline) {
        return <div className="h-full flex flex-col min-h-0 bg-background">{content}</div>;
    }

    return (
        <ResponsiveSheet
            open={isModalOpen}
            onOpenChange={handleOpenChange}
            trigger={builtTrigger}
            title={sheetTitle}
            description={sheetDesc}
            contentClassName="w-[96vw] max-w-7xl sm:max-w-7xl h-[95vh] flex flex-col"
        >
            <div className="flex flex-col flex-1 min-h-0">
                {content}
            </div>
        </ResponsiveSheet>
    );
}