import { usePage } from "@inertiajs/react";
import Shell from "../components/Shell";
import {
    Badge,
    Empty,
    Field,
    Heading,
    Panel,
    SaveForm,
} from "../components/ui";
import type { Shared } from "../types";

interface Target {
    section_id?: number;
    course_offering_id?: number;
    name: string;
    count: number;
    capacity: number;
    approved: boolean;
}
interface Review {
    id: number;
    student: { student_number: string; first_name: string; last_name: string };
    period: string;
    targets: Target[];
}
export default function Capacity({ enrollments }: { enrollments: Review[] }) {
    const { permissions } = usePage<Shared>().props;
    return (
        <Shell title="Capacity exceptions">
            <Heading
                title="Capacity exceptions"
                description="Approve one Student’s assignment above a configured limit. The configured limit stays unchanged, and normal eligibility and clearance checks still apply."
            />
            {!enrollments.length && (
                <Panel>
                    <Empty title="No capacity exceptions to review">
                        Draft enrollments with a full Section or Subject Class
                        in your scope will appear here.
                    </Empty>
                </Panel>
            )}
            <div className="form-stack">
                {enrollments.map((e) => (
                    <Panel
                        title={`${e.student.first_name} ${e.student.last_name}`}
                        key={e.id}
                    >
                        <p>
                            {e.student.student_number} · {e.period}
                        </p>
                        {permissions.includes("enrollment.manage") && (
                            <a href={`/enrollments/${e.id}`}>View enrollment</a>
                        )}
                        {e.targets.map((target, i) => (
                            <div className="record-item" key={i}>
                                <div>
                                    <strong>{target.name}</strong>
                                    <small>
                                        {target.count}/{target.capacity}{" "}
                                        Students ·{" "}
                                        {target.section_id
                                            ? "Section"
                                            : "Subject Class"}
                                    </small>
                                </div>
                                {target.approved ? (
                                    <Badge tone="success">
                                        Approved for this assignment
                                    </Badge>
                                ) : (
                                    <SaveForm
                                        url={`/enrollments/${e.id}/capacity`}
                                        label="Approve this Student’s exception"
                                    >
                                        <input
                                            type="hidden"
                                            name={
                                                target.section_id
                                                    ? "section_id"
                                                    : "course_offering_id"
                                            }
                                            value={
                                                target.section_id ??
                                                target.course_offering_id
                                            }
                                        />
                                        <Field label="Approval reason">
                                            <textarea
                                                name="reason"
                                                required
                                                minLength={5}
                                                maxLength={2000}
                                            />
                                        </Field>
                                    </SaveForm>
                                )}
                            </div>
                        ))}
                    </Panel>
                ))}
            </div>
        </Shell>
    );
}