import { usePage } from "@inertiajs/react";
import { useState } from "react";
import Shell from "../components/Shell";
import {
    Badge,
    Button,
    ButtonLink,
    Dialog,
    Empty,
    Field,
    Heading,
    Panel,
    SaveForm,
    Table,
} from "../components/ui";
import type { BranchPeriod, BranchSetting, Options, Shared } from "../types";
import type { Batch } from "../enrollment-workflow";

export default function EnrollmentBatches({
    batches,
    options,
    branch_settings,
    branch_periods,
    can_open,
}: {
    batches: Batch[];
    options: Options;
    branch_settings: BranchSetting[];
    branch_periods: BranchPeriod[];
    can_open: boolean;
}) {
    const { levels, permissions } = usePage<Shared>().props;
    const [opening, setOpening] = useState(false),
        [branch, setBranch] = useState(""),
        [level, setLevel] = useState(""),
        [year, setYear] = useState("");
    const [filter, setFilter] = useState("open");
    const settings = branch_settings.filter(
        (s) => s.branch_id === Number(branch),
    );
    const allowed = options.periods.filter((p) =>
        branch_periods.some(
            (m) =>
                m.branch_id === Number(branch) &&
                m.level === level &&
                m.academic_period_id === p.id,
        ),
    );
    const years = [...new Set(allowed.map((p) => p.school_year))];
    const shown = batches.filter(
        (b) => filter === "all" || b.status === filter,
    );
    return (
        <Shell title="Enrollments">
            <Heading
                title="Enrollments"
                description="Open enrollment for a Branch, school level and School Year. Add Students inside that batch."
                action={
                    can_open ? (
                        <Button onClick={() => setOpening(true)}>
                            Open Enrollment
                        </Button>
                    ) : undefined
                }
            />
            <div className="actions">
                <Button
                    variant={filter === "open" ? "primary" : "secondary"}
                    onClick={() => setFilter("open")}
                >
                    Active enrollment
                </Button>
                <Button
                    variant={filter === "all" ? "primary" : "secondary"}
                    onClick={() => setFilter("all")}
                >
                    All batches
                </Button>
                {permissions.includes("enrollment.manage") && (
                    <ButtonLink href="/enrollment-records" secondary>
                        Student enrollment history
                    </ButtonLink>
                )}
            </div>
            <Panel
                title={
                    filter === "open"
                        ? "Active enrollment batches"
                        : "Enrollment batches"
                }
            >
                {shown.length ? (
                    <>
                        <div className="phase-table">
                            <Table
                                columns={[
                                    "School Year / semester",
                                    "Branch",
                                    "School level",
                                    "Status",
                                    "Students",
                                    "",
                                ]}
                            >
                                {shown.map((b) => (
                                    <tr key={b.id}>
                                        <td>
                                            <strong>
                                                {b.period.school_year}
                                            </strong>
                                            <small>{b.period.name}</small>
                                        </td>
                                        <td>{b.branch.name}</td>
                                        <td>{levels[b.level]}</td>
                                        <td>
                                            <Badge
                                                tone={
                                                    b.status === "open"
                                                        ? "success"
                                                        : "neutral"
                                                }
                                            >
                                                {b.status === "open"
                                                    ? "Open"
                                                    : "Closed"}
                                            </Badge>
                                        </td>
                                        <td>{b.applications_count}</td>
                                        <td>
                                            <ButtonLink
                                                href={
                                                    "/enrollment-batches/" +
                                                    b.id
                                                }
                                                secondary
                                            >
                                                View batch
                                            </ButtonLink>
                                        </td>
                                    </tr>
                                ))}
                            </Table>
                        </div>
                        <div className="phase-cards">
                            {shown.map((b) => (
                                <article className="subject-choice" key={b.id}>
                                    <strong>
                                        {levels[b.level]} ·{" "}
                                        {b.period.school_year}
                                    </strong>
                                    <p>
                                        {b.period.name}
                                        <br />
                                        {b.branch.name}
                                    </p>
                                    <p>
                                        <Badge
                                            tone={
                                                b.status === "open"
                                                    ? "success"
                                                    : "neutral"
                                            }
                                        >
                                            {b.status === "open"
                                                ? "Open"
                                                : "Closed"}
                                        </Badge>{" "}
                                        · {b.applications_count} Students
                                    </p>
                                    <ButtonLink
                                        href={`/enrollment-batches/${b.id}`}
                                        secondary
                                    >
                                        View batch
                                    </ButtonLink>
                                </article>
                            ))}
                        </div>
                    </>
                ) : (
                    <Empty title="No active enrollment">
                        Open an enrollment batch after configuring its Branch
                        calendar in School setup.
                    </Empty>
                )}
            </Panel>
            {opening && (
                <Dialog
                    title="Open Enrollment"
                    onClose={() => setOpening(false)}
                >
                    <SaveForm
                        url="/enrollment-batches"
                        label="Open Enrollment"
                        onSuccess={() => setOpening(false)}
                    >
                        <Field label="Branch">
                            <select
                                name="branch_id"
                                required
                                value={branch}
                                onChange={(e) => {
                                    setBranch(e.target.value);
                                    setLevel("");
                                    setYear("");
                                }}
                            >
                                <option value="">Choose Branch</option>
                                {options.branches.map((b) => (
                                    <option key={b.id} value={b.id}>
                                        {b.name}
                                    </option>
                                ))}
                            </select>
                        </Field>
                        <Field label="School level">
                            <select
                                name="level"
                                required
                                value={level}
                                onChange={(e) => {
                                    setLevel(e.target.value);
                                    setYear("");
                                }}
                            >
                                <option value="">Choose school level</option>
                                {settings.map((s) => (
                                    <option key={s.id} value={s.level}>
                                        {levels[s.level]} ·{" "}
                                        {s.enrollment_kind === "year"
                                            ? "Yearly"
                                            : "Semester-based"}
                                    </option>
                                ))}
                            </select>
                        </Field>
                        <Field label="School Year">
                            <select
                                required
                                value={year}
                                onChange={(e) => setYear(e.target.value)}
                            >
                                <option value="">Choose School Year</option>
                                {years.map((y) => (
                                    <option key={y}>{y}</option>
                                ))}
                            </select>
                        </Field>
                        <Field label="Enrollment period">
                            <select
                                name="academic_period_id"
                                required
                                key={branch + level + year}
                            >
                                <option value="">
                                    Choose semester / full year
                                </option>
                                {allowed
                                    .filter((p) => p.school_year === year)
                                    .map((p) => (
                                        <option
                                            value={p.id}
                                            key={p.id}
                                            disabled={batches.some(
                                                (b) =>
                                                    b.branch_id ===
                                                        Number(branch) &&
                                                    b.level === level &&
                                                    b.academic_period_id ===
                                                        p.id,
                                            )}
                                        >
                                            {p.name}
                                            {batches.some(
                                                (b) =>
                                                    b.branch_id ===
                                                        Number(branch) &&
                                                    b.level === level &&
                                                    b.academic_period_id ===
                                                        p.id,
                                            )
                                                ? " · Batch already exists"
                                                : ""}
                                        </option>
                                    ))}
                            </select>
                        </Field>
                        <p className="small">
                            Only calendars enabled for this Branch appear.
                            Reopen an existing batch from its view.
                        </p>
                    </SaveForm>
                </Dialog>
            )}
        </Shell>
    );
}