import { Link } from "@inertiajs/react";
import { useState } from "react";
import Shell from "../components/Shell";
import StudentAvatar from "../components/StudentAvatar";
import StudentEditor from "../components/StudentEditor";
import {
    Button,
    ButtonLink,
    Empty,
    Field,
    Heading,
    Pagination,
    Panel,
    Search,
    Table,
} from "../components/ui";
import { person, type Branch, type Paginated, type Student } from "../types";

export default function Students({
    students,
    branches,
    manage_branches,
    search,
    branch,
    can_manage,
}: {
    students: Paginated<Student>;
    branches: Branch[];
    manage_branches: Branch[];
    search: string;
    branch: number | "";
    can_manage: boolean;
}) {
    const [add, setAdd] = useState(false);
    return (
        <Shell title="Students">
            <Heading
                title="Student records"
                description="Find a student to view their details, academic records and files."
                action={
                    can_manage && (
                        <Button icon="plus" onClick={() => setAdd(true)}>
                            Add student
                        </Button>
                    )
                }
            />
            <Panel>
                <Search
                    value={search}
                    url="/students"
                    placeholder="Search student name or number"
                >
                    <Field label="Home branch">
                        <select name="branch" defaultValue={branch}>
                            <option value="">All permitted branches</option>
                            {branches.map((b) => (
                                <option value={b.id} key={b.id}>
                                    {b.name}
                                </option>
                            ))}
                        </select>
                    </Field>
                </Search>
                <p className="small muted">
                    {students.total}{" "}
                    {students.total === 1 ? "student" : "students"} found · Open
                    a student to view their complete record.
                </p>
                {students.data.length ? (
                    <>
                        <div className="student-directory-table">
                            <Table
                                columns={[
                                    "Student",
                                    "Student number",
                                    "Home branch",
                                    "Assigned curricula",
                                    "Action",
                                ]}
                            >
                                {students.data.map((s) => (
                                    <tr key={s.id}>
                                        <td>
                                            <Link
                                                className="student-list-person"
                                                href={`/students/${s.id}`}
                                            >
                                                <StudentAvatar student={s} />
                                                <span className="strong">
                                                    {person(s)}
                                                </span>
                                            </Link>
                                        </td>
                                        <td>
                                            <span className="student-number">
                                                {s.student_number}
                                            </span>
                                        </td>
                                        <td>{s.homeBranch?.name}</td>
                                        <td>
                                            {s.assignments
                                                ?.map(
                                                    (a) =>
                                                        `${a.curriculum.program.name} · ${a.curriculum.version}`,
                                                )
                                                .join(", ") ||
                                                "Not assigned yet"}
                                        </td>
                                        <td>
                                            <ButtonLink
                                                href={`/students/${s.id}`}
                                                secondary
                                            >
                                                View student
                                            </ButtonLink>
                                        </td>
                                    </tr>
                                ))}
                            </Table>
                        </div>
                        <div className="student-directory-cards">
                            {students.data.map((s) => (
                                <article
                                    className="student-directory-card"
                                    key={s.id}
                                >
                                    <Link
                                        className="student-list-person"
                                        href={`/students/${s.id}`}
                                    >
                                        <StudentAvatar student={s} />
                                        <strong>{person(s)}</strong>
                                    </Link>
                                    <dl>
                                        <div>
                                            <dt>Student number</dt>
                                            <dd className="student-number">
                                                {s.student_number}
                                            </dd>
                                        </div>
                                        <div>
                                            <dt>Home branch</dt>
                                            <dd>{s.homeBranch?.name}</dd>
                                        </div>
                                        <div>
                                            <dt>Assigned curricula</dt>
                                            <dd>
                                                {s.assignments
                                                    ?.map(
                                                        (a) =>
                                                            `${a.curriculum.program.name} · ${a.curriculum.version}`,
                                                    )
                                                    .join(", ") ||
                                                    "Not assigned yet"}
                                            </dd>
                                        </div>
                                    </dl>
                                    <ButtonLink
                                        href={`/students/${s.id}`}
                                        secondary
                                    >
                                        View student
                                    </ButtonLink>
                                </article>
                            ))}
                        </div>
                    </>
                ) : (
                    <Empty title="No matching students">
                        Search for an existing record before adding a new
                        student.
                    </Empty>
                )}
                <Pagination page={students} />
            </Panel>
            {add && (
                <StudentEditor
                    branches={manage_branches}
                    onClose={() => setAdd(false)}
                />
            )}
        </Shell>
    );
}