"use client";

import { useEffect, useMemo, useState } from "react";
import { useLang } from "@/context/LanguageContext";
import { Button, Card, EmptyState, PageHeader, LoadingArea, StatCard } from "@/components/ui";
import { useApi } from "@/lib/client";
import { formatDate, formatNumber, formatTime } from "@/lib/utils";
import { IconFile, IconUserCheck } from "@/components/icons";
import { esc, openPrintWindow } from "@/lib/print";

interface AttendanceRecord {
  id: number;
  date: string;
  status: string;
  inTime?: string | null;
  outTime?: string | null;
  source?: string | null;
  note: string | null;
  subject: string | null;
  subjectBn: string | null;
}

interface SubjectWise {
  subject: string | null;
  subjectBn: string | null;
  present: number;
  absent: number;
  leave: number;
  marked: number;
  rate: number | null;
}

interface AttendanceData {
  month: string;
  studentName: string | null;
  roll: string | null;
  className: string | null;
  classNameBn: string | null;
  summary: { marked: number; present: number; absent: number; leave: number; rate: number | null };
  subjectWise: SubjectWise[];
  records: AttendanceRecord[];
}

interface YearData {
  year: number;
  studentName: string | null;
  roll: string | null;
  className: string | null;
  classNameBn: string | null;
  summary: { marked: number; present: number; absent: number; leave: number; rate: number | null };
  months: { month: string; present: number; absent: number; leave: number; marked: number; rate: number | null }[];
}

function monthOptions(): { value: string; label: string }[] {
  const out: { value: string; label: string }[] = [];
  const d = new Date();
  d.setDate(1);
  for (let i = 0; i < 12; i++) {
    const value = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
    out.push({ value, label: value });
    d.setMonth(d.getMonth() - 1);
  }
  return out;
}

function yearOptions(): number[] {
  const y = new Date().getFullYear();
  return [y, y - 1, y - 2];
}

const localToday = () => {
  const d = new Date();
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
};

/** Student/parent (and staff): attendance dashboard — monthly calendar,
    subject-wise rollup and daily records, plus a printable yearly report. */
