// checker-page.jsx — Checker (4 Eyes) Approval page for Hibank QRIS BackOffice
function CheckerPage({ merchants, setMerchants, primary, secondary }) {
  const TEAL = primary || '#0056D2';
  const ORANGE = secondary || '#cf5a27';

  // Seed Maker-Checker Requests
  const [requests, setRequests] = React.useState([
    { id: 'REQ-2606-0812', type: 'Perubahan Parameter Bisnis', detail: 'Ubah MDR Fee MRC-00244 (Batik Lestari Pekalongan) dari 0.70% menjadi 0.50%', maker: 'Merchant ABC', time: '2026-06-24T09:12:00', status: 'pending', targetMerchant: 'MRC-00244', updateKey: 'mdrFee', updateVal: '0.50%' },
    { id: 'REQ-2606-0813', type: 'Refund Transaksi Manual', detail: 'Refund Transaksi TX-260624-8831 sebesar Rp 45.000 (Kopi Senja Nusantara)', maker: 'Merchant ABC', time: '2026-06-24T10:15:00', status: 'pending' },
    { id: 'REQ-2606-0817', type: 'Pemeriksaan Onboarding Merchant', detail: 'Pemeriksaan kelayakan & validasi dokumen onboarding untuk calon merchant: Kopi Senja Nusantara (MID: MRC-00246, Bidang: 5814 - Kafe/Kopi)', maker: 'Dewi Anggraini ', time: '2026-06-24T10:20:00', status: 'pending', targetMerchant: 'MRC-00246', updateKey: 'status', updateVal: 'approved', isOnboarding: true },
    { id: 'REQ-2606-0814', type: 'Perubahan Rekening Pencairan', detail: 'Ubah Rekening MRC-00246 (Kopi Senja Nusantara) ke Bank Mandiri 1310022419 a/n RANGGA PRATAMA', maker: 'Hendra Wijaya ', time: '2026-06-24T10:30:00', status: 'pending', targetMerchant: 'MRC-00246', updateKey: 'accountNumber', updateVal: '1310022419' },
    { id: 'REQ-2606-0815', type: 'Suspend Terminal POS', detail: 'Deaktivasi POS-003 (POS Mobile Waiter) di MRC-00244 (Batik Lestari Pekalongan)', maker: 'Rangga Pratama (Operator)', time: '2026-06-24T10:45:00', status: 'pending' },
    { id: 'REQ-2606-0816', type: 'Pemberian Limit Khusus', detail: 'Ubah Maks Transaksi MRC-00245 (Toko Bangunan Maju Jaya) dari Rp 10.000.000 menjadi Rp 25.000.000', maker: 'Dewi Anggraini', time: '2026-06-24T11:00:00', status: 'pending' }
  ]);

  const [activeTab, setActiveTab] = React.useState('pending'); // 'pending' | 'history'
  const [view, setView] = React.useState('list'); // 'list' | 'detail'
  const [selectedReq, setSelectedReq] = React.useState(null);
  const [checkerNote, setCheckerNote] = React.useState('');
  const [toastMessage, setToastMessage] = React.useState(null);

  const fmtDate = (iso) => {
    const d = new Date(iso);
    return d.toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' }) + ' ' +
      d.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
  };

  const triggerToast = (msg) => {
    setToastMessage(msg);
    setTimeout(() => setToastMessage(null), 3000);
  };

  // Approve action
  const handleApprove = () => {
    if (!selectedReq) return;

    // Perform state updates in requests
    setRequests(prev => prev.map(req => {
      if (req.id !== selectedReq.id) return req;
      return {
        ...req,
        status: 'approved',
        checker: 'Arief Budiman (Checker)',
        checkedAt: new Date().toISOString(),
        note: checkerNote.trim() || 'Disetujui'
      };
    }));

    // If request contains targetMerchant update, apply it to merchants state
    if (selectedReq.targetMerchant && selectedReq.updateKey && setMerchants) {
      setMerchants(prev => prev.map(m => {
        if (m.id !== selectedReq.targetMerchant) return m;
        return {
          ...m,
          [selectedReq.updateKey]: selectedReq.updateVal
        };
      }));
    }

    triggerToast(`Pengajuan ${selectedReq.id} berhasil disetujui.`);
    setSelectedReq(null);
    setCheckerNote('');
    setView('list');
  };

  // Reject action
  const handleReject = () => {
    if (!selectedReq || !checkerNote.trim()) return;

    setRequests(prev => prev.map(req => {
      if (req.id !== selectedReq.id) return req;
      return {
        ...req,
        status: 'rejected',
        checker: 'Arief Budiman (Checker)',
        checkedAt: new Date().toISOString(),
        note: checkerNote.trim()
      };
    }));

    triggerToast(`Pengajuan ${selectedReq.id} telah ditolak.`);
    setSelectedReq(null);
    setCheckerNote('');
    setView('list');
  };

  const filteredRequests = requests.filter(r =>
    activeTab === 'pending' ? r.status === 'pending' : r.status !== 'pending'
  );

  // ── DETAILED APPROVAL SUB-PAGE VIEW ──
  if (view === 'detail' && selectedReq) {
    const isPending = selectedReq.status === 'pending';
    const isApproved = selectedReq.status === 'approved';
    const isRejected = selectedReq.status === 'rejected';

    return (
      <div style={{ padding: '24px 32px 56px', animation: 'fadeIn 200ms ease' }}>
        {/* Breadcrumb */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
          <button
            onClick={() => { setView('list'); setSelectedReq(null); }}
            style={{
              display: 'flex', alignItems: 'center', gap: 6, background: '#fff', border: '1.5px solid #efefef',
              borderRadius: 8, padding: '8px 14px', fontSize: 13, fontWeight: 600, color: '#515252', cursor: 'pointer', transition: 'all 150ms'
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = TEAL; e.currentTarget.style.color = TEAL; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = '#efefef'; e.currentTarget.style.color = '#515252'; }}
          >
            <i className="bx bx-left-arrow-alt" style={{ fontSize: 18 }} /> Kembali
          </button>
          <div style={{ fontSize: 13, color: '#a7a8a8' }}>
            Checker Approval / <span style={{ color: '#515252', fontWeight: 600 }}>Detail Request {selectedReq.id}</span>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 24, alignItems: 'start' }}>

          {/* Main Info */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            {/* Card 1: Request Details */}
            <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(23,25,25,0.04)', padding: '24px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid #efefef', paddingBottom: 16, marginBottom: 16 }}>
                <div>
                  <span style={{ display: 'inline-block', background: `${TEAL}10`, color: TEAL, fontSize: 11, fontWeight: 700, borderRadius: 4, padding: '3px 8px', marginBottom: 6 }}>
                    {selectedReq.type}
                  </span>
                  <h2 style={{ fontSize: 18, fontWeight: 800, color: '#171919', margin: 0 }}>Request ID: {selectedReq.id}</h2>
                </div>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 4,
                  background: isApproved ? 'rgba(116,181,12,0.12)' : (isRejected ? 'rgba(237,49,81,0.1)' : 'rgba(217,146,11,0.12)'),
                  color: isApproved ? '#74b50c' : (isRejected ? '#ed3151' : '#d9920b'),
                  fontSize: 12, fontWeight: 700, borderRadius: 6, padding: '4px 10px'
                }}>
                  {selectedReq.status === 'pending' ? 'Pending Approval' : selectedReq.status.toUpperCase()}
                </span>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 20 }}>
                <div>
                  <div style={{ fontSize: 11, color: '#a7a8a8', textTransform: 'uppercase', fontWeight: 600 }}>Pengusul (Maker)</div>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: '#171919', marginTop: 4 }}>{selectedReq.maker}</div>
                </div>
                <div>
                  <div style={{ fontSize: 11, color: '#a7a8a8', textTransform: 'uppercase', fontWeight: 600 }}>Waktu Pengajuan</div>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: '#171919', marginTop: 4 }}>{fmtDate(selectedReq.time)}</div>
                </div>
              </div>

              <div style={{ borderTop: '1px solid #efefef', paddingTop: 16 }}>
                <div style={{ fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 8 }}>Deskripsi Perubahan:</div>
                <div style={{ background: '#f6f6f6', borderRadius: 8, padding: '16px', fontSize: 13, lineHeight: 1.5, color: '#171919', borderLeft: `4px solid ${TEAL}` }}>
                  {selectedReq.detail}
                </div>
              </div>

              {/* Special Section: Pemeriksaan Onboarding Merchant */}
              {selectedReq.isOnboarding && (
                <div style={{ marginTop: 24, borderTop: '1.5px dashed #efefef', paddingTop: 20 }}>
                  <h4 style={{ fontSize: 13.5, fontWeight: 800, color: '#171919', marginBottom: 12 }}>Dokumen & Informasi Onboarding Calon Merchant</h4>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                    {[
                      { label: 'NPWP Perusahaan/Pemilik', val: '09.254.812.3-014.000', verified: true },
                      { label: 'NIK Pemilik', val: '3273011505900002', verified: true },
                      { label: 'Rekening Bank Penerima', val: 'Bank Hibank - 8820145566 a/n RANGGA PRATAMA', verified: true },
                      { label: 'Dokumen Legalitas (SIUP/NIB)', val: 'NIB-812739123-A', verified: true }
                    ].map((doc, idx) => (
                      <div key={idx} style={{ background: '#fafafa', border: '1px solid #efefef', borderRadius: 8, padding: '10px 12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <div>
                          <div style={{ fontSize: 11, color: '#a7a8a8', fontWeight: 600 }}>{doc.label}</div>
                          <div style={{ fontSize: 12, fontWeight: 700, color: '#171919', marginTop: 3, fontFamily: 'monospace' }}>{doc.val}</div>
                        </div>
                        <span style={{ background: 'rgba(116,181,12,0.12)', color: '#74b50c', fontSize: 10, fontWeight: 700, borderRadius: 4, padding: '2px 6px', display: 'inline-flex', alignItems: 'center', gap: 2 }}>
                          <i className="bx bx-check-shield" /> Terverifikasi
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>

            {/* Checker Decision Log (If not pending) */}
            {!isPending && (
              <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(23,25,25,0.04)', padding: '24px' }}>
                <h3 style={{ fontSize: 14.5, fontWeight: 800, color: '#171919', marginTop: 0, marginBottom: 16 }}>Log Otorisasi Checker</h3>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
                  <div>
                    <div style={{ fontSize: 11, color: '#a7a8a8', textTransform: 'uppercase', fontWeight: 600 }}>Pemeriksa (Checker)</div>
                    <div style={{ fontSize: 13, fontWeight: 700, color: '#171919', marginTop: 4 }}>{selectedReq.checker}</div>
                  </div>
                  <div>
                    <div style={{ fontSize: 11, color: '#a7a8a8', textTransform: 'uppercase', fontWeight: 600 }}>Waktu Pemeriksaan</div>
                    <div style={{ fontSize: 13, fontWeight: 700, color: '#171919', marginTop: 4 }}>{fmtDate(selectedReq.checkedAt)}</div>
                  </div>
                </div>
                <div style={{ borderTop: '1px solid #efefef', paddingTop: 16 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Catatan Checker:</div>
                  <div style={{ background: '#fafafa', borderRadius: 8, padding: '12px 14px', border: '1px solid #efefef', fontSize: 13, color: '#515252' }}>
                    {selectedReq.note || '—'}
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* Action Form (Sidebar style) */}
          <div style={{ position: 'sticky', top: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
            {isPending ? (
              <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(23,25,25,0.04)', padding: '20px' }}>
                <h3 style={{ fontSize: 14.5, fontWeight: 800, color: '#171919', marginTop: 0, marginBottom: 12 }}>Form Otorisasi</h3>

                <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Catatan Checker</label>
                <textarea
                  rows="4"
                  placeholder="Tulis alasan penolakan (wajib jika ditolak) atau catatan persetujuan..."
                  value={checkerNote}
                  onChange={e => setCheckerNote(e.target.value)}
                  style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', fontFamily: 'inherit', marginBottom: 16, resize: 'none' }}
                />

                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <button
                    onClick={handleApprove}
                    style={{ width: '100%', background: '#74b50c', color: '#fff', border: 'none', borderRadius: 8, padding: '12px 0', fontSize: 13, fontWeight: 700, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, boxShadow: '0 4px 12px rgba(116,181,12,0.2)' }}
                  >
                    <i className="bx bx-check-shield" style={{ fontSize: 16 }} />
                    Setujui (Approve)
                  </button>
                  <button
                    onClick={handleReject}
                    disabled={!checkerNote.trim()}
                    style={{
                      width: '100%',
                      background: checkerNote.trim() ? '#ed3151' : '#fcd5dc',
                      color: '#fff', border: 'none', borderRadius: 8, padding: '12px 0',
                      fontSize: 13, fontWeight: 700,
                      cursor: checkerNote.trim() ? 'pointer' : 'not-allowed',
                      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                      boxShadow: checkerNote.trim() ? '0 4px 12px rgba(237,49,81,0.2)' : 'none'
                    }}
                  >
                    <i className="bx bx-x-circle" style={{ fontSize: 16 }} />
                    Tolak Pengajuan (Reject)
                  </button>
                </div>
              </div>
            ) : (
              <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(23,25,25,0.04)', padding: '20px', textAlign: 'center' }}>
                <i className={`bx ${isApproved ? 'bx-check-shield' : 'bx-x-circle'}`} style={{ fontSize: 44, color: isApproved ? '#74b50c' : '#ed3151', marginBottom: 12 }} />
                <h4 style={{ margin: 0, fontSize: 14.5, fontWeight: 800, color: '#171919' }}>Pemeriksaan Selesai</h4>
                <p style={{ fontSize: 12.5, color: '#a7a8a8', marginTop: 4, marginBottom: 0 }}>
                  Aksi otorisasi untuk request ini telah selesai diproses.
                </p>
              </div>
            )}

            <button
              onClick={() => { setView('list'); setSelectedReq(null); }}
              style={{ width: '100%', background: '#fff', border: '1px solid #efefef', borderRadius: 8, padding: '12px 0', fontSize: 13, fontWeight: 600, color: '#515252', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'center' }}
            >
              Kembali ke Daftar
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div style={{ padding: '24px 32px 56px', animation: 'fadeIn 200ms ease' }}>

      {/* Header */}
      <div style={{ marginBottom: 24 }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: TEAL, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>Checker (4 Eyes)</div>
        <h1 style={{ fontSize: 24, fontWeight: 700, color: '#171919', letterSpacing: '-0.01em', margin: 0 }}>Checker Approval</h1>
        <p style={{ fontSize: 13, color: '#515252', marginTop: 4, marginBottom: 0 }}>Pemeriksaan request yang diajukan.</p>
      </div>

      {/* ── STATS SUMMARY CARDS ── */}
      <div style={{ display: 'flex', gap: 16, marginBottom: 24, flexWrap: 'wrap' }}>
        {[
          { label: 'Menunggu Pemeriksaan', value: requests.filter(r => r.status === 'pending').length, sub: 'Perlu verifikasi segera', icon: 'bx-time-five', color: ORANGE },
          { label: 'Selesai Diperiksa', value: requests.filter(r => r.status === 'approved').length, sub: 'Total aksi diotorisasi', icon: 'bx-check-double', color: '#74b50c' },
          { label: 'Ditolak', value: requests.filter(r => r.status === 'rejected').length, sub: 'Pengajuan dibatalkan', icon: 'bx-block', color: '#ed3151' }
        ].map((card, i) => (
          <div
            key={i}
            style={{
              background: '#fff', padding: '18px 20px', borderRadius: 14, border: '1px solid #efefef',
              boxShadow: '0 2px 8px rgba(23,25,25,0.03)', display: 'flex', alignItems: 'center', gap: 16, flex: 1, minWidth: 200
            }}
          >
            <div style={{ width: 44, height: 44, borderRadius: '50%', background: `${card.color}10`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <i className={`bx ${card.icon}`} style={{ fontSize: 20, color: card.color }} />
            </div>
            <div>
              <div style={{ fontSize: 12, color: '#a7a8a8', fontWeight: 600 }}>{card.label}</div>
              <div style={{ fontSize: 22, fontWeight: 800, color: '#171919', marginTop: 4, lineHeight: 1 }}>{card.value}</div>
              <div style={{ fontSize: 11, color: '#a7a8a8', marginTop: 4 }}>{card.sub}</div>
            </div>
          </div>
        ))}
      </div>

      {/* ── TABS NAVIGATION ── */}
      <div style={{ display: 'flex', borderBottom: '2.5px solid #efefef', marginBottom: 20, gap: 24 }}>
        {[
          { id: 'pending', label: 'Inbox Persetujuan', icon: 'bx-envelope' },
          { id: 'history', label: 'Riwayat Otorisasi', icon: 'bx-history' }
        ].map(tab => {
          const isActive = activeTab === tab.id;
          const isPendingTab = tab.id === 'pending';
          const countBadge = isPendingTab ? requests.filter(r => r.status === 'pending').length : 0;
          return (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              style={{
                background: 'none', border: 'none', padding: '12px 4px', fontSize: 13.5, fontWeight: isActive ? 750 : 600,
                color: isActive ? TEAL : '#a7a8a8', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8,
                borderBottom: isActive ? `3.5px solid ${TEAL}` : '3.5px solid transparent', marginBottom: -3,
                transition: 'all 150ms', fontFamily: 'inherit'
              }}
            >
              <i className={`bx ${tab.icon}`} style={{ fontSize: 17 }} />
              {tab.label}
              {countBadge > 0 && (
                <span style={{ display: 'inline-flex', background: ORANGE, color: '#fff', fontSize: 10.5, fontWeight: 700, borderRadius: 100, width: 18, height: 18, alignItems: 'center', justifyContent: 'center' }}>
                  {countBadge}
                </span>
              )}
            </button>
          );
        })}
      </div>

      {/* ── QUEUE LIST TABLE ── */}
      <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(0,0,0,0.02)', overflow: 'hidden' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13, textAlign: 'left' }}>
          <thead>
            <tr style={{ background: '#fafafa', borderBottom: '1px solid #efefef' }}>
              <th style={{ padding: '12px 18px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase', width: 140 }}>ID Request</th>
              <th style={{ padding: '12px 18px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Jenis Request</th>
              <th style={{ padding: '12px 18px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Rincian Perubahan / Aksi</th>
              <th style={{ padding: '12px 18px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Pengusul (Maker)</th>
              <th style={{ padding: '12px 18px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Waktu Pengajuan</th>
              {activeTab !== 'pending' && (
                <>
                  <th style={{ padding: '12px 18px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Pemeriksa (Checker)</th>
                  <th style={{ padding: '12px 18px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Status</th>
                </>
              )}
              <th style={{ padding: '12px 18px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase', textAlign: 'center', width: 140 }}>Aksi</th>
            </tr>
          </thead>
          <tbody>
            {filteredRequests.length === 0 ? (
              <tr>
                <td colSpan={activeTab === 'pending' ? '6' : '8'} style={{ padding: '40px 18px', textAlign: 'center', color: '#a7a8a8' }}>
                  <i className="bx bx-check-double" style={{ fontSize: 32, display: 'block', marginBottom: 8 }} />
                  {activeTab === 'pending' ? 'Semua pengajuan checker telah diselesaikan.' : 'Belum ada riwayat otorisasi.'}
                </td>
              </tr>
            ) : filteredRequests.map(req => {
              const isApproved = req.status === 'approved';
              const isRejected = req.status === 'rejected';

              return (
                <tr key={req.id} style={{ borderBottom: '1px solid #f3f3f3', transition: 'background 150ms' }} onMouseEnter={e => e.currentTarget.style.background = '#fafbfc'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                  <td style={{ padding: '14px 18px', fontFamily: 'monospace', fontWeight: 700, color: TEAL }}>{req.id}</td>
                  <td style={{ padding: '14px 18px', fontWeight: 700, color: '#171919' }}>{req.type}</td>
                  <td style={{ padding: '14px 18px', color: '#515252', maxWidth: 350, lineHeight: 1.4 }}>{req.detail}</td>
                  <td style={{ padding: '14px 18px', color: '#515252' }}>{req.maker}</td>
                  <td style={{ padding: '14px 18px', color: '#a7a8a8' }}>{fmtDate(req.time)}</td>

                  {activeTab !== 'pending' && (
                    <>
                      <td style={{ padding: '14px 18px', color: '#515252' }}>
                        <div>{req.checker}</div>
                        <div style={{ fontSize: 11, color: '#a7a8a8', marginTop: 2 }}>{fmtDate(req.checkedAt)}</div>
                      </td>
                      <td style={{ padding: '14px 18px' }}>
                        <span style={{
                          display: 'inline-flex', alignItems: 'center', gap: 4,
                          background: isApproved ? 'rgba(116,181,12,0.12)' : 'rgba(237,49,81,0.1)',
                          color: isApproved ? '#74b50c' : '#ed3151',
                          fontSize: 11.5, fontWeight: 700, borderRadius: 4, padding: '3px 8px'
                        }}>
                          {isApproved ? 'Approved' : 'Rejected'}
                        </span>
                      </td>
                    </>
                  )}

                  {/* Actions Column: only Detail button */}
                  <td style={{ padding: '14px 18px', textAlign: 'center' }}>
                    <button
                      onClick={() => { setSelectedReq(req); setView('detail'); setCheckerNote(''); }}
                      style={{
                        background: TEAL, color: '#fff', border: 'none', borderRadius: 6, padding: '6px 12px',
                        fontSize: 11.5, fontWeight: 750, cursor: 'pointer', display: 'inline-flex',
                        alignItems: 'center', gap: 4, boxShadow: `0 2px 6px ${TEAL}15`, transition: 'all 150ms',
                        fontFamily: 'inherit'
                      }}
                      onMouseEnter={e => e.currentTarget.style.background = '#0041A8'}
                      onMouseLeave={e => e.currentTarget.style.background = TEAL}
                    >
                      <i className="bx bx-show" /> Detail
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {/* ── TOAST NOTIFICATION ── */}
      {toastMessage && (
        <div style={{ position: 'fixed', bottom: 24, right: 24, zIndex: 1600, background: '#10B981', color: '#fff', padding: '16px 24px', borderRadius: 10, boxShadow: '0 8px 24px rgba(16,185,129,0.25)', display: 'flex', alignItems: 'center', gap: 10, animation: 'slideUp 200ms ease' }}>
          <i className="bx bx-shield-quarter" style={{ fontSize: 20 }} />
          <span style={{ fontSize: 13.5, fontWeight: 700 }}>{toastMessage}</span>
        </div>
      )}

    </div>
  );
}

Object.assign(window, { CheckerPage });