import {
    Calendar,
    Download,
    FileText,
    HardDrive,
    Image as ImageIcon,
} from 'lucide-react';
import { toast } from 'sonner';

import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
} from '@/components/tasko/ui/dialog';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import type { MediaFile } from '@/types/media';

interface MediaDetailDialogProps {
    media: MediaFile | null;
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onDownload?: () => void;
    onDelete?: () => void;
}

export function MediaDetailDialog({
    media,
    open,
    onOpenChange,
    onDownload,
    onDelete,
}: MediaDetailDialogProps) {
    if (!media) {
        return null;
    }

    const formatDate = (dateString: string) => {
        return new Date(dateString).toLocaleDateString('id-ID', {
            day: 'numeric',
            month: 'long',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
        });
    };

    const handleDownload = () => {
        if (onDownload) {
            onDownload();
        } else {
            toast.success(`Mengunduh file: ${media.name}`);
        }
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-xl overflow-hidden rounded-2xl border-none bg-white p-0 shadow-2xl dark:bg-neutral-900 [&>button:last-child]:hidden">
                {/* File Preview Area */}
                <div className="relative flex aspect-video w-full items-center justify-center bg-neutral-100 p-4 dark:bg-neutral-950">
                    {media.thumbnail ? (
                        <img
                            src={media.thumbnail}
                            alt={media.name}
                            className="h-full max-h-60 rounded-lg object-contain shadow-md transition-transform duration-300 hover:scale-102"
                        />
                    ) : (
                        <div className="flex flex-col items-center justify-center gap-3">
                            <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-amber-50 text-amber-500 shadow-md dark:bg-amber-950/30">
                                {media.type === 'document' ? (
                                    <FileText size={44} />
                                ) : (
                                    <ImageIcon size={44} />
                                )}
                            </div>
                            <span className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
                                {media.type} File
                            </span>
                        </div>
                    )}
                </div>

                {/* Content Details Area */}
                <div className="p-6">
                    <DialogHeader className="mb-4">
                        <div className="flex items-start justify-between gap-4">
                            <DialogTitle
                                className="line-clamp-2 text-xl leading-tight font-bold text-foreground"
                                title={media.name}
                            >
                                {media.name}
                            </DialogTitle>
                            <Badge
                                variant="secondary"
                                className="mt-1 capitalize"
                            >
                                {media.type}
                            </Badge>
                        </div>
                        <DialogDescription className="text-sm text-neutral-500 dark:text-neutral-400">
                            {media.task_code
                                ? `${media.task_code} - ${media.task_name}`
                                : 'Detail properti file media dan informasi terkait.'}
                        </DialogDescription>
                    </DialogHeader>

                    {/* Meta Properties Grid */}
                    <div className="grid grid-cols-2 gap-4 border-y py-4 text-sm dark:border-neutral-800">
                        <div className="flex items-center gap-3">
                            <div className="rounded-lg bg-neutral-100 p-2 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400">
                                <HardDrive size={18} />
                            </div>
                            <div className="flex flex-col">
                                <span className="text-xs text-muted-foreground">
                                    Ukuran File
                                </span>
                                <span className="font-semibold text-foreground">
                                    {media.size}
                                </span>
                            </div>
                        </div>

                        <div className="flex items-center gap-3">
                            <div className="rounded-lg bg-neutral-100 p-2 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400">
                                <Calendar size={18} />
                            </div>
                            <div className="flex flex-col">
                                <span className="text-xs text-muted-foreground">
                                    Diperbarui
                                </span>
                                <span className="font-semibold text-foreground">
                                    {formatDate(media.updated_at)}
                                </span>
                            </div>
                        </div>
                    </div>

                    {/* Action Footer */}
                    <div className="mt-6 flex flex-col gap-2 sm:flex-row sm:justify-end">
                        {onDelete && (
                            <Button
                                variant="outline"
                                onClick={() => {
                                    onOpenChange(false);
                                    onDelete();
                                }}
                                className="h-10 border-red-200 text-red-600 hover:bg-red-50 hover:text-red-700 dark:border-red-950/30 dark:hover:bg-red-950/20"
                            >
                                Hapus File
                            </Button>
                        )}
                        <div className="flex flex-1 gap-2 sm:justify-end">
                            <Button
                                variant="outline"
                                onClick={() => onOpenChange(false)}
                                className="h-10"
                            >
                                Tutup
                            </Button>
                            <Button
                                onClick={handleDownload}
                                className="h-10 gap-2 font-semibold shadow-md"
                            >
                                <Download size={16} /> Unduh File
                            </Button>
                        </div>
                    </div>
                </div>
            </DialogContent>
        </Dialog>
    );
}