import { usePage } from "@inertiajs/react";
import Shell from "../components/Shell";
import {
    Badge,
    ButtonLink,
    Empty,
    Heading,
    Pagination,
    Panel,
    Search,
    Table,
} from "../components/ui";
import { person, type Enrollment, type Paginated, type Shared } from "../types";
export default function Enrollments({
    enrollments,
    search,
}: {
    enrollments: Paginated<Enrollment>;
    search: string;
}) {
    const { auth } = usePage<Shared>().props;
    const self = auth?.user_type === "student";
    return (
        <Shell
            title={
                self ? "My enrollments and COR" : "Student enrollment history"
            }
        >
            <Heading
                title={
                    self
                        ? "My enrollments and COR"
                        : "Student enrollment history"
                }
                description={
                    self
                        ? "Your confirmed enrollments and retained COR documents."
                        : "Student records across enrollment batches."
                }
                action={
                    !self ? (
                        <ButtonLink href="/enrollments" secondary>
                            Enrollment batches
                        </ButtonLink>
                    ) : undefined
                }
            />
            <Panel>
                <Search
                    url={self ? "/enrollments" : "/enrollment-records"}
                    value={search}
                    placeholder="Search Student name or number"
                />
                {enrollments.data.length ? (
                    <>
                        <div className="phase-table">
                            <Table
                                columns={[
                                    "Student",
                                    "Course / curriculum",
                                    "Year / Grade",
                                    "School Year / period",
                                    "Status",
                                    "",
                                ]}
                            >
                                {enrollments.data.map((e) => (
                                    <tr key={e.id}>
                                        <td>
                                            <strong>{person(e.student)}</strong>
                                            <small>
                                                {e.student.student_number}
                                            </small>
                                        </td>
                                        <td>
                                            {e.curriculum.program.name}
                                            <small>
                                                {e.curriculum.version}
                                            </small>
                                        </td>
                                        <td>{e.year_level}</td>
                                        <td>
                                            {e.period.school_year}
                                            <small>
                                                {e.period.name} ·{" "}
                                                {e.branch.name}
                                            </small>
                                        </td>
                                        <td>
                                            <Badge
                                                tone={
                                                    e.status === "enrolled"
                                                        ? "success"
                                                        : "warning"
                                                }
                                            >
                                                {e.status === "enrolled"
                                                    ? "Enrolled"
                                                    : e.status === "cancelled"
                                                      ? "Removed from batch"
                                                      : "Pending"}
                                            </Badge>
                                        </td>
                                        <td>
                                            <ButtonLink
                                                href={"/enrollments/" + e.id}
                                                secondary
                                            >
                                                View record
                                            </ButtonLink>
                                        </td>
                                    </tr>
                                ))}
                            </Table>
                        </div>
                        <div className="phase-cards">
                            {enrollments.data.map((e) => (
                                <article className="subject-choice" key={e.id}>
                                    <strong>{person(e.student)}</strong>
                                    <small>{e.student.student_number}</small>
                                    <p>
                                        {e.curriculum.program.name} · Year /
                                        Grade {e.year_level}
                                    </p>
                                    <p>
                                        {e.period.school_year} · {e.period.name}
                                        <br />
                                        {e.branch.name}
                                    </p>
                                    <p>
                                        <Badge
                                            tone={
                                                e.status === "enrolled"
                                                    ? "success"
                                                    : "warning"
                                            }
                                        >
                                            {e.status === "enrolled"
                                                ? "Enrolled"
                                                : e.status === "cancelled"
                                                  ? "Removed from batch"
                                                  : "Pending"}
                                        </Badge>
                                    </p>
                                    <ButtonLink
                                        href={`/enrollments/${e.id}`}
                                        secondary
                                    >
                                        View record
                                    </ButtonLink>
                                </article>
                            ))}
                        </div>
                        <Pagination page={enrollments} />
                    </>
                ) : (
                    <Empty title="No enrollment records" />
                )}
            </Panel>
        </Shell>
    );
}