export default function MeAttendancePage() {
  const { t, locale } = useLang();
  const [tab, setTab] = useState<"dashboard" | "yearly">("dashboard");
  const [month, setMonth] = useState<string>("");
  const [year, setYear] = useState<number>(new Date().getFullYear());

  const monthUrl = `/api/me/attendance${month ? `?month=${month}` : ""}`;
  const { data, loading } = useApi<AttendanceData>(monthUrl);
  const yearEnabled = tab === "yearly";
  const yearData = useApi<YearData>(yearEnabled ? `/api/me/attendance?year=${year}` : null);

  useEffect(() => {
    if (!month && data?.month) setMonth(data.month);
  }, [month, data]);

  const records = data?.records ?? [];

  /** per-date rollup for the calendar: the general (no-subject) record wins;
      subject-only days collapse to PRESENT > LEAVE > ABSENT */
  const byDate = useMemo(() => {
    const rank = (s: string) => (s === "PRESENT" ? 2 : s === "LEAVE" ? 1 : 0);
    const map = new Map<string, { status: string; inTime: string | null; outTime: string | null; source: string | null; count: number }>();
    for (const r of records) {
      const key = r.date.slice(0, 10);
      const entry = map.get(key) ?? { status: "", inTime: null, outTime: null, source: null, count: 0 };
      entry.count++;
      if (!r.subject) {
        entry.status = r.status;
        entry.inTime = r.inTime ?? null;
        entry.outTime = r.outTime ?? null;
        entry.source = r.source ?? null;
      } else if (!entry.status || rank(r.status) > rank(entry.status)) {
        entry.status = r.status;
      }
      map.set(key, entry);
    }
    return map;
  }, [records]);

  /** calendar cells for the selected month (BD week: Saturday first) */
  const calendar = useMemo(() => {
    const [y, m] = (month || data?.month || "1970-01").split("-").map(Number);
    const first = new Date(y, m - 1, 1);
    const daysInMonth = new Date(y, m, 0).getDate();
    const lead = (first.getDay() + 1) % 7; // SAT column first
    const cells: ({ day: number; date: string } | null)[] = Array.from({ length: lead }, () => null);
    for (let day = 1; day <= daysInMonth; day++) {
      cells.push({ day, date: `${y}-${String(m).padStart(2, "0")}-${String(day).padStart(2, "0")}` });
    }
    return cells;
  }, [month, data?.month]);

  const today = localToday();

  function statusColor(status: string | null) {
    if (status === "PRESENT") return { bg: "rgba(46,139,87,.14)", color: "#2e8b57" };
    if (status === "ABSENT") return { bg: "rgba(220,53,69,.12)", color: "#dc3545" };
    if (status === "LEAVE") return { bg: "rgba(255,193,7,.18)", color: "#b8860b" };
    return { bg: "transparent", color: "#adb5bd" };
  }

  const statusLabel = (s: string) =>
    t.common[s.toLowerCase() as keyof typeof t.common] ?? s;

  function printMonthReport() {
    if (!data) return;
    const inst = data;
    const cls = locale === "bn" && inst.classNameBn ? inst.classNameBn : inst.className;
    const dayRows = (inst.records ?? [])
      .map(
        (r) => `<tr>
        <td style="border:1px solid #d9e1ec;padding:5px 9px">${formatDate(r.date, locale)}</td>
        <td style="border:1px solid #d9e1ec;padding:5px 9px">${esc(locale === "bn" && r.subjectBn ? r.subjectBn : r.subject ?? t.me.generalRecord)}</td>
        <td style="border:1px solid #d9e1ec;padding:5px 9px;text-align:center">${esc(statusLabel(r.status))}</td>
        <td style="border:1px solid #d9e1ec;padding:5px 9px">${esc(r.note ?? "—")}</td>
      </tr>`,
      )
      .join("");
    const subjectRows = (inst.subjectWise ?? [])
      .map(
        (s) => `<tr>
        <td style="border:1px solid #d9e1ec;padding:5px 9px">${esc(locale === "bn" && s.subjectBn ? s.subjectBn : s.subject ?? "—")}</td>
        <td style="border:1px solid #d9e1ec;padding:5px 9px;text-align:center">${s.present}</td>
        <td style="border:1px solid #d9e1ec;padding:5px 9px;text-align:center">${s.absent}</td>
        <td style="border:1px solid #d9e1ec;padding:5px 9px;text-align:center">${s.leave}</td>
        <td style="border:1px solid #d9e1ec;padding:5px 9px;text-align:center;font-weight:700">${s.rate != null ? `${formatNumber(s.rate, locale)}%` : "—"}</td>
      </tr>`,
      )
      .join("");
    const body = `
<div class="doc">
  <h5 style="margin:0 0 4px">${esc(t.me.attendanceTitle)} — ${esc(inst.month)}</h5>
  <p style="margin:0 0 12px;font-size:12px;color:#5b6b79">${esc(inst.studentName ?? "")}${inst.roll ? ` · ${esc(t.portal.identityPage.roll)} ${esc(inst.roll)}` : ""}${cls ? ` · ${esc(cls)}` : ""}</p>
  <table style="width:100%;font-size:12px;margin-bottom:12px">
    <tr>
      <td style="border:1px solid #d9e1ec;padding:6px 10px"><b>${esc(t.me.attendanceRate)}:</b> ${inst.summary.rate != null ? `${formatNumber(inst.summary.rate, locale)}%` : "—"}</td>
      <td style="border:1px solid #d9e1ec;padding:6px 10px"><b>${esc(t.common.present)}:</b> ${inst.summary.present}</td>
      <td style="border:1px solid #d9e1ec;padding:6px 10px"><b>${esc(t.common.absent)}:</b> ${inst.summary.absent}</td>
      <td style="border:1px solid #d9e1ec;padding:6px 10px"><b>${esc(t.common.leave)}:</b> ${inst.summary.leave}</td>
    </tr>
  </table>
  ${subjectRows ? `<h6 style="margin:14px 0 6px">${esc(t.me.attSubjectWise)}</h6>
  <table style="width:100%;font-size:11.5px;margin-bottom:12px">
    <thead><tr style="background:#f4f7fa">
      <th style="border:1px solid #d9e1ec;padding:5px 9px;text-align:left">${esc(t.me.subjectCol)}</th>
      <th style="border:1px solid #d9e1ec;padding:5px 9px">${esc(t.common.present)}</th>
      <th style="border:1px solid #d9e1ec;padding:5px 9px">${esc(t.common.absent)}</th>
      <th style="border:1px solid #d9e1ec;padding:5px 9px">${esc(t.common.leave)}</th>
      <th style="border:1px solid #d9e1ec;padding:5px 9px">${esc(t.me.attRateCol)}</th>
    </tr></thead>
    <tbody>${subjectRows}</tbody>
  </table>` : ""}
  <h6 style="margin:14px 0 6px">${esc(t.me.dailyRecords)}</h6>
  <table style="width:100%;font-size:11.5px">
    <thead><tr style="background:#f4f7fa">
      <th style="border:1px solid #d9e1ec;padding:5px 9px;text-align:left">${esc(t.common.date)}</th>
      <th style="border:1px solid #d9e1ec;padding:5px 9px;text-align:left">${esc(t.me.subjectCol)}</th>
      <th style="border:1px solid #d9e1ec;padding:5px 9px">${esc(t.common.status)}</th>
      <th style="border:1px solid #d9e1ec;padding:5px 9px;text-align:left">${esc(t.common.note)}</th>
    </tr></thead>
    <tbody>${dayRows}</tbody>
  </table>
</div>`;
    openPrintWindow(t.me.attendanceTitle, locale, body);
  }

  function printYearReport() {
    const d = yearData.data;
    if (!d) return;
    const cls = locale === "bn" && d.classNameBn ? d.classNameBn : d.className;
    const monthRows = d.months
      .map(
        (m) => `<tr>
        <td style="border:1px solid #d9e1ec;padding:5px 9px">${esc(m.month)}</td>
        <td style="border:1px solid #d9e1ec;padding:5px 9px;text-align:center">${m.present}</td>
        <td style="border:1px solid #d9e1ec;padding:5px 9px;text-align:center">${m.absent}</td>
        <td style="border:1px solid #d9e1ec;padding:5px 9px;text-align:center">${m.leave}</td>
        <td style="border:1px solid #d9e1ec;padding:5px 9px;text-align:center">${m.marked}</td>
        <td style="border:1px solid #d9e1ec;padding:5px 9px;text-align:center;font-weight:700">${m.rate != null ? `${formatNumber(m.rate, locale)}%` : "—"}</td>
      </tr>`,
      )
      .join("");
    const body = `
<div class="doc">
  <h5 style="margin:0 0 4px">${esc(t.me.attYearlyTitle)} — ${d.year}</h5>
  <p style="margin:0 0 12px;font-size:12px;color:#5b6b79">${esc(d.studentName ?? "")}${d.roll ? ` · ${esc(t.portal.identityPage.roll)} ${esc(d.roll)}` : ""}${cls ? ` · ${esc(cls)}` : ""}</p>
  <table style="width:100%;font-size:12px;margin-bottom:12px">
    <tr>
      <td style="border:1px solid #d9e1ec;padding:6px 10px"><b>${esc(t.me.attendanceRate)}:</b> ${d.summary.rate != null ? `${formatNumber(d.summary.rate, locale)}%` : "—"}</td>
      <td style="border:1px solid #d9e1ec;padding:6px 10px"><b>${esc(t.common.present)}:</b> ${d.summary.present}</td>
      <td style="border:1px solid #d9e1ec;padding:6px 10px"><b>${esc(t.common.absent)}:</b> ${d.summary.absent}</td>
      <td style="border:1px solid #d9e1ec;padding:6px 10px"><b>${esc(t.common.leave)}:</b> ${d.summary.leave}</td>
    </tr>
  </table>
  <table style="width:100%;font-size:11.5px">
    <thead><tr style="background:#f4f7fa">
      <th style="border:1px solid #d9e1ec;padding:5px 9px;text-align:left">${esc(t.common.month)}</th>
      <th style="border:1px solid #d9e1ec;padding:5px 9px">${esc(t.common.present)}</th>
      <th style="border:1px solid #d9e1ec;padding:5px 9px">${esc(t.common.absent)}</th>
      <th style="border:1px solid #d9e1ec;padding:5px 9px">${esc(t.common.leave)}</th>
      <th style="border:1px solid #d9e1ec;padding:5px 9px">${esc(t.me.recordsMarked)}</th>
      <th style="border:1px solid #d9e1ec;padding:5px 9px">${esc(t.me.attRateCol)}</th>
    </tr></thead>
    <tbody>${monthRows}</tbody>
  </table>
</div>`;
    openPrintWindow(t.me.attYearlyTitle, locale, body);
  }

  const s = data?.summary;
  const ySum = yearData.data?.summary;
  const maxMarked = Math.max(1, ...(yearData.data?.months ?? []).map((m) => m.marked));

  const monthSelector = (
    <div className="d-flex gap-2 flex-wrap">
      {monthOptions().map((m) => (
        <Button
          key={m.value}
          size="sm"
          variant={m.value === (month || data?.month) ? "primary" : "outline"}
          onClick={() => setMonth(m.value)}
        >
          {m.label}
        </Button>
      ))}
    </div>
  );

  return (
    <div>
      <PageHeader
        title={t.me.attendanceTitle}
        subtitle={t.me.attendanceSubtitle}
        action={
          <div className="d-flex flex-wrap gap-2 align-items-center">
            <div className="btn-group btn-group-sm">
              <button
                type="button"
                className={`btn f-w-700 ${tab === "dashboard" ? "btn-primary" : "btn-outline-secondary"}`}
                onClick={() => setTab("dashboard")}
              >
                {t.me.attTabDashboard}
              </button>
              <button
                type="button"
                className={`btn f-w-700 ${tab === "yearly" ? "btn-primary" : "btn-outline-secondary"}`}
                onClick={() => setTab("yearly")}
              >
                {t.me.attTabYearly}
              </button>
            </div>
            {tab === "dashboard" ? (
              <Button size="sm" variant="secondary" disabled={!data || (data.records ?? []).length === 0} onClick={printMonthReport}>
                <IconFile className="svg-14" />
                <span className="ms-1">{t.me.attPrintMonth}</span>
              </Button>
            ) : (
              <Button size="sm" variant="secondary" disabled={!yearData.data} onClick={printYearReport}>
                <IconFile className="svg-14" />
                <span className="ms-1">{t.me.attPrintYear}</span>
              </Button>
            )}
          </div>
        }
      />

      {tab === "dashboard" ? (
        loading && !data ? (
          <LoadingArea label={t.common.loading} />
        ) : !s ? (
          <div className="card">
            <EmptyState icon={<IconUserCheck />} title={t.me.noAttendance} />
          </div>
        ) : (
          <>
            <div className="mb-3">{monthSelector}</div>

            <div className="row g-4 mb-4">
              <div className="col-xl-3 col-md-6">
                <StatCard
                  label={t.me.attendanceRate}
                  value={s.rate != null ? `${formatNumber(s.rate, locale)}%` : "—"}
                  icon={<IconUserCheck />}
                  accent={s.rate != null && s.rate >= 90 ? "teal" : s.rate != null && s.rate >= 75 ? "orange" : "red"}
                  hint={`${s.marked} ${t.me.recordsMarked}`}
                />
              </div>
              <div className="col-xl-3 col-md-6">
                <StatCard label={t.common.present} value={s.present} icon={<IconUserCheck />} accent="teal" />
              </div>
              <div className="col-xl-3 col-md-6">
                <StatCard label={t.common.absent} value={s.absent} icon={<IconUserCheck />} accent="red" />
              </div>
              <div className="col-xl-3 col-md-6">
                <StatCard label={t.common.leave} value={s.leave} icon={<IconUserCheck />} accent="sky" />
              </div>
            </div>

            {/* Monthly calendar — BD week (Saturday first) */}
            <Card title={t.me.attCalendar} icon={<IconUserCheck className="svg-20" />} className="mb-4">
              <div className="d-flex flex-wrap gap-3 mb-3 ems-fs-12 text-muted">
                {(["PRESENT", "ABSENT", "LEAVE"] as const).map((k) => (
                  <span key={k} className="d-inline-flex align-items-center gap-1">
                    <span style={{ width: 12, height: 12, borderRadius: 3, background: statusColor(k).bg, border: `1px solid ${statusColor(k).color}` }} />
                    {statusLabel(k)}
                  </span>
                ))}
              </div>
              <div className="table-responsive">
                <table className="table table-bordered mb-0" style={{ tableLayout: "fixed" }}>
                  <thead className="ems-table-head">
                    <tr>
                      {(["SAT", "SUN", "MON", "TUE", "WED", "THU", "FRI"] as const).map((d) => (
                        <th key={d} className="text-center ems-fs-12">{t.days[d].slice(0, 3)}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {Array.from({ length: Math.ceil(calendar.length / 7) }, (_, w) => (
                      <tr key={w}>
                        {calendar.slice(w * 7, w * 7 + 7).map((cell, i) =>
                          !cell ? (
                            <td key={i} style={{ height: 52 }} />
                          ) : (
                            (() => {
                              const info = byDate.get(cell.date);
                              const color = statusColor(info?.status ?? null);
                              const isToday = cell.date === today;
                              return (
                                <td
                                  key={i}
                                  className="text-center align-middle"
                                  style={{ background: color.bg, height: 52, border: isToday ? "2px solid #24695c" : undefined }}
                                  title={info?.inTime ? `${formatTime(info.inTime, locale)}${info.outTime ? ` → ${formatTime(info.outTime, locale)}` : ""}` : undefined}
                                >
                                  <div className="f-w-700 ems-fs-13" style={{ color: color.color }}>{cell.day}</div>
                                  {info?.inTime && (
                                    <div className="ems-fs-11 text-muted">{formatTime(info.inTime, locale)}</div>
                                  )}
                                </td>
                              );
                            })()
                          ),
                        )}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </Card>

            {(data?.subjectWise ?? []).length > 0 && (
              <Card title={t.me.attSubjectWise} icon={<IconUserCheck className="svg-20" />} className="mb-4">
                <div className="table-responsive">
                  <table className="table table-hover align-middle mb-0">
                    <thead className="ems-table-head">
                      <tr>
                        <th>{t.me.subjectCol}</th>
                        <th className="text-center">{t.common.present}</th>
                        <th className="text-center">{t.common.absent}</th>
                        <th className="text-center">{t.common.leave}</th>
                        <th className="text-center">{t.me.attRateCol}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {(data?.subjectWise ?? []).map((s2) => (
                        <tr key={s2.subject ?? "?"}>
                          <td className="f-w-600 ems-fs-13">
                            {locale === "bn" && s2.subjectBn ? s2.subjectBn : s2.subject ?? t.me.generalRecord}
                          </td>
                          <td className="text-center ems-fs-13">{s2.present}</td>
                          <td className="text-center ems-fs-13">{s2.absent}</td>
                          <td className="text-center ems-fs-13">{s2.leave}</td>
                          <td className="text-center f-w-700">{s2.rate != null ? `${formatNumber(s2.rate, locale)}%` : "—"}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Card>
            )}

            <Card title={t.me.dailyRecords} icon={<IconUserCheck className="svg-20" />}>
              {records.length === 0 ? (
                <EmptyState icon={<IconUserCheck />} title={t.me.noAttendance} />
              ) : (
                <div className="table-responsive">
                  <table className="table table-hover align-middle mb-0">
                    <thead className="ems-table-head">
                      <tr>
                        <th>{t.common.date}</th>
                        <th>{t.me.subjectCol}</th>
                        <th className="text-center">{t.common.status}</th>
                        <th>{t.common.note}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {records.map((r) => (
                        <tr key={r.id}>
                          <td className="f-w-600 ems-fs-13">
                            {formatDate(r.date, locale)}
                            {r.source === "DEVICE" && r.inTime && (
                              <div className="ems-fs-11 text-muted mt-1">
                                <span className="badge badge-soft-teal me-1">{t.me.deviceBadge}</span>
                                {formatTime(r.inTime, locale)}
                                {r.outTime && r.outTime !== r.inTime ? ` → ${formatTime(r.outTime, locale)}` : ""}
                              </div>
                            )}
                          </td>
                          <td className="ems-fs-13">
                            {locale === "bn" && r.subjectBn ? r.subjectBn : r.subject ?? t.me.generalRecord}
                          </td>
                          <td className="text-center">
                            <span
                              className={`badge ${
                                r.status === "PRESENT"
                                  ? "badge-success"
                                  : r.status === "ABSENT"
                                    ? "badge-danger"
                                    : "badge-warning"
                              }`}
                            >
                              {statusLabel(r.status)}
                            </span>
                          </td>
                          <td className="ems-fs-12 text-muted">{r.note ?? "—"}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </Card>
          </>
        )
      ) : (
        /* ---------- yearly report ---------- */
        <div>
          <div className="d-flex flex-wrap gap-2 align-items-center mb-4">
            {yearOptions().map((y) => (
              <Button key={y} size="sm" variant={y === year ? "primary" : "outline"} onClick={() => setYear(y)}>
                {y}
              </Button>
            ))}
          </div>

          {yearData.loading && !yearData.data ? (
            <LoadingArea label={t.common.loading} />
          ) : !ySum || ySum.marked === 0 ? (
            <div className="card">
              <EmptyState icon={<IconUserCheck />} title={t.me.noAttendance} />
            </div>
          ) : (
            <>
              <div className="row g-4 mb-4">
                <div className="col-xl-3 col-md-6">
                  <StatCard
                    label={t.me.attYearlyRate}
                    value={ySum.rate != null ? `${formatNumber(ySum.rate, locale)}%` : "—"}
                    icon={<IconUserCheck />}
                    accent={ySum.rate != null && ySum.rate >= 90 ? "teal" : ySum.rate != null && ySum.rate >= 75 ? "orange" : "red"}
                    hint={`${ySum.marked} ${t.me.recordsMarked}`}
                  />
                </div>
                <div className="col-xl-3 col-md-6">
                  <StatCard label={t.common.present} value={ySum.present} icon={<IconUserCheck />} accent="teal" />
                </div>
                <div className="col-xl-3 col-md-6">
                  <StatCard label={t.common.absent} value={ySum.absent} icon={<IconUserCheck />} accent="red" />
                </div>
                <div className="col-xl-3 col-md-6">
                  <StatCard label={t.common.leave} value={ySum.leave} icon={<IconUserCheck />} accent="sky" />
                </div>
              </div>

              <Card title={`${t.me.attYearlyTitle} — ${year}`} icon={<IconUserCheck className="svg-20" />}>
                <div className="table-responsive">
                  <table className="table table-hover align-middle mb-0">
                    <thead className="ems-table-head">
                      <tr>
                        <th>{t.common.month}</th>
                        <th className="text-center">{t.common.present}</th>
                        <th className="text-center">{t.common.absent}</th>
                        <th className="text-center">{t.common.leave}</th>
                        <th className="text-center">{t.me.recordsMarked}</th>
                        <th style={{ minWidth: 180 }}>{t.me.attendanceRate}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {(yearData.data?.months ?? []).map((m) => (
                        <tr key={m.month}>
                          <td className="f-w-600 ems-fs-13">{m.month}</td>
                          <td className="text-center ems-fs-13">{m.present}</td>
                          <td className="text-center ems-fs-13">{m.absent}</td>
                          <td className="text-center ems-fs-13">{m.leave}</td>
                          <td className="text-center ems-fs-13">{m.marked}</td>
                          <td>
                            <div className="d-flex align-items-center gap-2">
                              <div className="flex-grow-1 rounded" style={{ height: 8, background: "rgba(36,105,92,.1)" }}>
                                <div
                                  className="rounded"
                                  style={{
                                    height: 8,
                                    width: `${m.rate != null ? Math.min(100, m.rate) : 0}%`,
                                    background: m.rate != null && m.rate >= 90 ? "#2e8b57" : m.rate != null && m.rate >= 75 ? "#e39a1e" : "#dc3545",
                                  }}
                                />
                              </div>
                              <span className="ems-fs-12 f-w-600" style={{ minWidth: 48, textAlign: "right" }}>
                                {m.rate != null ? `${formatNumber(m.rate, locale)}%` : "—"}
                              </span>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Card>
            </>
          )}
        </div>
      )}
    </div>
  );
}