import { Head } from '@inertiajs/react';
import PublicLayout from '@/Layouts/PublicLayout';
import Card from '@/Components/UI/Card';

interface FacultyMember {
    id: number;
    name: string;
    title: string | null;
    bio: string | null;
    courses_count: number;
    institutes: string[];
}

export default function Index({ faculty }: { faculty: FacultyMember[] }) {
    return (
        <PublicLayout>
            <Head title="Faculty" />

            <section className="mx-auto max-w-5xl px-6 pb-10 pt-16 lg:px-margin-page">
                <p className="text-label-caps text-accent-gold">Faculty Directory</p>
                <h1 className="text-institutional-header mt-4 text-on-surface">Meet Our Faculty</h1>
                <p className="text-body-lg mt-4 max-w-2xl text-on-surface-variant">
                    Every course within Jolax Global Certification Programmes is delivered by named
                    facilitators accountable for content quality, student engagement, and assessment integrity.
                </p>
            </section>

            <section className="mx-auto max-w-5xl px-6 pb-section-gap lg:px-margin-page">
                <div className="grid gap-6 md:grid-cols-2">
                    {faculty.map((member) => (
                        <Card key={member.id}>
                            <div className="flex items-start gap-4">
                                <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-jgcp-navy text-lg font-semibold text-white">
                                    {member.name
                                        .split(' ')
                                        .map((part) => part[0])
                                        .join('')}
                                </div>
                                <div>
                                    <h2 className="text-course-title text-on-surface">{member.name}</h2>
                                    {member.title && (
                                        <p className="text-sm text-on-surface-variant">{member.title}</p>
                                    )}
                                </div>
                            </div>

                            {member.bio && (
                                <p className="text-body-md mt-4 text-on-surface-variant">{member.bio}</p>
                            )}

                            <div className="mt-4 flex flex-wrap items-center gap-2 border-t border-outline-variant pt-4 text-xs text-on-surface-variant">
                                <span className="font-medium text-on-surface">
                                    {member.courses_count} Course{member.courses_count === 1 ? '' : 's'}
                                </span>
                                {member.institutes.length > 0 && <span>·</span>}
                                {member.institutes.map((institute) => (
                                    <span
                                        key={institute}
                                        className="rounded-full bg-surface-container-high px-2 py-0.5"
                                    >
                                        {institute}
                                    </span>
                                ))}
                            </div>
                        </Card>
                    ))}

                    {faculty.length === 0 && (
                        <Card className="md:col-span-2">
                            <p className="text-body-md text-on-surface-variant">
                                Faculty profiles will appear here once facilitators are assigned to courses.
                            </p>
                        </Card>
                    )}
                </div>
            </section>
        </PublicLayout>
    );
}
