// refund.jsx — Refund Management Page for Hibank QRIS BackOffice
function RefundPage({ merchants, primary, secondary }) {
  const TEAL = primary || '#0056D2';
  const ORANGE = secondary || '#cf5a27';
  const GREEN = '#74b50c';
  const RED = '#ed3151';
  const AMBER = '#d9920b';

  // State
  const [refunds, setRefunds] = React.useState([
    { id: 'REFUND-001', txId: 'TX-260624-8831', mid: 'MRC-00244', name: 'Batik Lestari Pekalongan', customer: 'Budi Santoso', amount: 45000, time: '2026-06-24T09:12:00', reason: 'Double payment by customer', status: 'pending', refNo: '—' },
    { id: 'REFUND-002', txId: 'TX-260624-8832', mid: 'MRC-00245', name: 'Toko Bangunan Maju Jaya', customer: 'Siti Rahayu', amount: 125000, time: '2026-06-24T10:15:00', reason: 'Wrong nominal input', status: 'success', refNo: 'REF-RFD-8821921' },
    { id: 'REFUND-003', txId: 'TX-260624-8833', mid: 'MRC-00246', name: 'Kopi Senja Nusantara', customer: 'Andi Wijaya', amount: 35000, time: '2026-06-24T10:20:00', reason: 'Product out of stock', status: 'rejected', refNo: '—', rejectReason: 'Transactions settled & items delivered' }
  ]);

  const [selectedRefund, setSelectedRefund] = React.useState(null);
  const [showAddModal, setShowAddModal] = React.useState(false);
  const [rejectingRefund, setRejectingRefund] = React.useState(null);
  const [rejectReasonInput, setRejectReasonInput] = React.useState('');
  const [toast, setToast] = React.useState(null);

  // Form states
  const [formMerchantId, setFormMerchantId] = React.useState('');
  const [formTxId, setFormTxId] = React.useState('');
  const [formCustomer, setFormCustomer] = React.useState('');
  const [formAmount, setFormAmount] = React.useState('');
  const [formReason, setFormReason] = React.useState('');

  const activeMerchants = merchants ? merchants.filter(m => m.status === 'approved' || m.status === 'active' || m.status === 'pending_l2') : [];

  const fmtRp = (v) => {
    if (v === null || v === undefined) return '—';
    return 'Rp ' + Number(v).toLocaleString('id-ID');
  };

  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, kind = 'success') => {
    setToast({ msg, kind });
    setTimeout(() => setToast(null), 3000);
  };

  // Action: Approve refund
  const handleApproveRefund = (refundId) => {
    setRefunds(prev => prev.map(r => {
      if (r.id !== refundId) return r;
      const randRef = 'REF-RFD-' + Math.floor(1000000 + Math.random() * 9000000);
      return { ...r, status: 'success', refNo: randRef };
    }));
    triggerToast(`Pengajuan refund ${refundId} berhasil disetujui.`, 'success');
  };

  // Action: Reject refund
  const handleRejectRefundSubmit = (e) => {
    e.preventDefault();
    if (!rejectingRefund || !rejectReasonInput.trim()) return;

    setRefunds(prev => prev.map(r => {
      if (r.id !== rejectingRefund.id) return r;
      return { ...r, status: 'rejected', rejectReason: rejectReasonInput.trim() };
    }));

    triggerToast(`Pengajuan refund ${rejectingRefund.id} ditolak.`, 'success');

    // Close modal
    setRejectingRefund(null);
    setRejectReasonInput('');
  };

  // Action: Add new refund request
  const handleAddRefundSubmit = (e) => {
    e.preventDefault();
    if (!formMerchantId || !formTxId || !formCustomer || !formAmount.trim()) return;

    const m = activeMerchants.find(merchant => merchant.id === formMerchantId);
    if (!m) return;

    const newId = 'REFUND-' + Math.floor(100 + Math.random() * 900);
    const newRefund = {
      id: newId,
      txId: formTxId,
      mid: m.id,
      name: m.merchantName,
      customer: formCustomer,
      amount: Number(formAmount),
      time: new Date().toISOString(),
      reason: formReason || 'Permintaan refund merchant',
      status: 'pending',
      refNo: '—'
    };

    setRefunds(prev => [newRefund, ...prev]);
    setShowAddModal(false);
    triggerToast(`Pengajuan refund ${newId} berhasil ditambahkan.`, 'success');

    // Reset Form
    setFormMerchantId('');
    setFormTxId('');
    setFormCustomer('');
    setFormAmount('');
    setFormReason('');
  };

  // Totals calculations
  const totalVolume = refunds.filter(r => r.status === 'success').reduce((acc, curr) => acc + curr.amount, 0);
  const pendingCount = refunds.filter(r => r.status === 'pending').length;
  const successCount = refunds.filter(r => r.status === 'success').length;
  const rejectedCount = refunds.filter(r => r.status === 'rejected').length;

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

      {/* Header */}
      <div style={{ marginBottom: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, color: TEAL, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>Refund Operations</div>
          <h1 style={{ fontSize: 24, fontWeight: 700, color: '#171919', letterSpacing: '-0.01em', margin: 0 }}>Manajemen Refund QRIS</h1>
          <p style={{ fontSize: 13, color: '#515252', marginTop: 4, marginBottom: 0 }}>Kelola, validasi, dan setujui pengembalian dana transaksi QRIS nasabah berdasarkan permohonan merchant.</p>
        </div>
        <button
          onClick={() => setShowAddModal(true)}
          style={{ background: TEAL, color: '#fff', border: 'none', borderRadius: 8, padding: '10px 18px', fontSize: 13, fontWeight: 700, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6, boxShadow: `0 4px 12px ${TEAL}25`, transition: 'all 150ms' }}
          onMouseEnter={e => e.currentTarget.style.background = '#0041A8'}
          onMouseLeave={e => e.currentTarget.style.background = TEAL}
        >
          <i className="bx bx-plus-circle" style={{ fontSize: 16 }} /> Tambah Refund
        </button>
      </div>

      {/* Stats Summary Cards */}
      <div style={{ display: 'flex', gap: 16, marginBottom: 24, flexWrap: 'wrap' }}>
        {[
          { label: 'Total Volume Refund', value: fmtRp(totalVolume), sub: 'Dana sukses dikembalikan', icon: 'bx-wallet', color: TEAL },
          { label: 'Pengajuan Baru (Pending)', value: pendingCount, sub: 'Butuh pemeriksaan checker', icon: 'bx-time-five', color: pendingCount > 0 ? ORANGE : '#a7a8a8' },
          { label: 'Refund Sukses', value: successCount, sub: 'Pengajuan sukses diotorisasi', icon: 'bx-check-double', color: GREEN },
          { label: 'Refund Ditolak', value: rejectedCount, sub: 'Pengajuan refund ditolak', icon: 'bx-block', color: RED }
        ].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: 20, 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>

      {/* Refund Queue Table */}
      <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(0,0,0,0.02)', overflow: 'hidden' }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid #efefef', background: '#fafafa' }}>
          <h3 style={{ fontSize: 14, fontWeight: 800, color: '#171919', margin: 0 }}>Daftar Pengajuan Pengembalian Dana (Refund)</h3>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13, textAlign: 'left' }}>
          <thead>
            <tr style={{ background: '#fff', borderBottom: '1px solid #efefef' }}>
              <th style={{ padding: '12px 20px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase', width: 140 }}>ID Refund</th>
              <th style={{ padding: '12px 20px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>ID Transaksi</th>
              <th style={{ padding: '12px 20px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Nama Merchant</th>
              <th style={{ padding: '12px 20px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Nama Pelanggan</th>
              <th style={{ padding: '12px 20px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Nominal Refund</th>
              <th style={{ padding: '12px 20px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Waktu Diajukan</th>
              <th style={{ padding: '12px 20px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Status</th>
              <th style={{ padding: '12px 20px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase', textAlign: 'center', width: 220 }}>Aksi</th>
            </tr>
          </thead>
          <tbody>
            {refunds.map(r => {
              const isPending = r.status === 'pending';
              const isSuccess = r.status === 'success';
              const isRejected = r.status === 'rejected';

              return (
                <tr key={r.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 20px', fontFamily: 'monospace', fontWeight: 700, color: TEAL }}>{r.id}</td>
                  <td style={{ padding: '14px 20px', fontFamily: 'monospace', color: '#515252' }}>{r.txId}</td>
                  <td style={{ padding: '14px 20px' }}>
                    <div style={{ fontWeight: 700, color: '#171919' }}>{r.name}</div>
                    <div style={{ fontSize: 11, color: '#a7a8a8', marginTop: 2 }}>{r.mid}</div>
                  </td>
                  <td style={{ padding: '14px 20px', color: '#171919', fontWeight: 600 }}>{r.customer}</td>
                  <td style={{ padding: '14px 20px', fontWeight: 700, color: '#171919' }}>{fmtRp(r.amount)}</td>
                  <td style={{ padding: '14px 20px', color: '#a7a8a8' }}>{fmtDate(r.time)}</td>
                  <td style={{ padding: '14px 20px' }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, background: isSuccess ? 'rgba(116,181,12,0.12)' : (isRejected ? 'rgba(237,49,81,0.1)' : 'rgba(217,146,11,0.12)'), color: isSuccess ? '#74b50c' : (isRejected ? '#ed3151' : '#d9920b'), fontSize: 11, fontWeight: 700, borderRadius: 100, padding: '3px 9px' }}>
                      <i className={`bx ${isSuccess ? 'bx-check-circle' : (isRejected ? 'bx-block' : 'bx-time-five')}`} />
                      {isPending ? 'MENUNGGU' : r.status.toUpperCase()}
                    </span>
                  </td>
                  <td style={{ padding: '14px 20px', textAlign: 'center' }}>
                    <div style={{ display: 'flex', gap: 6, justifyContent: 'center' }}>
                      <button
                        onClick={() => setSelectedRefund(r)}
                        style={{ background: '#fff', border: `1.5px solid #efefef`, borderRadius: 6, padding: '6px 12px', fontSize: 11.5, fontWeight: 750, cursor: 'pointer', transition: 'all 150ms', fontFamily: 'inherit', color: '#515252' }}
                        onMouseEnter={e => { e.currentTarget.style.borderColor = TEAL; e.currentTarget.style.color = TEAL; }}
                        onMouseLeave={e => { e.currentTarget.style.borderColor = '#efefef'; e.currentTarget.style.color = '#515252'; }}
                      >
                        Detail
                      </button>


                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {/* Modal: Refund Detail Breakdown */}
      {selectedRefund && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div onClick={() => setSelectedRefund(null)} style={{ position: 'absolute', inset: 0, background: 'rgba(23,25,25,0.4)', backdropFilter: 'blur(2px)' }} />
          <div style={{ position: 'relative', width: 460, background: '#fff', borderRadius: 14, boxShadow: '0 12px 36px rgba(23,25,25,0.15)', padding: '28px', animation: 'fadeIn 180ms ease' }}>

            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid #efefef', paddingBottom: 16, marginBottom: 20 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <i className="bx bx-receipt" style={{ fontSize: 22, color: TEAL }} />
                <h3 style={{ fontSize: 15, fontWeight: 800, color: '#171919', margin: 0 }}>Detail Pengajuan Refund</h3>
              </div>
              <button onClick={() => setSelectedRefund(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#515252', padding: 4 }}><i className="bx bx-x" style={{ fontSize: 22 }} /></button>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ textAlign: 'center', background: '#fafafa', border: '1px solid #efefef', borderRadius: 10, padding: '16px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <div style={{ fontSize: 11, color: '#a7a8a8', fontWeight: 600, textTransform: 'uppercase', marginBottom: 4 }}>ID Refund</div>
                <div style={{ fontSize: 17, fontWeight: 800, color: '#171919', fontFamily: 'monospace' }}>{selectedRefund.id}</div>
                <div style={{ marginTop: 8 }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, background: selectedRefund.status === 'success' ? 'rgba(116,181,12,0.12)' : (selectedRefund.status === 'rejected' ? 'rgba(237,49,81,0.1)' : 'rgba(217,146,11,0.12)'), color: selectedRefund.status === 'success' ? '#74b50c' : (selectedRefund.status === 'rejected' ? '#ed3151' : '#d9920b'), fontSize: 11, fontWeight: 700, borderRadius: 100, padding: '3px 10px' }}>
                    {selectedRefund.status.toUpperCase()}
                  </span>
                </div>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, borderBottom: '1px solid #efefef', paddingBottom: 16 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                  <span style={{ color: '#a7a8a8' }}>Nama Merchant</span>
                  <strong style={{ color: '#171919', textAlign: 'right' }}>{selectedRefund.name}</strong>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                  <span style={{ color: '#a7a8a8' }}>ID Transaksi (Original)</span>
                  <strong style={{ color: '#171919', fontFamily: 'monospace' }}>{selectedRefund.txId}</strong>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                  <span style={{ color: '#a7a8a8' }}>Nama Pelanggan</span>
                  <strong style={{ color: '#171919' }}>{selectedRefund.customer}</strong>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                  <span style={{ color: '#a7a8a8' }}>Waktu Pengajuan</span>
                  <strong style={{ color: '#171919' }}>{fmtDate(selectedRefund.time)}</strong>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                  <span style={{ color: '#a7a8a8' }}>Nominal Refund</span>
                  <strong style={{ color: TEAL, fontSize: 14 }}>{fmtRp(selectedRefund.amount)}</strong>
                </div>
              </div>

              <div style={{ background: '#f6f6f6', borderRadius: 8, padding: '12px 14px', fontSize: 12.5, lineHeight: 1.4, color: '#515252' }}>
                <strong>Alasan Refund:</strong><br />
                <span style={{ fontStyle: 'italic', display: 'block', marginTop: 4 }}>"{selectedRefund.reason}"</span>
              </div>

              {selectedRefund.status === 'success' && (
                <div style={{ fontSize: 12, color: '#a7a8a8', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span>No. Referensi Refund Bank</span>
                  <strong style={{ fontFamily: 'monospace', color: '#515252' }}>{selectedRefund.refNo}</strong>
                </div>
              )}

              {selectedRefund.status === 'rejected' && (
                <div style={{ background: 'rgba(237,49,81,0.06)', border: `1px solid rgba(237,49,81,0.15)`, borderRadius: 10, padding: '12px', fontSize: 12, color: RED, lineHeight: 1.4 }}>
                  <strong>Alasan Penolakan:</strong> {selectedRefund.rejectReason || 'Dokumen penunjang kurang lengkap.'}
                </div>
              )}
            </div>

            <div style={{ marginTop: 24, display: 'flex', gap: 10 }}>
              <button
                onClick={() => setSelectedRefund(null)}
                style={{ flex: 1, background: '#fff', border: '1.5px solid #efefef', borderRadius: 8, padding: '10px 0', fontSize: 13, fontWeight: 600, color: '#515252', cursor: 'pointer', textAlign: 'center' }}
              >
                Tutup Detail
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Modal: Tambah Refund Modal Form */}
      {showAddModal && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div onClick={() => setShowAddModal(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(23,25,25,0.4)', backdropFilter: 'blur(2px)' }} />
          <div style={{ position: 'relative', width: 440, background: '#fff', borderRadius: 14, boxShadow: '0 12px 36px rgba(23,25,25,0.15)', padding: '24px', animation: 'fadeIn 180ms ease' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid #efefef', paddingBottom: 12, marginBottom: 16 }}>
              <h3 style={{ fontSize: 15, fontWeight: 800, color: '#171919', margin: 0 }}>Tambah Pengajuan Refund QRIS</h3>
              <button onClick={() => setShowAddModal(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#515252', padding: 4 }}><i className="bx bx-x" style={{ fontSize: 20 }} /></button>
            </div>

            <form onSubmit={handleAddRefundSubmit}>
              <div style={{ marginBottom: 12 }}>
                <label style={{ display: 'block', fontSize: 12, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Pilih Merchant</label>
                <select
                  required
                  value={formMerchantId}
                  onChange={e => setFormMerchantId(e.target.value)}
                  style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', background: '#fff', fontFamily: 'inherit' }}
                >
                  <option value="">-- Pilih Merchant --</option>
                  {activeMerchants.map(m => (
                    <option key={m.id} value={m.id}>{m.merchantName} ({m.id})</option>
                  ))}
                </select>
              </div>

              <div style={{ marginBottom: 12 }}>
                <label style={{ display: 'block', fontSize: 12, fontWeight: 700, color: '#515252', marginBottom: 6 }}>ID Transaksi (Original RRN)</label>
                <input
                  type="text"
                  required
                  value={formTxId}
                  onChange={e => setFormTxId(e.target.value)}
                  placeholder="Contoh: TX-260624-9981..."
                  style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none' }}
                  onFocus={e => e.target.style.borderColor = TEAL}
                  onBlur={e => e.target.style.borderColor = '#efefef'}
                />
              </div>

              <div style={{ marginBottom: 12 }}>
                <label style={{ display: 'block', fontSize: 12, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Nama Pelanggan (Customer)</label>
                <input
                  type="text"
                  required
                  value={formCustomer}
                  onChange={e => setFormCustomer(e.target.value)}
                  placeholder="Nama pemegang instrumen bayar..."
                  style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none' }}
                  onFocus={e => e.target.style.borderColor = TEAL}
                  onBlur={e => e.target.style.borderColor = '#efefef'}
                />
              </div>

              <div style={{ marginBottom: 12 }}>
                <label style={{ display: 'block', fontSize: 12, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Nominal Refund</label>
                <div style={{ position: 'relative' }}>
                  <span style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', fontSize: 13, color: '#a7a8a8', fontWeight: 600 }}>Rp</span>
                  <input
                    type="number"
                    required
                    value={formAmount}
                    onChange={e => setFormAmount(e.target.value)}
                    placeholder="Masukkan nominal pengembalian..."
                    style={{ width: '100%', padding: '10px 12px 10px 32px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none' }}
                    onFocus={e => e.target.style.borderColor = TEAL}
                    onBlur={e => e.target.style.borderColor = '#efefef'}
                  />
                </div>
              </div>

              <div style={{ marginBottom: 20 }}>
                <label style={{ display: 'block', fontSize: 12, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Alasan Refund</label>
                <textarea
                  rows="2"
                  required
                  value={formReason}
                  onChange={e => setFormReason(e.target.value)}
                  placeholder="Contoh: Double bayar, Barang kosong, Salah nominal..."
                  style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', resize: 'none', fontFamily: 'inherit' }}
                  onFocus={e => e.target.style.borderColor = TEAL}
                  onBlur={e => e.target.style.borderColor = '#efefef'}
                />
              </div>

              <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
                <button type="button" onClick={() => setShowAddModal(false)} style={{ background: '#fff', border: '1.5px solid #efefef', borderRadius: 8, padding: '9px 16px', fontSize: 13, fontWeight: 600, color: '#515252', cursor: 'pointer' }}>Batal</button>
                <button type="submit" style={{ background: TEAL, color: '#fff', border: 'none', borderRadius: 8, padding: '10px 20px', fontSize: 13, fontWeight: 700, cursor: 'pointer', boxShadow: '0 4px 12px rgba(0,86,210,0.15)' }}>Simpan Pengajuan</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Modal: Form Rejection Reason */}
      {rejectingRefund && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div onClick={() => setRejectingRefund(null)} style={{ position: 'absolute', inset: 0, background: 'rgba(23,25,25,0.4)', backdropFilter: 'blur(2px)' }} />
          <div style={{ position: 'relative', width: 400, background: '#fff', borderRadius: 14, boxShadow: '0 12px 36px rgba(23,25,25,0.15)', padding: '24px', animation: 'fadeIn 180ms ease' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid #efefef', paddingBottom: 12, marginBottom: 16 }}>
              <h3 style={{ fontSize: 15, fontWeight: 800, color: '#171919', margin: 0 }}>Alasan Penolakan Refund</h3>
              <button onClick={() => setRejectingRefund(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#515252', padding: 4 }}><i className="bx bx-x" style={{ fontSize: 20 }} /></button>
            </div>

            <form onSubmit={handleRejectRefundSubmit}>
              <div style={{ marginBottom: 20 }}>
                <label style={{ display: 'block', fontSize: 12, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Alasan Penolakan (Wajib)</label>
                <textarea
                  rows="3"
                  required
                  value={rejectReasonInput}
                  onChange={e => setRejectReasonInput(e.target.value)}
                  placeholder="Masukkan alasan audit menolak refund..."
                  style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', resize: 'none', fontFamily: 'inherit' }}
                  onFocus={e => e.target.style.borderColor = TEAL}
                  onBlur={e => e.target.style.borderColor = '#efefef'}
                />
              </div>

              <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
                <button type="button" onClick={() => setRejectingRefund(null)} style={{ background: '#fff', border: '1.5px solid #efefef', borderRadius: 8, padding: '9px 16px', fontSize: 13, fontWeight: 600, color: '#515252', cursor: 'pointer' }}>Batal</button>
                <button type="submit" disabled={!rejectReasonInput.trim()} style={{ background: rejectReasonInput.trim() ? RED : '#fcd5dc', color: '#fff', border: 'none', borderRadius: 8, padding: '10px 20px', fontSize: 13, fontWeight: 700, cursor: rejectReasonInput.trim() ? 'pointer' : 'not-allowed', boxShadow: rejectReasonInput.trim() ? '0 4px 12px rgba(237,49,81,0.15)' : 'none' }}>Tolak Refund</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Toast notifications */}
      {toast && (
        <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-check-shield" style={{ fontSize: 20 }} />
          <span style={{ fontSize: 13.5, fontWeight: 750 }}>{toast.msg}</span>
        </div>
      )}

    </div>
  );
}

Object.assign(window, { RefundPage });
