import { FileText, Image as ImageIcon } from 'lucide-react';

import { Badge } from '@/components/ui/badge';
import {
    Card,
    CardContent,
    CardFooter,
    CardHeader,
} from '@/components/ui/card';
import { formatDate } from '@/lib/utils';
import type { MediaFile } from '@/types/media';

import { MediaEmptyState } from './MediaEmptyState';

interface FileGridProps {
    files: MediaFile[];
    onView: (file: MediaFile) => void;
}

/** Grid file di dalam satu folder task. Klik kartu untuk melihat detail. */
export function FileGrid({ files, onView }: FileGridProps) {
    if (files.length === 0) {
        return (
            <MediaEmptyState
                title="No files found"
                description="Try adjusting your search or filters."
            />
        );
    }

    return (
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {files.map((item) => (
                <button
                    key={item.id}
                    type="button"
                    onClick={() => onView(item)}
                    className="group cursor-pointer text-left"
                >
                    <Card className="h-full overflow-hidden border-2 transition-all hover:border-primary/50">
                        <CardHeader className="p-0">
                            <div className="aspect-video w-full overflow-hidden bg-muted">
                                {item.thumbnail ? (
                                    <img
                                        src={item.thumbnail}
                                        alt={item.name}
                                        className="h-full w-full object-cover transition-transform group-hover:scale-105"
                                    />
                                ) : (
                                    <div className="flex h-full w-full items-center justify-center">
                                        {item.type === 'document' ? (
                                            <FileText
                                                className="text-muted-foreground"
                                                size={48}
                                            />
                                        ) : (
                                            <ImageIcon
                                                className="text-muted-foreground"
                                                size={48}
                                            />
                                        )}
                                    </div>
                                )}
                            </div>
                        </CardHeader>
                        <CardContent className="p-4">
                            <h3
                                className="line-clamp-1 font-bold transition-colors group-hover:text-primary"
                                title={item.name}
                            >
                                {item.name}
                            </h3>
                            <div className="mt-2 flex items-center justify-between text-xs text-muted-foreground">
                                <span>{item.size}</span>
                                <span>{formatDate(item.updated_at)}</span>
                            </div>
                        </CardContent>
                        <CardFooter className="flex gap-2 p-4 pt-0">
                            <Badge
                                variant="secondary"
                                className="text-[10px] tracking-wider uppercase"
                            >
                                {item.type}
                            </Badge>
                        </CardFooter>
                    </Card>
                </button>
            ))}
        </div>
    );
}