import {useNavigate, useParams} from 'react-router-dom';
import {useQuery} from '@tanstack/react-query';
import {workspaceProjects} from '@/client';
import {Avatar, AvatarFallback} from '@/components/ui/avatar';
import {Badge} from '@/components/ui/badge';
import {Button} from '@/components/ui/button';
import {Spinner} from '@/components/ui/spinner';
import {Plus} from 'lucide-react';

export function WorkspaceProjects() {
    const {workspace_slug} = useParams<{workspace_slug: string}>();
    const navigate = useNavigate();

    const {data, isLoading} = useQuery({
        queryKey: ['workspaceProjects', workspace_slug],
        queryFn: async () => {
            const resp = await workspaceProjects({
                path: {slug: workspace_slug!},
            });
            return resp.data?.data ?? null;
        },
        enabled: !!workspace_slug,
    });

    if (isLoading) {
        return (
            <div className="flex items-center justify-center h-64">
                <Spinner/>
            </div>
        );
    }

    return (
        <div className="flex-1 p-6">
            <div className="flex items-center justify-between mb-6">
                <h1 className="text-xl font-semibold">Projects ({data?.total ?? 0})</h1>
                <Button
                    size="sm"
                    onClick={() => navigate('/init/project')}
                >
                    <Plus className="mr-2 h-4 w-4"/>
                    New Project
                </Button>
            </div>

            {data?.projects && data.projects.length > 0 ? (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {data.projects.map((project) => (
                        <div
                            key={project.uid}
                            className="border rounded-xl p-4 hover:border-zinc-400 dark:hover:border-zinc-600 transition-colors cursor-pointer"
                            onClick={() => navigate(`/project/${project.name}`)}
                        >
                            <div className="flex items-start gap-3">
                                <Avatar className="h-10 w-10 rounded-lg">
                                    <AvatarFallback className="rounded-lg bg-zinc-100 dark:bg-zinc-800 text-sm font-semibold">
                                        {project.display_name.charAt(0).toUpperCase()}
                                    </AvatarFallback>
                                </Avatar>
                                <div className="flex-1 min-w-0">
                                    <div className="flex items-center gap-2">
                                        <h3 className="font-semibold text-sm truncate">{project.display_name}</h3>
                                        {!project.is_public && (
                                            <Badge variant="outline" className="text-[10px] px-1.5 py-0">Private</Badge>
                                        )}
                                    </div>
                                    <p className="text-xs text-muted-foreground truncate mt-0.5">
                                        {project.description || 'No description'}
                                    </p>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            ) : (
                <div className="flex flex-col items-center justify-center py-16 text-center border border-dashed rounded-xl">
                    <p className="text-muted-foreground mb-4">
                        No projects in this workspace yet.
                    </p>
                    <Button
                        variant="outline"
                        onClick={() => navigate('/init/project')}
                    >
                        <Plus className="mr-2 h-4 w-4"/>
                        Create your first project
                    </Button>
                </div>
            )}
        </div>
    );
}
