"use client";

import { useState } from "react";
import { useLang } from "@/context/LanguageContext";
import {
  Alert,
  Button,
  DatePicker,
  EmptyState,
  Input,
  Modal,
  PageHeader,
  Pagination,
  Select,
  StatusBadge,
  Textarea,
  usePagination,
} from "@/components/ui";
import { api, useApi } from "@/lib/client";
import { formatDate } from "@/lib/utils";
import { IconEdit, IconPlus, IconTrash, IconUser } from "@/components/icons";
import { emsConfirm } from "@/components/ConfirmDialog";

interface Program {
  id: number;
  name: string;
  nameBn: string | null;
  code: string;
  gradeScale: string;
}
interface Term {
  id: number;
  programId: number;
  name: string;
  nameBn: string | null;
  sequence: number;
}
interface Student {
  id: number;
  studentIdNo: string;
  name: string;
  nameBn: string | null;
  gender: string;
  dob: string | null;
  guardianName: string | null;
  guardianPhone: string | null;
  phone: string | null;
  email: string | null;
  address: string | null;
  sessionYear: string;
  currentTermId: number | null;
  boardRollNo: string | null;
  registrationNo: string | null;
  admissionDate: string | null;
  status: string;
  note: string | null;
  program: { id: number; name: string; nameBn: string | null; gradeScale: string };
  currentTerm: { id: number; name: string; nameBn: string | null } | null;
  _count?: { enrollments: number };
}
interface StudentDetail extends Student {
  program: { id: number; name: string; nameBn: string | null; gradeScale: string; degreeLevel: string; department: string | null; faculty: string | null };
  enrollments: {
    id: number;
    status: string;
    offering: {
      id: number; sessionYear: string; section: string | null;
      course: { id: number; code: string; name: string; nameBn: string | null; credits: number; courseType: string; term: { name: string; nameBn: string | null } | null };
      staff: { name: string; nameBn: string | null } | null;
    };
  }[];
  marks: {
    id: number;
    marks: number | null;
    absent: boolean;
    schedule: {
      id: number; fullMarks: number; passMarks: number; examDate: string | null;
      course: { id: number; code: string; name: string; nameBn: string | null; credits: number };
      exam: { id: number; name: string; examType: string; resultPublished: boolean; term: { name: string; nameBn: string | null } | null };
    };
  }[];
}
interface Offering {
  id: number;
  courseId: number;
  sessionYear: string;
  section: string | null;
  course: { id: number; code: string; name: string; nameBn: string | null; credits: number; program: { id: number; name: string; nameBn: string | null } | null; term: { id: number; name: string; nameBn: string | null } | null };
  _count?: { enrollments: number };
}

const STATUSES = ["ACTIVE", "GRADUATED", "DROPPED", "SUSPENDED", "TRANSFERRED"];
const ENROLL_STATUSES = ["ENROLLED", "DROPPED", "RETAKE"];

const EMPTY_FORM = {
  studentIdNo: "", name: "", nameBn: "", gender: "MALE", dob: "",
  guardianName: "", guardianPhone: "", phone: "", email: "", address: "",
  programId: "", sessionYear: "", currentTermId: "", boardRollNo: "",
  registrationNo: "", admissionDate: "", status: "ACTIVE", note: "",
};

