import { Link } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { Star, FolderGit2, Loader2 } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { getUserStars } from '@/client';

export function StarsList({ username }: { username: string }) {
    const { data, isLoading, isError } = useQuery({
        queryKey: ['user-stars', username],
        queryFn: async () => {
            const resp = await getUserStars({ path: { username } });
            return resp.data?.data ?? null;
        },
        retry: false,
    });

    if (isLoading) {
        return (
            <Card className="border-border/40">
                <CardContent className="py-8 text-center text-sm text-muted-foreground">
                    <Loader2 className="mx-auto h-4 w-4 animate-spin" />
                    Loading stars...
                </CardContent>
            </Card>
        );
    }

    if (isError || !data) {
        return (
            <Card className="border-border/40">
                <CardContent className="py-8 text-center text-sm text-muted-foreground">
                    Unable to load stars.
                </CardContent>
            </Card>
        );
    }

    const hasRepos = (data.repos ?? []).length > 0;
    const hasProjects = (data.projects ?? []).length > 0;

    if (!hasRepos && !hasProjects) {
        return (
            <Card className="border-border/40">
                <CardContent className="py-12 text-center">
                    <Star className="mx-auto h-8 w-8 text-muted-foreground/40" />
                    <p className="mt-2 text-sm text-muted-foreground">No starred repos or projects yet</p>
                </CardContent>
            </Card>
        );
    }

    return (
        <div className="space-y-6">
            {hasRepos && (
                <div>
                    <h3 className="mb-3 text-sm font-semibold text-foreground">Repositories</h3>
                    <div className="space-y-2">
                        {(data.repos ?? []).map((repo: { uid: string; repo_name: string; owner: string; description?: string | null; is_private: boolean }) => (
                            <Link
                                key={repo.uid}
                                to={`/repository/${repo.owner}/${repo.repo_name}`}
                                className="flex items-center gap-3 rounded-lg border border-border/40 p-3 transition-all hover:border-border hover:bg-muted/30"
                            >
                                <Star className="h-4 w-4 shrink-0 text-muted-foreground" />
                                <div className="min-w-0 flex-1">
                                    <p className="text-sm font-medium">{repo.owner}/{repo.repo_name}</p>
                                    {repo.description && (
                                        <p className="truncate text-xs text-muted-foreground">{repo.description}</p>
                                    )}
                                </div>
                                {repo.is_private && (
                                    <span className="shrink-0 rounded border border-border/40 px-1.5 py-0.5 text-[10px] text-muted-foreground">Private</span>
                                )}
                            </Link>
                        ))}
                    </div>
                </div>
            )}

            {hasProjects && (
                <div>
                    <h3 className="mb-3 text-sm font-semibold text-foreground">Projects</h3>
                    <div className="space-y-2">
                        {(data.projects ?? []).map((proj: { uid: string; name: string; display_name: string; description?: string | null; is_public: boolean }) => (
                            <Link
                                key={proj.uid}
                                to={`/project/${proj.name}`}
                                className="flex items-center gap-3 rounded-lg border border-border/40 p-3 transition-all hover:border-border hover:bg-muted/30"
                            >
                                <FolderGit2 className="h-4 w-4 shrink-0 text-muted-foreground" />
                                <div className="min-w-0 flex-1">
                                    <p className="text-sm font-medium">{proj.display_name}</p>
                                    {proj.description && (
                                        <p className="truncate text-xs text-muted-foreground">{proj.description}</p>
                                    )}
                                </div>
                                {!proj.is_public && (
                                    <span className="shrink-0 rounded border border-border/40 px-1.5 py-0.5 text-[10px] text-muted-foreground">Private</span>
                                )}
                            </Link>
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
}
