import { useQuery } from '@tanstack/react-query';
import { Activity, Clock } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { getUserActivity, type UserActivityItem } from '@/client';
import { formatDate } from './utils';

export function UserActivity({ username }: { username: string }) {
    const { data, isLoading, isError } = useQuery({
        queryKey: ['user-activity', username],
        queryFn: async () => {
            const resp = await getUserActivity({ 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">
                    Loading activity...
                </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 activity.
                </CardContent>
            </Card>
        );
    }

    if (data.items.length === 0) {
        return (
            <Card className="border-border/40">
                <CardContent className="py-12 text-center">
                    <Activity className="mx-auto h-8 w-8 text-muted-foreground/40" />
                    <p className="mt-2 text-sm text-muted-foreground">No activity yet</p>
                </CardContent>
            </Card>
        );
    }

    const getTypeColor = (type: string) => {
        if (type === 'auth') return 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400';
        return 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400';
    };

    return (
        <div className="space-y-3">
            {data.items.map((item: UserActivityItem) => (
                <Card key={`${item.activity_type}-${item.id}`} className="border-border/40">
                    <CardContent className="flex items-start gap-3 py-4">
                        <span className={`mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-medium ${getTypeColor(item.activity_type)}`}>
                            {item.activity_type === 'auth' ? 'A' : 'P'}
                        </span>
                        <div className="min-w-0 flex-1">
                            <p className="text-sm font-medium">{item.title}</p>
                            {item.resource_name && (
                                <p className="text-xs text-muted-foreground mt-0.5">
                                    Project: {item.resource_name}
                                </p>
                            )}
                            <div className="flex items-center gap-1 mt-1 text-xs text-muted-foreground/70">
                                <Clock className="h-3 w-3" />
                                {formatDate(item.created_at)}
                            </div>
                        </div>
                    </CardContent>
                </Card>
            ))}
        </div>
    );
}