(() => {
const { Card, Button, IconButton, Badge, Modal, Field, Input, Select, Textarea, DataTable, StatCard, EmptyState, Chip, Icon, Avatar } = window.TaskFlowDesignSystem_dd53c2;

/* Absen kunjungan perusahaan — khusus role Marketing.
   GPS WAJIB aktif: modal langsung meminta izin lokasi perangkat (PC / HP / tablet)
   dan tombol simpan baru terbuka setelah koordinat benar-benar didapat.
   Di produksi koordinat dikirim ke server bersama waktu server (bukan waktu perangkat),
   dan server menolak absen tanpa lat/lng — lihat CODEIGNITER3.md. */

const jamNow = () => {
  const d = new Date();
  return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
};
const GPS_HELP = [
  { icon: "monitor", label: "PC / Laptop", text: "Klik ikon kunci di address bar → Location → Allow, lalu muat ulang halaman." },
  { icon: "smartphone", label: "Android", text: "Aktifkan Lokasi di panel notifikasi, lalu izinkan akses lokasi untuk browser." },
  { icon: "tablet", label: "iPhone / iPad", text: "Setelan → Privasi & Keamanan → Layanan Lokasi → aktifkan untuk browser." },
];

function GpsBadge({ geo }) {
  const map = {
    idle: { tone: "neutral", icon: "satellite-dish", text: "GPS belum dicek" },
    locating: { tone: "gold", icon: "loader", text: "Mencari lokasi…" },
    ok: { tone: "leaf", icon: "map-pin-check", text: `GPS aktif · ±${Math.round(geo.acc || 0)} m` },
    denied: { tone: "coral", icon: "map-pin-off", text: "Izin lokasi ditolak" },
    unsupported: { tone: "coral", icon: "map-pin-off", text: "Perangkat tanpa GPS" },
    insecure: { tone: "coral", icon: "shield-alert", text: "Butuh HTTPS" },
    timeout: { tone: "coral", icon: "map-pin-off", text: "Sinyal GPS tidak terbaca" },
    error: { tone: "coral", icon: "map-pin-off", text: "Lokasi gagal dibaca" },
  };
  const s = map[geo.state] || map.idle;
  const fg = { leaf: "var(--leaf-600)", gold: "var(--gold-600)", coral: "var(--coral-600)", neutral: "var(--neutral-600)" }[s.tone];
  return <Badge tone={s.tone}><Icon name={s.icon} size={13} color={fg} />{s.text}</Badge>;
}

function AbsenModal({ open, onClose, onSave, companies }) {
  const [geo, setGeo] = React.useState({ state: "idle" });
  const [form, setForm] = React.useState({ company: "", purpose: VISIT_PURPOSES[0], contact: "", note: "" });
  const [err, setErr] = React.useState("");
  const [clock, setClock] = React.useState(jamNow());
  const bp = useBreakpoint();
  const narrow = bp === "mobile";

  const [blocked, setBlocked] = React.useState(false);
  const ask = React.useCallback(() => {
    if (!navigator.geolocation) return setGeo({ state: "unsupported" });
    // Geolocation hanya jalan di HTTPS (atau localhost) — di HTTP browser diam saja.
    if (!window.isSecureContext) return setGeo({ state: "insecure" });
    setBlocked(false);
    setGeo({ state: "locating" });
    // PENTING: permintaan lokasi harus dipanggil LANGSUNG (sinkron) di dalam gesture
    // pengguna. Menunggu `await navigator.permissions.query` lebih dulu membuat
    // Safari/iOS kehilangan user-activation sehingga popup izin tidak pernah muncul.
    navigator.geolocation.getCurrentPosition(
      (p) => setGeo({ state: "ok", lat: p.coords.latitude, lng: p.coords.longitude, acc: p.coords.accuracy }),
      (e) => { if (e.code === 1) setBlocked(true); setGeo({ state: e.code === 1 ? "denied" : e.code === 3 ? "timeout" : "error", msg: e.message }); },
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 0 },
    );
    // Status izin dibaca setelahnya — hanya untuk memilih pesan bantuan.
    try {
      if (navigator.permissions) navigator.permissions.query({ name: "geolocation" })
        .then((p) => { if (p.state === "denied") setBlocked(true); }).catch(() => {});
    } catch (e) {}
  }, []);
  const framed = typeof window !== "undefined" && window.self !== window.top;

  // Popup izin GPS muncul begitu modal dibuka — absen tidak bisa dilanjutkan tanpa lokasi.
  React.useEffect(() => { if (open) { setForm({ company: "", purpose: VISIT_PURPOSES[0], contact: "", note: "" }); setErr(""); ask(); } }, [open, ask]);
  React.useEffect(() => {
    if (!open) return;
    const t = setInterval(() => setClock(jamNow()), 1000);
    return () => clearInterval(t);
  }, [open]);

  if (!open) return null;
  const ready = geo.state === "ok";
  const failed = ["denied", "unsupported", "timeout", "error", "insecure"].includes(geo.state);

  const save = () => {
    if (!ready) return setErr("Lokasi GPS belum didapat. Aktifkan GPS lalu coba lagi.");
    if (!form.company.trim()) return setErr("Nama perusahaan wajib diisi.");
    onSave({ company: form.company.trim(), purpose: form.purpose, contact: form.contact.trim(), note: form.note.trim(), lat: geo.lat, lng: geo.lng, acc: Math.round(geo.acc || 0), time: jamNow() });
  };

  return (
    <Modal open width={560} title="Absen Kunjungan" onClose={onClose}
      description="Absen hanya tersimpan bila GPS perangkat aktif. Tanggal, jam, dan koordinat tercatat otomatis."
      footer={<><Button variant="ghost" onClick={onClose}>Batal</Button>
        <Button variant="primary" gradient iconLeft="map-pin-check" disabled={!ready} onClick={save}>Clock In Sekarang</Button></>}>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", padding: "12px 14px", borderRadius: "var(--radius-md)", background: ready ? "var(--leaf-50)" : failed ? "var(--coral-50)" : "var(--gold-50)", border: `1px solid ${ready ? "var(--leaf-200)" : failed ? "var(--coral-100)" : "var(--gold-200)"}` }}>
          <span style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0, flex: 1 }}>
            <span style={{ font: "var(--fw-extrabold) var(--fs-h3)/1.1 var(--font-display)", color: "var(--text-strong)" }}>{TODAY} · {clock}</span>
            <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>Waktu clock in memakai jam server saat disimpan.</span>
          </span>
          <GpsBadge geo={geo} />
        </div>

        {geo.state === "locating" && (
          <span style={{ display: "flex", alignItems: "center", gap: 10, font: "var(--text-body-default)", color: "var(--text-muted)" }}>
            <Icon name="satellite-dish" size={16} color="var(--gold-600)" />Izinkan akses lokasi pada popup browser untuk melanjutkan.
          </span>
        )}
        {geo.state === "locating" && (
          <span style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
            <Button variant="secondary" size="sm" iconLeft="map-pin" onClick={ask}>Popup tidak muncul? Minta Izin Lokasi</Button>
          </span>
        )}

        {ready && (
          <div style={{ display: "grid", gridTemplateColumns: narrow ? "minmax(0,1fr)" : "1fr 1fr", gap: 10, padding: "12px 14px", borderRadius: "var(--radius-md)", background: "var(--surface-glass-sunken)", border: "1px solid var(--border-subtle)" }}>
            {[["Latitude", fmtCoord(geo.lat)], ["Longitude", fmtCoord(geo.lng)], ["Akurasi", `±${Math.round(geo.acc || 0)} meter`], ["Sumber", "GPS perangkat"]].map(([k, v]) => (
              <span key={k} style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                <span style={{ font: "var(--text-caption)", color: "var(--text-faint)" }}>{k}</span>
                <span style={{ font: "var(--fw-bold) var(--fs-sm)/1.3 var(--font-mono)", color: "var(--text-strong)" }}>{v}</span>
              </span>
            ))}
            <a href={gmapsUrl(geo.lat, geo.lng)} target="_blank" rel="noreferrer"
              style={{ gridColumn: narrow ? "auto" : "1 / -1", display: "inline-flex", alignItems: "center", gap: 8, font: "var(--fw-bold) var(--fs-sm)/1 var(--font-body)" }}>
              <Icon name="external-link" size={14} color="var(--teal-600)" />Lihat titik absen di peta
            </a>
          </div>
        )}

        {failed && (
          <div style={{ display: "flex", flexDirection: "column", gap: 10, padding: "12px 14px", borderRadius: "var(--radius-md)", background: "var(--coral-50)", border: "1px solid var(--coral-100)" }}>
            <span style={{ display: "flex", alignItems: "center", gap: 8, font: "var(--fw-bold) var(--fs-sm)/1.3 var(--font-body)", color: "var(--coral-600)" }}>
              <Icon name="triangle-alert" size={16} color="var(--coral-600)" />GPS wajib aktif untuk absen
            </span>
            {geo.state === "insecure" && (
              <span style={{ font: "var(--text-caption)", color: "var(--text-body)" }}>
                Halaman ini dibuka tanpa HTTPS. Browser memblokir GPS di koneksi tidak aman — buka aplikasi lewat alamat <strong>https://</strong> lalu coba lagi.
              </span>
            )}
            {framed && (
              <span style={{ font: "var(--text-caption)", color: "var(--text-body)" }}>
                Halaman sedang dibuka di dalam bingkai (iframe/webview). Buka aplikasi langsung di tab browser agar izin lokasi bisa diminta.
              </span>
            )}
            {blocked && (
              <span style={{ font: "var(--text-caption)", color: "var(--text-body)" }}>
                Izin lokasi sudah <strong>diblokir</strong> untuk situs ini, sehingga popup tidak muncul lagi. Buka setelan izin situs (ikon 🔒 / ⓘ di sebelah alamat → <strong>Lokasi → Izinkan</strong>), lalu tekan Muat Ulang Halaman.
              </span>
            )}
            {GPS_HELP.map((h) => (
              <span key={h.label} style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
                <Icon name={h.icon} size={15} color="var(--coral-600)" />
                <span style={{ font: "var(--text-caption)", color: "var(--text-body)" }}><strong>{h.label}</strong> — {h.text}</span>
              </span>
            ))}
            <span style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              <Button variant="secondary" size="sm" iconLeft="rotate-ccw" onClick={ask}>Coba Aktifkan GPS Lagi</Button>
              {blocked && <Button variant="primary" size="sm" iconLeft="refresh-cw" onClick={() => window.location.reload()}>Muat Ulang Halaman</Button>}
            </span>
          </div>
        )}

        <div style={{ display: "grid", gridTemplateColumns: narrow ? "minmax(0,1fr)" : "1fr 1fr", gap: 12 }}>
          <Field label="Perusahaan / Instansi" required hint="Pilih dari daftar atau tulis nama baru.">
            <Input icon="building-2" list="bbmc-companies" value={form.company} placeholder="PT ..."
              onChange={(e) => { setForm({ ...form, company: e.target.value }); setErr(""); }} />
          </Field>
          <Field label="Tujuan Kunjungan" required>
            <Select value={form.purpose} onChange={(e) => setForm({ ...form, purpose: e.target.value })} options={VISIT_PURPOSES} />
          </Field>
        </div>
        <datalist id="bbmc-companies">{companies.map((c) => <option key={c} value={c}></option>)}</datalist>
        <Field label="Nama yang Ditemui">
          <Input icon="user-round" value={form.contact} placeholder="Mis. Bu Ratna — HRD"
            onChange={(e) => setForm({ ...form, contact: e.target.value })} />
        </Field>
        <Field label="Catatan Kunjungan">
          <Textarea rows={3} value={form.note} placeholder="Hasil pertemuan, kesepakatan, atau tindak lanjut."
            onChange={(e) => setForm({ ...form, note: e.target.value })} />
        </Field>
        {err && <span style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "9px 12px", borderRadius: "var(--radius-sm)", background: "var(--coral-50)", border: "1px solid var(--coral-100)", font: "var(--text-caption)", color: "var(--coral-600)" }}>
          <Icon name="triangle-alert" size={15} color="var(--coral-600)" />{err}
        </span>}
      </div>
    </Modal>
  );
}

