import { Head, Link, router } from '@inertiajs/react';
import AdminLayout from '@/Layouts/AdminLayout';
import Card from '@/Components/UI/Card';
import Badge from '@/Components/UI/Badge';
import Button from '@/Components/UI/Button';

interface CategoryRow {
    id: number;
    name: string;
    admin_only_posting: boolean;
    sort_order: number;
    threads_count: number;
}

export default function Index({ categories }: { categories: CategoryRow[] }) {
    const destroy = (category: CategoryRow) => {
        if (confirm(`Remove "${category.name}"? All of its threads and replies will be deleted.`)) {
            router.delete(route('admin.forum-categories.destroy', category.id));
        }
    };

    return (
        <AdminLayout>
            <Head title="Forum Categories" />

            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-institute-title text-on-surface">Forum Categories</h1>
                    <p className="text-body-md text-on-surface-variant">
                        Manage the categories students and staff see on the Community Forum.
                    </p>
                </div>
                <Button href={route('admin.forum-categories.create')} variant="action">
                    + New Category
                </Button>
            </div>

            <Card className="mt-6 overflow-x-auto p-0">
                <table className="w-full text-left text-sm">
                    <thead className="border-b border-outline-variant text-on-surface-variant">
                        <tr>
                            <th className="px-6 py-3 font-medium">Name</th>
                            <th className="px-6 py-3 font-medium">Posting</th>
                            <th className="px-6 py-3 font-medium">Order</th>
                            <th className="px-6 py-3 font-medium">Threads</th>
                            <th className="px-6 py-3 font-medium">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {categories.map((category) => (
                            <tr key={category.id} className="border-b border-outline-variant last:border-0">
                                <td className="px-6 py-3 font-medium text-on-surface">{category.name}</td>
                                <td className="px-6 py-3">
                                    {category.admin_only_posting ? (
                                        <Badge tone="gold">Admin Only</Badge>
                                    ) : (
                                        <Badge tone="published">Everyone</Badge>
                                    )}
                                </td>
                                <td className="px-6 py-3 text-on-surface-variant">{category.sort_order}</td>
                                <td className="px-6 py-3 text-on-surface-variant">{category.threads_count}</td>
                                <td className="px-6 py-3">
                                    <div className="flex gap-3">
                                        <Link
                                            href={route('admin.forum-categories.edit', category.id)}
                                            className="text-jgcp-navy hover:underline"
                                        >
                                            Edit
                                        </Link>
                                        <button onClick={() => destroy(category)} className="text-error hover:underline">
                                            Delete
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </Card>
        </AdminLayout>
    );
}
