import { Head, Link, usePage } from '@inertiajs/react';
import PublicLayout from '@/Layouts/PublicLayout';
import Card from '@/Components/UI/Card';
import Badge from '@/Components/UI/Badge';
import { PageProps } from '@/types';

interface CategoryRow {
    id: number;
    name: string;
    slug: string;
    description: string | null;
    admin_only_posting: boolean;
    threads_count: number;
    latest_thread: {
        title: string;
        slug: string;
        author_name: string;
        last_activity_at: string | null;
    } | null;
}

export default function Index({ categories }: { categories: CategoryRow[] }) {
    const { auth } = usePage<PageProps>().props;

    return (
        <PublicLayout>
            <Head title="Community Forum" />

            <section className="mx-auto max-w-5xl px-6 pb-20 pt-16 lg:px-margin-page">
                <p className="text-label-caps text-accent-gold">Community</p>
                <h1 className="text-institutional-header mt-4 text-on-surface">Forum</h1>
                <p className="text-body-lg mt-4 max-w-2xl text-on-surface-variant">
                    Connect with students, facilitators, and administrators across every JGCP Institute.
                </p>

                {!auth?.user && (
                    <Card className="mt-8 !bg-jgcp-navy text-white">
                        <p className="text-sm">
                            You can browse every discussion here. {' '}
                            <Link href={route('login')} className="font-semibold text-accent-gold hover:underline">
                                Sign in
                            </Link>{' '}
                            to start a thread or reply.
                        </p>
                    </Card>
                )}

                <div className="mt-8 space-y-4">
                    {categories.map((category) => (
                        <Link key={category.id} href={route('forum.category', category.slug)}>
                            <Card hover className="flex items-center justify-between gap-6">
                                <div>
                                    <div className="flex items-center gap-2">
                                        <h2 className="text-lg font-semibold text-on-surface">{category.name}</h2>
                                        {category.admin_only_posting && <Badge tone="gold">Admin Posts Only</Badge>}
                                    </div>
                                    {category.description && (
                                        <p className="mt-1 text-sm text-on-surface-variant">{category.description}</p>
                                    )}
                                    {category.latest_thread && (
                                        <p className="mt-3 text-xs text-on-surface-variant">
                                            Latest: <span className="font-medium text-on-surface">{category.latest_thread.title}</span>{' '}
                                            by {category.latest_thread.author_name} &middot; {category.latest_thread.last_activity_at}
                                        </p>
                                    )}
                                </div>
                                <div className="shrink-0 text-right">
                                    <p className="text-2xl font-semibold text-on-surface">{category.threads_count}</p>
                                    <p className="text-xs text-on-surface-variant">threads</p>
                                </div>
                            </Card>
                        </Link>
                    ))}
                </div>
            </section>
        </PublicLayout>
    );
}
