// dashboard.jsx — hibank Design System tokens
function DashboardPage({ onLogout, onNavigate, pendingApproval = 0, primary, secondary, sidebarColor, role = 'super', user, activeNav: propActiveNav, setActiveNav: propSetActiveNav, merchants, setMerchants }) {
  const [localActiveNav, setLocalActiveNav] = React.useState('dashboard');
  const activeNav = propActiveNav !== undefined ? propActiveNav : localActiveNav;
  const setActiveNav = propSetActiveNav !== undefined ? propSetActiveNav : setLocalActiveNav;
  const [sidebarOpen, setSidebarOpen] = React.useState(true);

  const TEAL = primary || '#0056D2';
  const ORANGE = secondary || '#cf5a27';
  const U = user || { name: 'Arief Budiman', roleLabel: 'Super Admin', initials: 'AB', greeting: 'Arief' };
  const isMerchant = role === 'merchant';

  const stats = isMerchant ? [
    { label: 'Total Pendapatan', value: 'Rp 45.280.000', sub: 'vs bulan lalu', change: '+8.4%', up: true, icon: 'bx-money' },
    { label: 'Transaksi QRIS', value: '342 Transaksi', sub: 'April 2026', change: '+12.1%', up: true, icon: 'bx-qr-scan' },
    { label: 'Rata-rata Transaksi', value: 'Rp 132.397', sub: 'keranjang belanja', change: '-1.5%', up: false, icon: 'bx-calculator' },
    { label: 'Dana Dicairkan', value: 'Rp 42.850.000', sub: 'settled ke bank', change: '+5.6%', up: true, icon: 'bx-wallet' },
  ] : [
    { label: 'Total Nasabah', value: '1.284.392', sub: 'vs bulan lalu', change: '+4.2%', up: true, icon: 'bx-user' },
    { label: 'Volume Transaksi', value: 'Rp 8,4T', sub: 'April 2026', change: '+12.7%', up: true, icon: 'bx-transfer' },
    { label: 'Kartu Aktif', value: '842.711', sub: 'diterbitkan', change: '+1.9%', up: true, icon: 'bx-credit-card' },
    { label: 'Klaim Pending', value: '2.847', sub: 'menunggu review', change: '-8.3%', up: false, icon: 'bx-error-circle' },
  ];

  const txns = isMerchant ? [
    { id: 'TRX-8831', name: 'Kopi Senja (QRIS)', type: 'QRIS Dinamis', amount: '+Rp 45.000', time: '10:32', status: 'success' },
    { id: 'TRX-8830', name: 'Budi Santoso', type: 'QRIS Statis', amount: '+Rp 150.000', time: '10:18', status: 'success' },
    { id: 'TRX-8829', name: 'Siti Rahayu', type: 'QRIS Dinamis', amount: '+Rp 85.000', time: '09:55', status: 'success' },
    { id: 'TRX-8828', name: 'Rangga Pratama', type: 'QRIS Statis', amount: '+Rp 25.000', time: '09:41', status: 'success' },
    { id: 'TRX-8827', name: 'Dewi Lestari', type: 'QRIS Dinamis', amount: '+Rp 110.000', time: '09:20', status: 'success' },
    { id: 'TRX-8826', name: 'Pencairan Settlement', type: 'Transfer Out', amount: '-Rp 12.500.000', time: '09:05', status: 'success' },
  ] : [
    { id: 'TRX-0041', name: 'Budi Santoso', type: 'Transfer', amount: '+Rp 12.500.000', time: '10:32', status: 'success' },
    { id: 'TRX-0040', name: 'Siti Rahayu', type: 'Penarikan', amount: '-Rp 5.000.000', time: '10:18', status: 'success' },
    { id: 'TRX-0039', name: 'PT Maju Jaya', type: 'Pembayaran', amount: '+Rp 287.000.000', time: '09:55', status: 'success' },
    { id: 'TRX-0038', name: 'Andi Wijaya', type: 'Cicilan', amount: '-Rp 3.200.000', time: '09:41', status: 'pending' },
    { id: 'TRX-0037', name: 'Dewi Lestari', type: 'Transfer', amount: '+Rp 750.000', time: '09:20', status: 'failed' },
    { id: 'TRX-0036', name: 'CV Sejahtera', type: 'Pembayaran', amount: '+Rp 45.600.000', time: '09:05', status: 'success' },
  ];

  const barData = isMerchant
    ? [12, 18, 15, 24, 22, 32, 28, 35, 30, 42, 38, 45]
    : [52, 68, 55, 80, 72, 90, 68, 95, 74, 88, 78, 100];
  const barLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agt', 'Sep', 'Okt', 'Nov', 'Des'];

  const breakdown = isMerchant ? [
    { label: 'QRIS Dinamis', pct: 58, color: TEAL },
    { label: 'QRIS Statis', pct: 32, color: '#0041A8' },
    { label: 'QRIS CPM', pct: 10, color: ORANGE },
  ] : [
    { label: 'Transfer', pct: 42, color: TEAL },
    { label: 'Pembayaran', pct: 28, color: '#0041A8' },
    { label: 'Penarikan', pct: 18, color: ORANGE },
    { label: 'Lainnya', pct: 12, color: '#efefef' },
  ];

  const activities = isMerchant ? [
    { text: 'Pencairan dana berhasil ditransfer', sub: 'Ke Bank Mandiri a/n Rangga · 10 mnt lalu', dot: '#74b50c' },
    { text: 'Transaksi QRIS baru diterima', sub: 'Nominal Rp 45.000 · 15 mnt lalu', dot: TEAL },
    { text: 'Update konfigurasi MDR merchant', sub: 'MDR diset 0.50% oleh Checker · 1 jam lalu', dot: ORANGE },
    { text: 'Audit kelayakan merchant', sub: 'Status: APPROVED · 2 jam lalu', dot: '#ed3151' },
  ] : [
    { text: 'Nasabah baru terverifikasi', sub: 'Reza Firmansyah · 2 mnt lalu', dot: '#74b50c' },
    { text: 'Limit kartu diperbarui', sub: 'Rina Marlina · 8 mnt lalu', dot: TEAL },
    { text: 'Pengajuan pinjaman diterima', sub: 'PT Karya Nusa · 15 mnt lalu', dot: ORANGE },
    { text: 'Transaksi mencurigakan', sub: 'ID: TRX-0041 · 24 mnt lalu', dot: '#ed3151' },
  ];

  const systemStatus = isMerchant ? [
    { label: 'QRIS Engine', ok: true },
    { label: 'Merchant App API', ok: true },
    { label: 'Settlement Engine', ok: true },
  ] : [
    { label: 'Core Banking', ok: true },
    { label: 'API Gateway', ok: true },
    { label: 'Fraud Detection', ok: false },
  ];

  return (
    <div style={{ display: 'flex', height: '100vh', overflow: 'hidden', fontFamily: "'Open Sans', sans-serif" }}>
      <Sidebar activeNav={activeNav} setActiveNav={(id) => {
        if (id === 'approval' || id === 'onboarding_monitor' || id === 'onboarding_portal' || id === 'merchant_management' || id === 'dashboard') {
          onNavigate(id);
        } else {
          setActiveNav(id);
        }
      }} sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} onLogout={onLogout} pendingApproval={pendingApproval} primary={TEAL} secondary={ORANGE} sidebarBg={sidebarColor} role={role} user={user} />

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', background: '#f6f6f6' }}>

        {/* ── TOPBAR ── */}
        <div style={{ height: 64, background: '#fff', borderBottom: '1px solid #efefef', display: 'flex', alignItems: 'center', padding: '0 28px', gap: 16, flexShrink: 0, boxShadow: '0 1px 2px rgba(23,25,25,0.04)' }}>
          <button onClick={() => setSidebarOpen(!sidebarOpen)} style={{ background: '#f6f6f6', border: '1px solid #efefef', borderRadius: 8, width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: '#515252' }}>
            <i className="bx bx-menu" style={{ fontSize: 20 }} />
          </button>

          {/* Search */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: '#f6f6f6', border: '1px solid #efefef', borderRadius: 8, padding: '8px 14px', width: 300 }}>
            <i className="bx bx-search" style={{ fontSize: 16, color: '#a7a8a8' }} />
            <input placeholder="Cari nasabah, transaksi, ID..." style={{ border: 'none', background: 'none', outline: 'none', fontSize: 13, color: '#171919', fontFamily: "'Open Sans', sans-serif", flex: 1 }} />
          </div>

          <div style={{ flex: 1 }} />

          <span style={{ fontSize: 13, color: '#a7a8a8' }}>
            {new Date().toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}
          </span>

          {/* Bell */}
          <div style={{ position: 'relative' }}>
            <button style={{ background: '#f6f6f6', border: '1px solid #efefef', borderRadius: 8, width: 38, height: 38, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: '#515252' }}>
              <i className="bx bx-bell" style={{ fontSize: 20 }} />
            </button>
            <div style={{ position: 'absolute', top: 8, right: 8, width: 8, height: 8, borderRadius: '50%', background: '#ed3151', border: '2px solid #fff' }} />
          </div>

          {/* Avatar */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: `linear-gradient(135deg, ${TEAL}, #0041A8)`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <span style={{ color: '#fff', fontWeight: 700, fontSize: 13 }}>{U.initials}</span>
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: '#171919' }}>{U.name}</div>
              <div style={{ fontSize: 11, color: '#a7a8a8' }}>{U.roleLabel}</div>
            </div>
          </div>
        </div>

        {/* ── CONTENT ── */}
        <div style={{ flex: 1, overflowY: 'auto', padding: activeNav === 'dashboard' ? '28px 32px 56px' : '0' }}>
          {activeNav === 'dashboard' ? (
            <>
              {/* Page header */}
              <div style={{ marginBottom: 24, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16 }}>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 600, color: TEAL, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>Dashboard</div>
                  <h1 style={{ fontSize: 24, fontWeight: 700, color: '#171919', letterSpacing: '-0.01em', margin: 0 }}>
                    {isMerchant ? `Selamat pagi, Toko Kopi Senja (${U.greeting}) 🏪` : `Selamat pagi, ${U.greeting} 👋`}
                  </h1>
                  <p style={{ fontSize: 14, color: '#515252', marginTop: 4, marginBottom: 0 }}>
                    {isMerchant ? 'Berikut ringkasan performa penjualan dan operasional merchant Anda hari ini.' : 'Berikut ringkasan operasional per hari ini.'}
                  </p>
                </div>
              </div>

              {/* STAT CARDS */}
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginBottom: 24 }}>
                {stats.map((s, i) => <StatCard key={i} {...s} primary={TEAL} />)}
              </div>

              {/* CHARTS ROW */}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 296px', gap: 20, marginBottom: 20 }}>

                {/* Bar chart */}
                <div style={{ background: '#fff', borderRadius: 15, padding: '24px', boxShadow: '0 2px 8px rgba(23,25,25,0.06)', border: '1px solid #efefef' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
                    <div>
                      <div style={{ fontSize: 15, fontWeight: 700, color: '#171919' }}>Volume Transaksi</div>
                      <div style={{ fontSize: 12, color: '#a7a8a8', marginTop: 2 }}>
                        {isMerchant ? 'Per bulan — dalam juta Rp' : 'Per bulan — dalam miliar Rp'}
                      </div>
                    </div>
                    <div style={{ background: '#f6f6f6', border: '1px solid #efefef', borderRadius: 100, padding: '4px 14px', fontSize: 12, color: '#515252', fontWeight: 600 }}>2026</div>
                  </div>
                  <BarChart data={barData} labels={barLabels} color={TEAL} />
                </div>

                {/* Breakdown */}
                <div style={{ background: '#fff', borderRadius: 15, padding: '24px', boxShadow: '0 2px 8px rgba(23,25,25,0.06)', border: '1px solid #efefef' }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: '#171919', marginBottom: 4 }}>Komposisi Transaksi</div>
                  <div style={{ fontSize: 12, color: '#a7a8a8', marginBottom: 20 }}>Berdasarkan jenis</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                    {breakdown.map((b, i) => (
                      <div key={i}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                          <span style={{ fontSize: 13, color: '#515252' }}>{b.label}</span>
                          <span style={{ fontSize: 13, fontWeight: 700, color: '#171919' }}>{b.pct}%</span>
                        </div>
                        <div style={{ height: 6, borderRadius: 100, background: '#efefef', overflow: 'hidden' }}>
                          <div style={{ height: '100%', borderRadius: 100, background: b.color, width: `${b.pct}%`, transition: 'width .6s cubic-bezier(0.22,0.61,0.36,1)' }} />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* BOTTOM ROW */}
              <div style={{ display: 'grid', gridTemplateColumns: isMerchant ? '1fr' : '1fr 276px', gap: 20 }}>

                {/* Transactions */}
                <div style={{ background: '#fff', borderRadius: 15, padding: '24px', boxShadow: '0 2px 8px rgba(23,25,25,0.06)', border: '1px solid #efefef' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
                    <div style={{ fontSize: 15, fontWeight: 700, color: '#171919' }}>Transaksi Terbaru</div>
                    <button style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: 13, color: TEAL, fontWeight: 600, fontFamily: "'Open Sans', sans-serif", display: 'flex', alignItems: 'center', gap: 4 }}>
                      Lihat semua <i className="bx bx-chevron-right" />
                    </button>
                  </div>
                  {txns.map((t, i) => <TxRow key={i} {...t} primary={TEAL} />)}
                </div>

                {!isMerchant && (
                  /* Activity + System */
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

                    {/* Activity log */}
                    <div style={{ background: '#fff', borderRadius: 15, padding: '22px', boxShadow: '0 2px 8px rgba(23,25,25,0.06)', border: '1px solid #efefef', flex: 1 }}>
                      <div style={{ fontSize: 15, fontWeight: 700, color: '#171919', marginBottom: 16 }}>Aktivitas Sistem</div>
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                        {activities.map((a, i) => (
                          <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                            <div style={{ width: 7, height: 7, borderRadius: '50%', background: a.dot, marginTop: 5, flexShrink: 0 }} />
                            <div>
                              <div style={{ fontSize: 13, fontWeight: 600, color: '#171919', lineHeight: 1.4 }}>{a.text}</div>
                              <div style={{ fontSize: 11, color: '#a7a8a8', marginTop: 2 }}>{a.sub}</div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>

                    {/* System status */}
                    <div style={{ background: '#001F5B', borderRadius: 15, padding: '20px 22px', boxShadow: '0 2px 8px rgba(0,50,56,0.18)' }}>
                      <div style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginBottom: 14, display: 'flex', alignItems: 'center', gap: 8 }}>
                        <i className="bx bx-shield-alt-2" style={{ color: TEAL, fontSize: 16 }} />
                        Status Sistem
                      </div>
                      {systemStatus.map(({ label, ok }) => (
                        <div key={label} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                          <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>{label}</span>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                            <div style={{ width: 6, height: 6, borderRadius: '50%', background: ok ? '#74b50c' : '#fbd330' }} />
                            <span style={{ fontSize: 11, fontWeight: 600, color: ok ? '#74b50c' : '#fbd330' }}>{ok ? 'Online' : 'Warning'}</span>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </>
          ) : activeNav === 'merchant_business' ? (
            <MerchantBusinessPage
              merchants={merchants}
              setMerchants={setMerchants}
              primary={TEAL}
              secondary={ORANGE}
            />
          ) : activeNav === 'transaction_monitor' ? (
            <TransactionMonitorPage
              merchants={merchants}
              primary={TEAL}
              secondary={ORANGE}
            />
          ) : activeNav === '4eyes_checker' ? (
            <CheckerPage
              merchants={merchants}
              setMerchants={setMerchants}
              primary={TEAL}
              secondary={ORANGE}
            />
          ) : activeNav === 'recon_settlement' ? (
            <ReconSettlementPage
              merchants={merchants}
              primary={TEAL}
              secondary={ORANGE}
              merchantView={isMerchant}
            />
          ) : activeNav === 'disbursement' ? (
            <DisbursementPage
              merchants={merchants}
              primary={TEAL}
              secondary={ORANGE}
              merchantView={isMerchant}
            />
          ) : activeNav === 'refund' ? (
            <RefundPage
              merchants={merchants}
              primary={TEAL}
              secondary={ORANGE}
            />
          ) : (activeNav === 'refund_request' || activeNav === 'refund_management') ? (
            <RefundRequestPage
              merchants={merchants}
              primary={TEAL}
              secondary={ORANGE}
            />
          ) : activeNav === 'refund_monitor' ? (
            <RefundMonitorPage
              merchants={merchants}
              primary={TEAL}
              secondary={ORANGE}
            />
          ) : activeNav === 'fds_dashboard' ? (
            <FdsDashboardPage
              merchants={merchants}
              primary={TEAL}
              secondary={ORANGE}
            />
          ) : activeNav === 'fds_monitoring' ? (
            <FdsMonitoringPage
              merchants={merchants}
              primary={TEAL}
              secondary={ORANGE}
            />
          ) : activeNav === 'fds_parameter' ? (
            <FdsParameterPage
              merchants={merchants}
              primary={TEAL}
              secondary={ORANGE}
            />
          ) : activeNav === 'fds_suspect' ? (
            <FdsSuspectPage
              merchants={merchants}
              primary={TEAL}
              secondary={ORANGE}
            />
          ) : activeNav === 'report_generator' ? (
            <ReportGeneratorPage
              merchants={merchants}
              primary={TEAL}
              secondary={ORANGE}
              role={role}
              user={user}
            />
          ) : (
            (() => {
              const navTitle = {
                onboarding_portal: 'Onboarding Portal',
                merchant_management: 'Merchant Management',
                merchant_business: 'Merchant Business',
                transaction_monitor: 'Transaction Monitor',
                '4eyes_checker': 'Checker (4 Eyes)',
                recon_settlement: 'Recon & Settlement',
                disbursement: 'Disbursement',
                refund: 'Refund',
                fds_dashboard: 'FDS Dashboard',
                fds_monitoring: 'Monitoring FDS',
                fds_parameter: 'Parameter FDS',
                fds_suspect: 'Suspect Management',
                refund_request: 'Refund Request',
                refund_monitor: 'Refund Monitor'
              }[activeNav] || 'Halaman';
              return (
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: 'calc(100vh - 120px)', textAlign: 'center', padding: '40px 20px' }}>
                  <div style={{ width: 80, height: 80, borderRadius: '50%', background: `${TEAL}10`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
                    <i className="bx bx-cog bx-spin" style={{ fontSize: 40, color: TEAL }} />
                  </div>
                  <h2 style={{ fontSize: 22, fontWeight: 700, color: '#171919', marginBottom: 8 }}>{navTitle}</h2>
                  <p style={{ fontSize: 14, color: '#515252', maxWidth: 480, margin: '0 auto 24px', lineHeight: 1.6 }}>
                    Halaman <strong>{navTitle}</strong> saat ini sedang dalam tahap pengembangan oleh tim IT hibank. Silakan kembali nanti.
                  </p>
                  <button onClick={() => setActiveNav('dashboard')} style={{ background: TEAL, color: '#fff', border: 'none', borderRadius: 8, padding: '10px 20px', fontSize: 13, fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8, boxShadow: `0 4px 12px ${TEAL}25` }}>
                    <i className="bx bx-arrow-back" /> Kembali ke Dashboard
                  </button>
                </div>
              );
            })()
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DashboardPage });