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

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

import { MediaEmptyState } from './MediaEmptyState';

interface FolderGridProps {
    folders: TaskFolder[];
    onOpen: (key: string) => void;
}

/** Grid folder task. Klik kartu untuk masuk ke isi folder. */
export function FolderGrid({ folders, onOpen }: FolderGridProps) {
    if (folders.length === 0) {
        return (
            <MediaEmptyState
                title="No folders found"
                description="No tasks have attachments yet, or none match your search."
            />
        );
    }

    return (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {folders.map((folder) => {
                const imageCount = folder.files.filter(
                    (file) => file.type === 'image',
                ).length;
                const documentCount = folder.files.length - imageCount;

                return (
                    <button
                        key={folder.key}
                        type="button"
                        onClick={() => onOpen(folder.key)}
                        className="group cursor-pointer text-left"
                    >
                        <Card className="h-full border-2 transition-all hover:border-primary/50 hover:shadow-sm">
                            <CardHeader className="p-4 pb-2">
                                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-100 text-amber-600 transition-colors group-hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-500">
                                    <Folder
                                        size={28}
                                        fill="currentColor"
                                        fillOpacity={0.2}
                                    />
                                </div>
                            </CardHeader>
                            <CardContent className="p-4 pt-0">
                                <h3
                                    className="line-clamp-2 min-h-10 font-bold transition-colors group-hover:text-primary"
                                    title={folder.name}
                                >
                                    {folder.name}
                                </h3>
                                <div className="mt-1 flex items-center justify-between border-t pt-3 text-[11px] text-muted-foreground">
                                    <span>{folder.files.length} file</span>
                                    <span>{formatDate(folder.updatedAt)}</span>
                                </div>
                                <div className="mt-2 flex items-center gap-2 text-[11px] text-muted-foreground">
                                    {imageCount > 0 && (
                                        <span className="flex items-center gap-1">
                                            <ImageIcon size={12} />
                                            {imageCount}
                                        </span>
                                    )}
                                    {documentCount > 0 && (
                                        <span className="flex items-center gap-1">
                                            <FileText size={12} />
                                            {documentCount}
                                        </span>
                                    )}
                                </div>
                            </CardContent>
                        </Card>
                    </button>
                );
            })}
        </div>
    );
}