/** College & University students: information management + course enrollment. */
export default function CampusStudentsPage() {
  const { t, locale } = useLang();
  const L = t.portal.campusStudentsPage;

  const [tab, setTab] = useState<"students" | "enrollments">("students");
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const [saving, setSaving] = useState(false);

  const programsData = useApi<{ programs: Program[] }>("/api/portal/campus/programs");
  const termsData = useApi<{ terms: Term[] }>("/api/portal/campus/terms");
  const [filters, setFilters] = useState({ q: "", programId: "", sessionYear: "", status: "" });
  const studentsUrl =
    `/api/portal/campus/students?` +
    new URLSearchParams(Object.entries(filters).filter(([, v]) => v) as [string, string][]).toString();
  const studentsData = useApi<{ students: Student[] }>(studentsUrl);
  const offeringsData = useApi<{ offerings: Offering[] }>("/api/portal/campus/offerings");

  const programs = programsData.data?.programs ?? [];
  const terms = termsData.data?.terms ?? [];
  const students = studentsData.data?.students ?? [];
  const offerings = offeringsData.data?.offerings ?? [];
  const pager = usePagination(students);

  // create/edit modal
  const [modal, setModal] = useState(false);
  const [editing, setEditing] = useState<Student | null>(null);
  const [form, setForm] = useState({ ...EMPTY_FORM });

  // profile modal
  const [detailId, setDetailId] = useState<number | null>(null);
  const detailData = useApi<{ student: StudentDetail }>(detailId ? `/api/portal/campus/students/${detailId}` : null);

  // enrollment tab
  const [enrStudentId, setEnrStudentId] = useState("");
  const [enrSession, setEnrSession] = useState("");
  const [enrPicked, setEnrPicked] = useState<number[]>([]);
  const enrUrl = enrStudentId ? `/api/portal/campus/enrollments?studentId=${enrStudentId}` : null;
  const myEnrollmentsData = useApi<{ enrollments: { id: number; status: string; offering: Offering }[] }>(enrUrl);

  const nm = (en: string | null | undefined, bn: string | null | undefined) =>
    locale === "bn" && bn ? bn : en ?? "—";

  function openCreate() {
    setEditing(null);
    setForm({ ...EMPTY_FORM });
    setModal(true);
  }
  function openEdit(s: Student) {
    setEditing(s);
    setForm({
      studentIdNo: s.studentIdNo, name: s.name, nameBn: s.nameBn ?? "",
      gender: s.gender, dob: s.dob ? String(s.dob).slice(0, 10) : "",
      guardianName: s.guardianName ?? "", guardianPhone: s.guardianPhone ?? "",
      phone: s.phone ?? "", email: s.email ?? "", address: s.address ?? "",
      programId: String(s.program.id), sessionYear: s.sessionYear,
      currentTermId: s.currentTermId ? String(s.currentTermId) : "",
      boardRollNo: s.boardRollNo ?? "", registrationNo: s.registrationNo ?? "",
      admissionDate: s.admissionDate ? String(s.admissionDate).slice(0, 10) : "",
      status: s.status, note: s.note ?? "",
    });
    setModal(true);
  }
  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setSaving(true);
    try {
      await api(editing ? `/api/portal/campus/students/${editing.id}` : "/api/portal/campus/students", {
        method: editing ? "PATCH" : "POST",
        body: JSON.stringify(form),
      });
      setModal(false);
      setMessage({ type: "success", text: L.studentSaved });
      studentsData.reload();
    } catch (err) {
      const code = err instanceof Error ? err.message : "";
      setMessage({ type: "error", text: code === "ID_EXISTS" ? L.errIdExists : L.studentSaved });
    } finally {
      setSaving(false);
    }
  }
  async function remove(s: Student) {
    if (!(await emsConfirm({ message: L.confirmDeleteStudent, danger: true }))) return;
    try {
      await api(`/api/portal/campus/students/${s.id}`, { method: "DELETE" });
      setMessage({ type: "success", text: L.studentDeleted });
      studentsData.reload();
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
    }
  }

  async function enrollSelected() {
    if (!enrStudentId || enrPicked.length === 0) return;
    setSaving(true);
    try {
      const res = await api<{ created: number; skipped: number }>("/api/portal/campus/enrollments", {
        method: "POST",
        body: JSON.stringify({ studentId: Number(enrStudentId), offeringIds: enrPicked }),
      });
      setMessage({
        type: "success",
        text: L.enrollResult.replace("{n}", String(res.created)).replace("{m}", String(res.skipped)),
      });
      setEnrPicked([]);
      myEnrollmentsData.reload();
      studentsData.reload();
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
    } finally {
      setSaving(false);
    }
  }
  async function setEnrollStatus(id: number, status: string) {
    try {
      await api(`/api/portal/campus/enrollments/${id}`, { method: "PATCH", body: JSON.stringify({ status }) });
      setMessage({ type: "success", text: L.enrollmentSaved });
      myEnrollmentsData.reload();
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
    }
  }
  async function removeEnrollment(id: number) {
    if (!(await emsConfirm({ message: L.confirmRemoveEnrollment, danger: true }))) return;
    try {
      await api(`/api/portal/campus/enrollments/${id}`, { method: "DELETE" });
      setMessage({ type: "success", text: L.enrollmentRemoved });
      myEnrollmentsData.reload();
      studentsData.reload();
    } catch {
      setMessage({ type: "error", text: t.common.tryAgain });
    }
  }

  // offerings the picked student can enroll in (session filter, not yet enrolled)
  const enrolledOfferingIds = new Set((myEnrollmentsData.data?.enrollments ?? []).map((e) => e.offering.id));
  const availableOfferings = offerings.filter(
    (o) => (!enrSession || o.sessionYear === enrSession) && !enrolledOfferingIds.has(o.id)
  );
  const selectedStudent = students.find((s) => s.id === Number(enrStudentId)) ?? null;

  const detail = detailData.data?.student ?? null;

  const tabs: { id: typeof tab; label: string }[] = [
    { id: "students", label: L.tabStudents },
    { id: "enrollments", label: L.tabEnrollments },
  ];

  return (
    <div>
      <PageHeader
        title={L.title}
        subtitle={L.subtitle}
        action={tab === "students" ? (
          <Button onClick={openCreate}>
            <IconPlus className="svg-16" />
            <span className="ms-1">{L.newStudent}</span>
          </Button>
        ) : undefined}
      />

      {message && (
        <div className="mb-4">
          <Alert type={message.type} onClose={() => setMessage(null)}>{message.text}</Alert>
        </div>
      )}

      <ul className="nav nav-tabs mb-4">
        {tabs.map((x) => (
          <li className="nav-item" key={x.id}>
            <button className={`nav-link f-w-600 ${tab === x.id ? "active" : ""}`} type="button" onClick={() => setTab(x.id)}>
              {x.label}
            </button>
          </li>
        ))}
      </ul>

      {/* ------------------------- Students tab ------------------------- */}
      {tab === "students" && (
        <div className="card">
          <div className="card-header">
            <div className="row g-2 align-items-end">
              <div className="col-md-3">
                <Input label="" placeholder={L.searchPlaceholder} value={filters.q}
                  onChange={(e) => { setFilters({ ...filters, q: e.target.value }); pager.setPage(1); }} />
              </div>
              <div className="col-md-3">
                <Select label={L.thProgram} wrapperClassName="form-group mb-0" value={filters.programId}
                  onChange={(e) => { setFilters({ ...filters, programId: e.target.value }); pager.setPage(1); }}>
                  <option value="">{L.allPrograms}</option>
                  {programs.map((p) => <option key={p.id} value={p.id}>{nm(p.name, p.nameBn)}</option>)}
                </Select>
              </div>
              <div className="col-md-2">
                <Input label={L.thSession} placeholder={L.sessionPlaceholder} value={filters.sessionYear}
                  onChange={(e) => { setFilters({ ...filters, sessionYear: e.target.value }); pager.setPage(1); }} />
              </div>
              <div className="col-md-3">
                <Select label={L.thStatus} wrapperClassName="form-group mb-0" value={filters.status}
                  onChange={(e) => { setFilters({ ...filters, status: e.target.value }); pager.setPage(1); }}>
                  <option value="">{L.allStatuses}</option>
                  {STATUSES.map((s) => <option key={s} value={s}>{L[`st_${s}` as keyof typeof L]}</option>)}
                </Select>
              </div>
            </div>
          </div>
          {studentsData.loading && !studentsData.data ? (
            <div className="card-body text-center py-4"><span className="spinner-border text-primary" role="status" /></div>
          ) : students.length === 0 ? (
            <div className="card-body"><EmptyState icon={<IconUser />} title={L.noStudents} /></div>
          ) : (
            <>
              <div className="table-responsive">
                <table className="table table-hover align-middle mb-0">
                  <thead className="ems-table-head">
                    <tr>
                      <th>{L.thId}</th>
                      <th>{L.thName}</th>
                      <th>{L.thProgram}</th>
                      <th>{L.thSession}</th>
                      <th>{L.thTerm}</th>
                      <th className="text-center">{L.thCourses}</th>
                      <th>{L.thGuardian}</th>
                      <th>{L.thStatus}</th>
                      <th className="text-end">{t.common.actions}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {pager.paged.map((s) => (
                      <tr key={s.id}>
                        <td><span className="badge badge-secondary">{s.studentIdNo}</span></td>
                        <td>
                          <p className="mb-0 f-w-700">{nm(s.name, s.nameBn)}</p>
                          {s.boardRollNo && <p className="mb-0 ems-fs-11 text-muted">{L.fieldBoardRoll}: {s.boardRollNo}</p>}
                          {s.registrationNo && <p className="mb-0 ems-fs-11 text-muted">{L.fieldRegistration}: {s.registrationNo}</p>}
                        </td>
                        <td className="ems-fs-13">{nm(s.program.name, (s.program as { nameBn?: string | null }).nameBn)}</td>
                        <td className="ems-fs-13">{s.sessionYear}</td>
                        <td className="ems-fs-13">{s.currentTerm ? nm(s.currentTerm.name, s.currentTerm.nameBn) : "—"}</td>
                        <td className="text-center f-w-700">{s._count?.enrollments ?? 0}</td>
                        <td className="ems-fs-12">
                          {s.guardianName ?? "—"}
                          {s.guardianPhone ? <p className="mb-0 text-muted">{s.guardianPhone}</p> : null}
                        </td>
                        <td><StatusBadge status={s.status} label={L[`st_${s.status}` as keyof typeof L] ?? s.status} /></td>
                        <td className="text-end">
                          <button className="btn btn-sm btn-light me-1" onClick={() => setDetailId(s.id)} title={L.viewProfile}><IconUser className="svg-16" /></button>
                          <button className="btn btn-sm btn-light me-1" onClick={() => openEdit(s)} title={t.common.edit}><IconEdit className="svg-16" /></button>
                          <button className="btn btn-sm btn-light text-danger" onClick={() => remove(s)} title={t.common.delete}><IconTrash className="svg-16" /></button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <div className="card-footer"><Pagination page={pager.page} pageCount={pager.pageCount} total={pager.total} from={pager.from} to={pager.to} size={pager.size} onPageChange={pager.setPage} onSizeChange={pager.setSize} /></div>
            </>
          )}
        </div>
      )}

      {/* ---------------------- Enrollments tab ---------------------- */}
      {tab === "enrollments" && (
        <div className="row g-4">
          <div className="col-lg-5">
            <div className="card">
              <div className="card-header f-w-700">{L.enrollTitle}</div>
              <div className="card-body">
                <div className="row g-2">
                  <div className="col-md-6">
                    <Select label={L.pickStudent} required value={enrStudentId} onChange={(e) => { setEnrStudentId(e.target.value); setEnrPicked([]); }}>
                      <option value="">—</option>
                      {students.map((s) => (
                        <option key={s.id} value={s.id}>{s.studentIdNo} — {nm(s.name, s.nameBn)}</option>
                      ))}
                    </Select>
                  </div>
                  <div className="col-md-6">
                    <Input label={L.pickSession} placeholder={L.sessionPlaceholder} value={enrSession} onChange={(e) => setEnrSession(e.target.value)} />
                  </div>
                </div>

                {!enrStudentId ? (
                  <p className="text-muted mb-0 mt-2">{L.hintPickStudentFirst}</p>
                ) : availableOfferings.length === 0 ? (
                  <p className="text-muted mb-0 mt-2">{L.noOfferings}</p>
                ) : (
                  <>
                    <div className="form-check mt-3 mb-2">
                      <input
                        className="form-check-input" type="checkbox" id="all-offerings"
                        checked={enrPicked.length === availableOfferings.length}
                        onChange={(e) => setEnrPicked(e.target.checked ? availableOfferings.map((o) => o.id) : [])}
                      />
                      <label className="form-check-label f-w-700" htmlFor="all-offerings">{L.enrollSelectAll}</label>
                    </div>
                    <div style={{ maxHeight: 300, overflowY: "auto" }}>
                      {availableOfferings.map((o) => (
                        <div className="form-check" key={o.id}>
                          <input
                            className="form-check-input" type="checkbox" id={`off-${o.id}`}
                            checked={enrPicked.includes(o.id)}
                            onChange={(e) =>
                              setEnrPicked(e.target.checked ? [...enrPicked, o.id] : enrPicked.filter((x) => x !== o.id))
                            }
                          />
                          <label className="form-check-label" htmlFor={`off-${o.id}`}>
                            <b>{o.course.code}</b> — {nm(o.course.name, o.course.nameBn)}
                            <span className="text-muted"> · {o.sessionYear}{o.section ? ` · ${o.section}` : ""} · {o.course.credits} {L.thCredits.toLowerCase()}</span>
                          </label>
                        </div>
                      ))}
                    </div>
                    <Button className="mt-3" disabled={saving || enrPicked.length === 0} onClick={enrollSelected}>
                      {L.enrollBtn} ({enrPicked.length})
                    </Button>
                  </>
                )}
              </div>
            </div>
          </div>
          <div className="col-lg-7">
            <div className="card">
              <div className="card-header f-w-700">
                {L.enrollmentListTitle}{selectedStudent ? ` — ${selectedStudent.studentIdNo}` : ""}
              </div>
              {myEnrollmentsData.loading && !myEnrollmentsData.data ? (
                <div className="card-body text-center py-4"><span className="spinner-border text-primary" role="status" /></div>
              ) : (myEnrollmentsData.data?.enrollments ?? []).length === 0 ? (
                <div className="card-body"><EmptyState title={L.noOfferings} /></div>
              ) : (
                <div className="table-responsive">
                  <table className="table table-hover align-middle mb-0">
                    <thead className="ems-table-head">
                      <tr>
                        <th>{L.thCourse}</th>
                        <th>{L.thSession}</th>
                        <th className="text-center">{L.thCredits}</th>
                        <th>{L.thEnrollStatus}</th>
                        <th className="text-end">{t.common.actions}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {(myEnrollmentsData.data?.enrollments ?? []).map((e) => (
                        <tr key={e.id}>
                          <td className="f-w-700">{e.offering.course.code} — {nm(e.offering.course.name, e.offering.course.nameBn)}</td>
                          <td>
                            <span className="badge badge-info">{e.offering.sessionYear}</span>
                            {e.offering.section ? <span className="badge badge-secondary ms-1">{e.offering.section}</span> : null}
                          </td>
                          <td className="text-center">{e.offering.course.credits}</td>
                          <td>
                            <select
                              className="form-select form-select-sm"
                              value={e.status}
                              onChange={(ev) => setEnrollStatus(e.id, ev.target.value)}
                            >
                              {ENROLL_STATUSES.map((s) => <option key={s} value={s}>{L[`enr_${s}` as keyof typeof L]}</option>)}
                            </select>
                          </td>
                          <td className="text-end">
                            <button className="btn btn-sm btn-light text-danger" onClick={() => removeEnrollment(e.id)} title={t.common.delete}>
                              <IconTrash className="svg-16" />
                            </button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* ---------------------- create / edit modal ---------------------- */}
      <Modal open={modal} onClose={() => setModal(false)} title={editing ? L.editStudent : L.newStudent} wide>
        <form className="theme-form" onSubmit={submit}>
          <div className="row">
            <div className="col-md-4"><Input label={L.fieldStudentId} required placeholder={L.fieldStudentIdHint} value={form.studentIdNo} onChange={(e) => setForm({ ...form, studentIdNo: e.target.value })} /></div>
            <div className="col-md-5"><Input label={L.fieldName} required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></div>
            <div className="col-md-3"><Input label={L.fieldNameBn} value={form.nameBn} onChange={(e) => setForm({ ...form, nameBn: e.target.value })} /></div>
            <div className="col-md-3">
              <Select label={L.fieldGender} value={form.gender} onChange={(e) => setForm({ ...form, gender: e.target.value })}>
                <option value="MALE">{L.male}</option>
                <option value="FEMALE">{L.female}</option>
              </Select>
            </div>
            <div className="col-md-3"><DatePicker label={L.fieldDob} value={form.dob} onChange={(e) => setForm({ ...form, dob: e.target.value })} /></div>
            <div className="col-md-3"><DatePicker label={L.fieldAdmissionDate} value={form.admissionDate} onChange={(e) => setForm({ ...form, admissionDate: e.target.value })} /></div>
            <div className="col-md-3">
              <Select label={L.fieldStatus} value={form.status} onChange={(e) => setForm({ ...form, status: e.target.value })}>
                {STATUSES.map((s) => <option key={s} value={s}>{L[`st_${s}` as keyof typeof L]}</option>)}
              </Select>
            </div>
            <div className="col-md-4">
              <Select label={L.fieldProgram} required value={form.programId} onChange={(e) => setForm({ ...form, programId: e.target.value, currentTermId: "" })}>
                <option value="">—</option>
                {programs.map((p) => <option key={p.id} value={p.id}>{nm(p.name, p.nameBn)}</option>)}
              </Select>
            </div>
            <div className="col-md-2"><Input label={L.fieldSession} required placeholder={L.sessionPlaceholder} value={form.sessionYear} onChange={(e) => setForm({ ...form, sessionYear: e.target.value })} /></div>
            <div className="col-md-3">
              <Select label={L.fieldTerm} value={form.currentTermId} onChange={(e) => setForm({ ...form, currentTermId: e.target.value })}>
                <option value="">—</option>
                {terms.filter((x) => String(x.programId) === form.programId).map((x) => (
                  <option key={x.id} value={x.id}>{nm(x.name, x.nameBn)}</option>
                ))}
              </Select>
            </div>
            <div className="col-md-3"><Input label={L.fieldBoardRoll} value={form.boardRollNo} onChange={(e) => setForm({ ...form, boardRollNo: e.target.value })} /></div>
            <div className="col-md-4"><Input label={L.fieldRegistration} value={form.registrationNo} onChange={(e) => setForm({ ...form, registrationNo: e.target.value })} /></div>
            <div className="col-md-4"><Input label={L.fieldGuardian} value={form.guardianName} onChange={(e) => setForm({ ...form, guardianName: e.target.value })} /></div>
            <div className="col-md-4"><Input label={L.fieldGuardianPhone} value={form.guardianPhone} onChange={(e) => setForm({ ...form, guardianPhone: e.target.value })} /></div>
            <div className="col-md-4"><Input label={L.fieldPhone} value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} /></div>
            <div className="col-md-4"><Input label={L.fieldEmail} type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} /></div>
            <div className="col-md-4"><Input label={L.fieldAddress} value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })} /></div>
            <div className="col-12"><Textarea label={L.fieldNote} rows={2} value={form.note} onChange={(e) => setForm({ ...form, note: e.target.value })} /></div>
          </div>
          <div className="d-flex justify-content-end gap-2 mt-3">
            <Button type="button" variant="secondary" onClick={() => setModal(false)}>{t.common.cancel}</Button>
            <Button type="submit" disabled={saving}>{t.common.save}</Button>
          </div>
        </form>
      </Modal>

      {/* ------------------------- profile modal ------------------------- */}
      <Modal open={detailId !== null} onClose={() => setDetailId(null)} title={L.profileTitle} wide>
        {detailData.loading || !detail ? (
          <div className="text-center py-4"><span className="spinner-border text-primary" role="status" /></div>
        ) : (
          <div>
            <div className="row g-3">
              <div className="col-md-6">
                <div className="card mb-0">
                  <div className="card-header f-w-700">{L.infoTitle}</div>
                  <div className="card-body ems-fs-13">
                    <p className="mb-1"><b>{L.thId}:</b> {detail.studentIdNo}</p>
                    <p className="mb-1"><b>{L.thName}:</b> {nm(detail.name, detail.nameBn)}</p>
                    <p className="mb-1"><b>{L.thProgram}:</b> {nm(detail.program.name, detail.program.nameBn)}</p>
                    <p className="mb-1"><b>{L.thSession}:</b> {detail.sessionYear}</p>
                    <p className="mb-1"><b>{L.thTerm}:</b> {detail.currentTerm ? nm(detail.currentTerm.name, detail.currentTerm.nameBn) : "—"}</p>
                    {detail.boardRollNo && <p className="mb-1"><b>{L.fieldBoardRoll}:</b> {detail.boardRollNo}</p>}
                    {detail.registrationNo && <p className="mb-1"><b>{L.fieldRegistration}:</b> {detail.registrationNo}</p>}
                    <p className="mb-1"><b>{L.thStatus}:</b> {L[`st_${detail.status}` as keyof typeof L] ?? detail.status}</p>
                  </div>
                </div>
              </div>
              <div className="col-md-6">
                <div className="card mb-0">
                  <div className="card-header f-w-700">{L.contactTitle}</div>
                  <div className="card-body ems-fs-13">
                    <p className="mb-1"><b>{L.fieldGuardian}:</b> {detail.guardianName ?? "—"}</p>
                    <p className="mb-1"><b>{L.fieldGuardianPhone}:</b> {detail.guardianPhone ?? "—"}</p>
                    <p className="mb-1"><b>{L.fieldPhone}:</b> {detail.phone ?? "—"}</p>
                    <p className="mb-1"><b>{L.fieldEmail}:</b> {detail.email ?? "—"}</p>
                    <p className="mb-1"><b>{L.fieldDob}:</b> {detail.dob ? formatDate(detail.dob, locale) : "—"}</p>
                    <p className="mb-1"><b>{L.fieldAddress}:</b> {detail.address ?? "—"}</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="card mb-0 mt-3">
              <div className="card-header f-w-700">{L.marksListTitle}</div>
              {detail.marks.length === 0 ? (
                <div className="card-body text-muted">—</div>
              ) : (
                <div className="table-responsive">
                  <table className="table table-sm table-hover align-middle mb-0">
                    <thead className="ems-table-head">
                      <tr>
                        <th>{L.thExam}</th>
                        <th>{L.thCourse}</th>
                        <th className="text-center">{L.thMarks}</th>
                        <th className="text-center">{L.thPublished}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {detail.marks.map((m) => (
                        <tr key={m.id}>
                          <td className="ems-fs-12">{m.schedule.exam.name}</td>
                          <td className="ems-fs-12">{m.schedule.course.code}</td>
                          <td className="text-center">
                            {m.absent ? <span className="text-danger">{t.portal.campusExamsPage.thAbsent}</span> : `${m.marks ?? "—"} / ${m.schedule.fullMarks}`}
                          </td>
                          <td className="text-center">{m.schedule.exam.resultPublished ? L.yes : L.no}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
}