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 ProgrammeRow {
    id: number;
    title: string;
    status: string;
    institute: { name: string };
    courses_count: number;
}

export default function Index({ programmes }: { programmes: ProgrammeRow[] }) {
    const destroy = (programme: ProgrammeRow) => {
        if (confirm(`Remove "${programme.title}"? This cannot be undone.`)) {
            router.delete(route('admin.programmes.destroy', programme.id));
        }
    };

    return (
        <AdminLayout>
            <Head title="Programmes" />

            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-institute-title text-on-surface">Professional Certification Programmes</h1>
                    <p className="text-body-md text-on-surface-variant">
                        Each Programme requires three to five compulsory courses.
                    </p>
                </div>
                <Button href={route('admin.programmes.create')} variant="action">
                    + New Programme
                </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">Title</th>
                            <th className="px-6 py-3 font-medium">Institute</th>
                            <th className="px-6 py-3 font-medium">Status</th>
                            <th className="px-6 py-3 font-medium">Courses</th>
                            <th className="px-6 py-3 font-medium">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {programmes.map((programme) => (
                            <tr key={programme.id} className="border-b border-outline-variant last:border-0">
                                <td className="px-6 py-3 font-medium text-on-surface">{programme.title}</td>
                                <td className="px-6 py-3 text-on-surface-variant">{programme.institute.name}</td>
                                <td className="px-6 py-3">
                                    <Badge tone={programme.status === 'published' ? 'published' : 'draft'}>
                                        {programme.status}
                                    </Badge>
                                </td>
                                <td className="px-6 py-3 text-on-surface-variant">
                                    {programme.courses_count}
                                    {(programme.courses_count < 3 || programme.courses_count > 5) && (
                                        <span className="ml-2 text-xs text-error">outside 3–5 range</span>
                                    )}
                                </td>
                                <td className="px-6 py-3">
                                    <div className="flex gap-3">
                                        <Link
                                            href={route('admin.programmes.edit', programme.id)}
                                            className="text-jgcp-navy hover:underline"
                                        >
                                            Edit
                                        </Link>
                                        <button onClick={() => destroy(programme)} className="text-error hover:underline">
                                            Delete
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </Card>
        </AdminLayout>
    );
}
