import { Download, Eye, MoreVertical, Trash2 } from 'lucide-react';

import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/tasko/ui/dropdown-menu';
import { Button } from '@/components/ui/button';

/**
 * Props untuk komponen MediaActionDropdown.
 */
interface MediaActionDropdownProps {
    /** Callback ketika tombol "Lihat Detail" diklik */
    onView?: () => void;
    /** Callback ketika tombol "Unduh" diklik */
    onDownload?: () => void;
    /** Callback ketika tombol "Hapus" diklik */
    onDelete?: () => void;
    /** Class tambahan untuk tombol trigger */
    triggerClassName?: string;
}

/**
 * Komponen dropdown aksi untuk file media dengan hover micro-animations dan penyesuaian gaya premium.
 *
 * @param props - Properti komponen yang mencakup callback aksi (onView, onDownload, onDelete) dan kustomisasi style.
 * @returns JSX.Element
 */
export function MediaActionDropdown({
    onView,
    onDownload,
    onDelete,
    triggerClassName = 'h-8 w-8 rounded-full bg-white/80 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100 dark:bg-black/50',
}: MediaActionDropdownProps) {
    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button
                    variant="secondary"
                    size="icon"
                    className={triggerClassName}
                    aria-label="Buka menu aksi media"
                >
                    <MoreVertical size={16} />
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
                align="end"
                className="w-40 animate-in duration-200 fade-in-50 slide-in-from-top-1"
            >
                {onView && (
                    <DropdownMenuItem
                        onClick={(e) => {
                            e.stopPropagation();
                            onView();
                        }}
                        className="cursor-pointer gap-2 transition-colors duration-150 hover:bg-neutral-100 dark:hover:bg-neutral-800"
                    >
                        <Eye size={16} className="text-muted-foreground" />
                        <span>Lihat Detail</span>
                    </DropdownMenuItem>
                )}
                {onDownload && (
                    <DropdownMenuItem
                        onClick={(e) => {
                            e.stopPropagation();
                            onDownload();
                        }}
                        className="cursor-pointer gap-2 transition-colors duration-150 hover:bg-neutral-100 dark:hover:bg-neutral-800"
                    >
                        <Download size={16} className="text-muted-foreground" />
                        <span>Unduh</span>
                    </DropdownMenuItem>
                )}
                {onDelete && (
                    <DropdownMenuItem
                        onClick={(e) => {
                            e.stopPropagation();
                            onDelete();
                        }}
                        className="cursor-pointer gap-2 text-red-600 transition-colors duration-150 focus:bg-red-50 focus:text-red-600 dark:focus:bg-red-950/30"
                    >
                        <Trash2 size={16} />
                        <span>Hapus</span>
                    </DropdownMenuItem>
                )}
            </DropdownMenuContent>
        </DropdownMenu>
    );
}