import Shell from "../components/Shell";
import { Button, Heading, Table } from "../components/ui";
import type { Enrollment } from "../types";
export default function Cor({ enrollment: e }: { enrollment: Enrollment }) {
    const c = e.cor_snapshot;
    if (!c) return null;
    return (
        <Shell title={e.cor_number ?? "COR"}>
            <Heading
                title="Certificate of registration"
                action={
                    <Button icon="file" onClick={() => window.print()}>
                        Print COR
                    </Button>
                }
            />
            <article className="cor-document">
                <header className="cor-heading">
                    <h2>{c.school}</h2>
                    <p>{c.branch}</p>
                    <h1>Certificate of registration</h1>
                    <strong>{e.cor_number}</strong>
                    <p>Version {e.cor_version || 1}</p>
                </header>
                <div className="form-grid">
                    <div>
                        <small>Student</small>
                        <strong>{c.student_name}</strong>
                        <p>{c.student_number}</p>
                    </div>
                    <div>
                        <small>Academic period</small>
                        <strong>{c.period}</strong>
                    </div>
                    <div>
                        <small>Course / program</small>
                        <strong>{c.program}</strong>
                        <p>Year / grade {c.year_level}</p>
                    </div>
                    <div>
                        <small>Curriculum version</small>
                        <strong>{c.curriculum}</strong>
                    </div>
                    <div>
                        <small>Home Section</small>
                        <strong>
                            {c.home_section || "No Section recorded"}
                        </strong>
                    </div>
                </div>
                <Table
                    columns={[
                        "Subject code",
                        "Description",
                        "Units",
                        "Classification",
                        "Class code",
                        "Schedule",
                        "Teacher",
                    ]}
                >
                    {c.subjects.map((s) => (
                        <tr key={s.code}>
                            <td>{s.code}</td>
                            <td>{s.name}</td>
                            <td>{s.units}</td>
                            <td>{s.classification || "Not recorded"}</td>
                            <td>{s.section}</td>
                            <td>{s.schedule || "—"}</td>
                            <td>{s.teacher}</td>
                        </tr>
                    ))}
                </Table>
                <p>
                    Total units:{" "}
                    {c.subjects.reduce((n, s) => n + Number(s.units), 0)}
                </p>
                <p className="small">
                    Issued on{" "}
                    {e.cor_issued_at || e.finalized_at
                        ? new Date(
                              e.cor_issued_at || e.finalized_at!,
                          ).toLocaleDateString("en-PH")
                        : ""}
                    . This document records the finalized enrollment and subject
                    load.
                </p>
            </article>
        </Shell>
    );
}