import Shell from "../components/Shell";
import {
    Badge,
    Empty,
    Field,
    Heading,
    Panel,
    SaveForm,
} from "../components/ui";
import { person, type Section } from "../types";

export default function Sections({
    sections,
    can_end,
}: {
    sections: Section[];
    can_end: boolean;
}) {
    return (
        <Shell title="Sections">
            <Heading
                title="Sections"
                description="Continuing Student groups. Ending membership frees the Section place and preserves enrolled subjects and academic history."
            />
            {!sections.length && (
                <Panel>
                    <Empty title="No Sections available">
                        The School Administrator prepares Sections and their
                        intake availability.
                    </Empty>
                </Panel>
            )}
            <div className="form-stack">
                {sections.map((section) => {
                    const current =
                        section.memberships?.filter((m) => !m.ended_at) ?? [];
                    const ended =
                        section.memberships?.filter((m) => m.ended_at) ?? [];
                    return (
                        <Panel title={section.name} key={section.id}>
                            <p>
                                {section.branch?.name} · {current.length}/
                                {section.capacity} current members
                            </p>
                            {current.length ? (
                                current.map((m) => (
                                    <div className="record-item" key={m.id}>
                                        <div>
                                            <strong>{person(m.student)}</strong>
                                            <small>
                                                {m.student.student_number} ·
                                                Confirmed{" "}
                                                {new Date(
                                                    m.confirmed_at,
                                                ).toLocaleDateString("en-PH")}
                                            </small>
                                        </div>
                                        {can_end && (
                                            <details className="accordion">
                                                <summary>
                                                    End membership
                                                </summary>
                                                <div>
                                                    <p>
                                                        This ends the Section
                                                        membership. Subject
                                                        enrollments and grades
                                                        are retained.
                                                    </p>
                                                    <SaveForm
                                                        url={`/memberships/${m.id}/end`}
                                                        label="End Section membership"
                                                    >
                                                        <Field label="Reason">
                                                            <textarea
                                                                name="reason"
                                                                required
                                                                minLength={5}
                                                                maxLength={2000}
                                                            />
                                                        </Field>
                                                    </SaveForm>
                                                </div>
                                            </details>
                                        )}
                                    </div>
                                ))
                            ) : (
                                <p>No current members.</p>
                            )}
                            {ended.length > 0 && (
                                <details className="accordion">
                                    <summary>
                                        Previous memberships ({ended.length})
                                    </summary>
                                    <div>
                                        {ended.map((m) => (
                                            <div
                                                className="record-item"
                                                key={m.id}
                                            >
                                                <div>
                                                    <strong>
                                                        {person(m.student)} ·{" "}
                                                        {
                                                            m.student
                                                                .student_number
                                                        }
                                                    </strong>
                                                    <small>
                                                        Ended{" "}
                                                        {new Date(
                                                            m.ended_at!,
                                                        ).toLocaleDateString(
                                                            "en-PH",
                                                        )}
                                                    </small>
                                                    <p>{m.end_reason}</p>
                                                </div>
                                                <Badge>Ended</Badge>
                                            </div>
                                        ))}
                                    </div>
                                </details>
                            )}
                            <details className="accordion">
                                <summary>Usual Subject Classes</summary>
                                <div>
                                    {section.classes?.length ? (
                                        section.classes.map((c) => (
                                            <p key={c.id}>
                                                <a href={`/classes/${c.id}`}>
                                                    {c.subject.code} ·{" "}
                                                    {c.subject.name}
                                                </a>{" "}
                                                · {c.period.name}
                                            </p>
                                        ))
                                    ) : (
                                        <p>No usual classes linked yet.</p>
                                    )}
                                </div>
                            </details>
                        </Panel>
                    );
                })}
            </div>
        </Shell>
    );
}