import ActivityItem from '@/Components/social/ActivityItem';
import FollowButton from '@/Components/social/FollowButton';
import Avatar from '@/Components/shared/Avatar';
import EmptyState from '@/Components/shared/EmptyState';
import Seo from '@/Components/shared/Seo';
import { Button } from '@/Components/ui/button';
import PublicLayout from '@/Layouts/PublicLayout';
import { ActivityEvent } from '@/types/models';
import { Deferred, Link, router } from '@inertiajs/react';
import { Newspaper, Users } from 'lucide-react';
import { useState } from 'react';

type Suggestion = { id: number; name: string; username: string; avatar: string | null; ratings_count: number };
type Props = { items: ActivityEvent[]; next: string | null; following_count: number; suggestions?: Suggestion[] };

function Suggestions({ people }: { people?: Suggestion[] }) {
    if (!people?.length) return null;
    return (
        <ul className="divide-y divide-border rounded-2xl border border-border bg-card/60">
            {people.map((u) => (
                <li key={u.id} className="flex items-center gap-3 p-3">
                    <Avatar name={u.name} src={u.avatar} className="size-9" />
                    <Link href={route('users.show', u.username)} className="min-w-0 flex-1"><p className="truncate text-sm font-medium hover:underline">{u.name}</p><p className="text-caption">{u.ratings_count} ratings</p></Link>
                    <FollowButton username={u.username} following={false} size="sm" />
                </li>
            ))}
        </ul>
    );
}

export default function Feed({ items, next, following_count, suggestions }: Props) {
    const [loading, setLoading] = useState(false);
    const more = () => router.reload({ data: { before: next }, only: ['items', 'next'], onStart: () => setLoading(true), onFinish: () => setLoading(false) });

    return (
        <PublicLayout>
            <Seo title="Activity" />
            <div className="mx-auto grid max-w-4xl gap-8 lg:grid-cols-[minmax(0,1fr)_280px]">
                <div className="space-y-4">
                    <header><h1 className="text-h1">Activity</h1><p className="mt-1 text-sm text-muted-foreground">What people you follow are rating, playing and reviewing.</p></header>
                    {items.length === 0 ? (
                        following_count === 0
                            ? <EmptyState icon={Users} title="Follow people to fill your feed" description="Find people with similar taste on the right, or open a reviewer's profile from any game page." />
                            : <EmptyState icon={Newspaper} title="Nothing new yet" description="The people you follow haven't been active, or they keep their activity private." />
                    ) : (
                        <>
                            <div className="space-y-3">{items.map((e) => <ActivityItem key={e.id} event={e} />)}</div>
                            {next && <div className="flex justify-center pt-2"><Button variant="secondary" loading={loading} onClick={more}>Load more</Button></div>}
                        </>
                    )}
                </div>
                <aside className="space-y-3">
                    <h2 className="text-h3">People to follow</h2>
                    <Deferred data="suggestions" fallback={<div className="h-40 animate-pulse rounded-2xl bg-muted" />}><Suggestions people={suggestions} /></Deferred>
                </aside>
            </div>
        </PublicLayout>
    );
}