function AttendanceScreen({ records = [], meId, readOnly = false, onSave, onDelete, companies = COMPANIES }) {
  const bp = useBreakpoint();
  const narrow = bp === "mobile";
  const [open, setOpen] = React.useState(false);
  const [who, setWho] = React.useState("all");
  const [q, setQ] = React.useState("");
  const [page, setPage] = React.useState(1);
  const [removing, setRemoving] = React.useState(null);
  // Default halaman ini = minggu saat login (Senin–Minggu), bukan seluruh riwayat.
  const week = React.useMemo(() => weekRange(), []);
  const month = React.useMemo(() => monthRange(), []);
  const [rg, setRg] = React.useState(week);
  const preset = rg.from === week.from && rg.to === week.to ? "week"
    : rg.from === month.from && rg.to === month.to ? "month" : "custom";
  const PER = 15;
  const marketers = React.useMemo(() => USERS.filter((u) => (u.access || "user") === "marketing"), []);
  const scoped = React.useMemo(() => {
    const s = q.trim().toLowerCase();
    return records
      .filter((r) => (readOnly ? who === "all" || r.user === who : r.user === meId))
      .filter((r) => inRange(r.date, rg.from, rg.to))
      .filter((r) => !s || r.company.toLowerCase().includes(s) || String(r.purpose).toLowerCase().includes(s))
      .slice()
      .sort((a, b) => (parseId(b.date) - parseId(a.date)) || String(b.time).localeCompare(String(a.time)));
  }, [records, who, q, readOnly, meId, rg]);
  React.useEffect(() => { setPage(1); }, [who, q, rg]);
  const shown = scoped.slice(0, page * PER);
  const today = scoped.filter((r) => r.date === TODAY);
  const days = new Set(scoped.map((r) => r.date)).size;
  const firms = new Set(scoped.map((r) => r.company)).size;

  const exportCsv = () => {
    const head = ["Tanggal", "Jam", "Marketing", "Perusahaan", "Tujuan", "Ditemui", "Latitude", "Longitude", "Akurasi (m)", "Catatan"];
    const rows = scoped.map((r) => [r.date, r.time, nameOf(r.user), r.company, r.purpose, r.contact || "", fmtCoord(r.lat), fmtCoord(r.lng), r.acc, (r.note || "").replace(/[\r\n]+/g, " ")]);
    const csv = [head, ...rows].map((line) => line.map((c) => `"${String(c).replace(/"/g, '""')}"`).join(",")).join("\r\n");
    const url = URL.createObjectURL(new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8" }));
    const a = document.createElement("a");
    a.href = url; a.download = `absen-kunjungan-${TODAY.replace(/\s/g, "-").toLowerCase()}.csv`;
    document.body.appendChild(a); a.click(); a.remove();
    setTimeout(() => URL.revokeObjectURL(url), 4000);
  };

  // Export PDF mengikuti rentang tanggal yang sedang dipilih (cetak lewat iframe, tanpa pustaka tambahan).
  const exportPdf = () => {
    const pretty = (iso) => { const [y, m, d] = String(iso).split("-"); return `${d} ${MONTHS[+m - 1]} ${y}`; };
    const rows = scoped.map((r) => `<tr>
      <td><b>${r.date}</b><div class="s">${r.time} WITA</div></td>
      ${readOnly ? `<td>${nameOf(r.user)}</td>` : ""}
      <td><b>${r.company}</b><div class="s">${r.purpose}${r.contact ? " · " + r.contact : ""}</div>${r.note ? `<div class="s">${r.note}</div>` : ""}</td>
      <td class="m">${fmtCoord(r.lat)}, ${fmtCoord(r.lng)}<div class="s">±${r.acc} m</div></td></tr>`).join("");
    const kpi = (l, v) => `<div class="kpi"><div class="s">${l}</div><div class="v">${v}</div></div>`;
    const doc = `<!doctype html><html><head><meta charset="utf-8"><title>Absen Kunjungan ${rg.from} - ${rg.to}</title>
      <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
      <style>@page{size:A4;margin:14mm}*{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
      body{margin:0;font-family:'Plus Jakarta Sans',sans-serif;color:#45514B;font-size:12px}
      h1{margin:0;font-size:22px;color:#14201B;letter-spacing:-.02em}
      table{width:100%;border-collapse:collapse;margin-top:14px}
      th{text-align:left;padding:8px 10px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#748079;background:#F9FBFA;border-bottom:1px solid #E4EBE8}
      td{padding:8px 10px;border-bottom:1px solid #E4EBE8;vertical-align:top}
      .s{font-size:10px;color:#748079}.m{font-family:ui-monospace,Menlo,monospace;font-size:10px}
      .kpi{flex:1;border:1px solid #E4EBE8;border-radius:12px;padding:10px 12px}.kpi .v{font-size:20px;font-weight:800;color:#14201B}
      </style></head><body>
      <div style="display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:3px solid transparent;border-image:linear-gradient(90deg,#13A88C,#7DC242,#E0A81C) 1">
        <img src="${LOGO_URL}" style="height:44px" />
        <div style="margin-left:auto;text-align:right"><h1>Laporan Absen Kunjungan</h1>
        <div class="s">${readOnly ? "Semua marketing" : nameOf(meId)}${readOnly && who !== "all" ? " · " + nameOf(who) : ""} · periode ${pretty(rg.from)} s/d ${pretty(rg.to)} · dicetak ${TODAY}</div></div>
      </div>
      <div style="display:flex;gap:10px;margin-top:16px">${kpi("Total kunjungan", scoped.length)}${kpi("Hari aktif", days)}${kpi("Perusahaan", firms)}${kpi("Akurasi ≤ 25 m", scoped.filter((r) => r.acc <= 25).length)}</div>
      <table><thead><tr><th>Tanggal &amp; Jam</th>${readOnly ? "<th>Marketing</th>" : ""}<th>Perusahaan &amp; Tujuan</th><th>Koordinat GPS</th></tr></thead>
      <tbody>${rows || `<tr><td colspan="4">Tidak ada absen pada rentang ini.</td></tr>`}</tbody></table>
      <div class="s" style="padding-top:12px">Koordinat diambil dari GPS perangkat saat clock in dan tidak dapat diubah oleh user.</div>
      </body></html>`;
    const frame = document.createElement("iframe");
    frame.style.cssText = "position:fixed;right:0;bottom:0;width:0;height:0;border:0";
    document.body.appendChild(frame);
    frame.srcdoc = doc;
    frame.onload = () => setTimeout(() => { frame.contentWindow.focus(); frame.contentWindow.print(); setTimeout(() => frame.remove(), 1500); }, 500);
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: "var(--content-max)" }}>
      {!readOnly && (
        <Card float padding={narrow ? 16 : 20} style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 14 }}>
          <span style={{ display: "flex", flexDirection: "column", gap: 4, flex: 1, minWidth: 200 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8, font: "var(--text-h3)", color: "var(--text-strong)" }}>
              <Icon name="map-pin-check" size={18} color="var(--teal-600)" />Absen Kunjungan Perusahaan
            </span>
            <span style={{ font: "var(--text-body-default)", color: "var(--text-muted)" }}>
              {TODAY} · {today.length ? `${today.length} kunjungan tercatat hari ini` : "belum ada absen hari ini"}. GPS perangkat wajib aktif saat clock in.
            </span>
          </span>
          <Button variant="primary" size="lg" gradient iconLeft="satellite-dish" onClick={() => setOpen(true)}>Absen Sekarang</Button>
        </Card>
      )}

      <div style={{ display: "grid", gridTemplateColumns: cols(bp, 2, 4, 4), gap: narrow ? 10 : 16 }}>
        <StatCard label="Absen hari ini" value={today.length} icon="calendar-check" tone="teal" />
        <StatCard label="Total kunjungan" value={scoped.length} icon="route" tone="mint" />
        <StatCard label="Hari aktif" value={days} icon="calendar-days" tone="gold" />
        <StatCard label="Perusahaan" value={firms} icon="building-2" tone="leaf" />
      </div>

      <Card glass padding={0} style={{ minWidth: 0 }}>
        <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 10, padding: "14px 16px", borderBottom: "1px solid var(--border-subtle)" }}>
          <span style={{ font: "var(--text-h3)", flex: 1, minWidth: 140 }}>Riwayat Absen</span>
          <span style={{ width: narrow ? "100%" : 240 }}>
            <Input icon="search" value={q} placeholder="Cari perusahaan / tujuan" onChange={(e) => setQ(e.target.value)} />
          </span>
          <IconButton icon="file-down" size="sm" variant="outline" label="Export CSV" onClick={exportCsv} />
          <Button variant="secondary" size="sm" iconLeft="printer" onClick={exportPdf}>Export PDF</Button>
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 10, padding: "12px 16px", borderBottom: "1px solid var(--border-subtle)" }}>
          <Chip label="Minggu ini" icon="calendar-range" active={preset === "week"} onClick={() => setRg(week)} />
          <Chip label="Bulan ini" icon="calendar-days" active={preset === "month"} onClick={() => setRg(month)} />
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8, marginLeft: narrow ? 0 : "auto" }}>
            <Input size="sm" type="date" value={rg.from} onChange={(e) => e.target.value && setRg({ ...rg, from: e.target.value })} />
            <span style={{ font: "var(--text-caption)", color: "var(--text-faint)" }}>s/d</span>
            <Input size="sm" type="date" value={rg.to} onChange={(e) => e.target.value && setRg({ ...rg, to: e.target.value })} />
          </span>
        </div>
        {readOnly && marketers.length > 1 && (
          <div style={{ display: "flex", gap: 10, overflowX: "auto", padding: "12px 16px", borderBottom: "1px solid var(--border-subtle)" }}>
            <Chip label="Semua marketing" icon="users" count={records.length} active={who === "all"} onClick={() => setWho("all")} />
            {marketers.map((u) => (
              <Chip key={u.id} label={u.name} icon="user" count={records.filter((r) => r.user === u.id).length}
                active={who === u.id} onClick={() => setWho(u.id)} />
            ))}
          </div>
        )}
        <div style={{ padding: narrow ? 10 : 16 }}>
          {scoped.length === 0
            ? <EmptyState icon="map-pin-off" title="Tidak ada absen pada rentang tanggal ini" description="Ubah rentang tanggal di atas untuk melihat riwayat lain." />
            : (
              <>
                <DataTable
                  columns={[
                    { key: "when", label: "Tanggal & Jam" },
                    ...(readOnly ? [{ key: "who", label: "Marketing" }] : []),
                    { key: "firm", label: "Perusahaan & Tujuan" },
                    { key: "loc", label: "Lokasi GPS" },
                    ...(readOnly && onDelete ? [{ key: "act", label: "", align: "right" }] : []),
                  ]}
                  rows={shown.map((r) => ({
                    when: (
                      <span style={{ display: "flex", flexDirection: "column" }}>
                        <span style={{ font: "var(--fw-bold) var(--fs-sm)/1.3 var(--font-body)", color: "var(--text-strong)" }}>{r.date}</span>
                        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, font: "var(--text-caption)", color: "var(--text-muted)" }}>
                          <Icon name="clock" size={13} color="var(--text-faint)" />{r.time} WITA
                        </span>
                      </span>
                    ),
                    ...(readOnly ? {
                      who: (
                        <span style={{ display: "inline-flex", alignItems: "center", gap: 8, minWidth: 0 }}>
                          <Avatar size={24} name={nameOf(r.user)} src={avatarOf(r.user) || undefined} />
                          <span style={{ font: "var(--fw-semibold) var(--fs-sm)/1.3 var(--font-body)", color: "var(--text-strong)" }}>{nameOf(r.user)}</span>
                        </span>
                      ),
                    } : {}),
                    firm: (
                      <span style={{ display: "flex", flexDirection: "column", gap: 4, minWidth: 0 }}>
                        <span style={{ font: "var(--fw-bold) var(--fs-sm)/1.3 var(--font-body)", color: "var(--text-strong)" }}>{r.company}</span>
                        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, flexWrap: "wrap" }}>
                          <Badge tone="teal">{r.purpose}</Badge>
                          {r.contact && <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>{r.contact}</span>}
                        </span>
                        {r.note && <span style={{ font: "var(--text-caption)", color: "var(--text-muted)" }}>{r.note}</span>}
                      </span>
                    ),
                    loc: (
                      <span style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                        <span style={{ font: "var(--fw-medium) var(--fs-xs)/1.5 var(--font-mono)", color: "var(--text-body)" }}>{fmtCoord(r.lat)}, {fmtCoord(r.lng)}</span>
                        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                          <Badge tone={r.acc <= 25 ? "leaf" : r.acc <= 60 ? "gold" : "coral"}>±{r.acc} m</Badge>
                          <a href={gmapsUrl(r.lat, r.lng)} target="_blank" rel="noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 5, font: "var(--fw-bold) var(--fs-xs)/1 var(--font-body)" }}>
                            <Icon name="map" size={13} color="var(--teal-600)" />Peta
                          </a>
                        </span>
                      </span>
                    ),
                    ...(readOnly && onDelete ? { act: <IconButton icon="trash-2" size="sm" variant="ghost" label="Hapus absen" onClick={() => setRemoving(r)} /> } : {}),
                  }))}
                />
                {shown.length < scoped.length && (
                  <div style={{ display: "flex", justifyContent: "center", paddingTop: 12 }}>
                    <Button variant="secondary" size="sm" iconLeft="chevron-down" onClick={() => setPage((p) => p + 1)}>
                      Muat {Math.min(PER, scoped.length - shown.length)} absen lagi
                    </Button>
                  </div>
                )}
              </>
            )}
        </div>
      </Card>

      {!readOnly && (
        <Card padding={16} tint="teal" bordered={false} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
          <Icon name="shield-check" size={17} color="var(--teal-600)" />
          <span style={{ font: "var(--text-caption)", color: "var(--teal-700)" }}>
            Absen tidak dapat diubah atau dihapus setelah tersimpan. Koordinat, akurasi, dan jam tercatat di Log Activity dan terlihat oleh Direktur.
          </span>
        </Card>
      )}

      {removing && <Modal open width={410} title="Hapus Data Absen"
        description={`Absen ${removing.company} · ${removing.date} ${removing.time} akan dihapus permanen. Penghapusan tercatat di Log Activity.`}
        onClose={() => setRemoving(null)}
        footer={<><Button variant="ghost" onClick={() => setRemoving(null)}>Batal</Button>
          <Button variant="danger" iconLeft="trash-2" onClick={() => { onDelete(removing); setRemoving(null); }}>Hapus Absen</Button></>} />}

      <AbsenModal open={open} companies={companies} onClose={() => setOpen(false)}
        onSave={(payload) => { onSave && onSave(payload); setOpen(false); }} />
    </div>
  );
}

Object.assign(window, { AttendanceScreen });
})();