// merchant-business.jsx — Merchant Business page for Hibank QRIS BackOffice
function MerchantBusinessPage({ merchants, setMerchants, primary, secondary }) {
  const TEAL = primary || '#0056D2';
  const ORANGE = secondary || '#cf5a27';

  // ── Shared Style Objects ──
  const primaryBtn = { background: TEAL, color: '#fff', border: 'none', borderRadius: 6, padding: '6px 12px', fontSize: 11.5, fontWeight: 700, cursor: 'pointer', marginTop: 10, display: 'inline-flex', alignItems: 'center', gap: 4, fontFamily: 'inherit' };
  const secondaryBtn = { background: '#f6f6f6', color: '#515252', border: 'none', borderRadius: 6, padding: '6px 12px', fontSize: 11.5, fontWeight: 600, cursor: 'pointer', marginTop: 10, display: 'inline-flex', alignItems: 'center', gap: 4, fontFamily: 'inherit' };
  const labelStyle = { fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6, display: 'block' };
  const inputStyle = { padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', fontFamily: 'inherit', marginBottom: 12, width: '100%', boxSizing: 'border-box' };
  const thStyle = { padding: '10px 12px', fontSize: 12, fontWeight: 700, color: '#515252', textAlign: 'left' };
  const tdStyle = { padding: '10px 12px', fontSize: 13, color: '#171919' };
  const actionBtn = { background: TEAL, color: '#fff', border: 'none', borderRadius: 5, padding: '4px 10px', fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', marginRight: 6 };
  const deleteBtn = { background: '#ed3151', color: '#fff', border: 'none', borderRadius: 5, padding: '4px 10px', fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' };
  const modalOverlay = { position: 'fixed', inset: 0, zIndex: 1500, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(23,25,25,0.4)', backdropFilter: 'blur(3px)', animation: 'fadeIn 150ms ease' };
  const modalContent = { background: '#fff', borderRadius: 12, padding: 24, width: 380, maxWidth: '90%', boxShadow: '0 20px 40px rgba(0,0,0,0.15)', display: 'flex', flexDirection: 'column', animation: 'slideUp 250ms cubic-bezier(0.22, 0.68, 0, 1.1)' };

  // Find approved merchants
  const approvedMerchants = merchants.filter(m => m.status === 'approved');

  // Selected merchant state (default to first approved merchant or empty if none)
  const [selectedMid, setSelectedMid] = React.useState(
    approvedMerchants.length > 0 ? approvedMerchants[0].id : ''
  );

  const activeMerchant = merchants.find(m => m.id === selectedMid);

  // Tab State
  const [activeTab, setActiveTab] = React.useState('rules'); // 'rules' | 'integration' | 'stores'

  // Modal States
  const [showingAddForm, setShowingAddForm] = React.useState(false);
  const [showingEditForm, setShowingEditForm] = React.useState(false);
  const [showingAddStoreForm, setShowingAddStoreForm] = React.useState(false);
  const [showingEditStoreForm, setShowingEditStoreForm] = React.useState(false);
  const [showEditPosModal, setShowEditPosModal] = React.useState(false);
  const [showRevokePosModal, setShowRevokePosModal] = React.useState(false);
  const [showAssignModal, setShowAssignModal] = React.useState(false);
  const [showingDetailForm, setShowingDetailForm] = React.useState(false);

  // Store Fields
  const [storeName, setStoreName] = React.useState('');
  const [storeAddress, setStoreAddress] = React.useState('');
  const [storeStatus, setStoreStatus] = React.useState('active');

  // Form Fields
  const [posName, setPosName] = React.useState('');
  const [merchantPublicKey, setMerchantPublicKey] = React.useState('');
  const [merchantCallbackUrl, setMerchantCallbackUrl] = React.useState('');
  const [tempClientId, setTempClientId] = React.useState('');
  const [tempClientSecret, setTempClientSecret] = React.useState('');
  const [tempHibankPublicKey] = React.useState('pk_hibank_qris_mgmt_live_2026_06_25_9f8d7c6b5a4f3e2d1c0b');
  const [targetPos, setTargetPos] = React.useState(null);
  const [targetStore, setTargetStore] = React.useState(null);
  const [selectedPosIds, setSelectedPosIds] = React.useState([]);

  // Product Management state
  const [showAddProductModal, setShowAddProductModal] = React.useState(false);
  const [showEditProductModal, setShowEditProductModal] = React.useState(false);
  const [showDeleteProductModal, setShowDeleteProductModal] = React.useState(false);
  const [targetProduct, setTargetProduct] = React.useState(null);
  const [prodName, setProdName] = React.useState('');
  const [prodSku, setProdSku] = React.useState('');
  const [prodCategory, setProdCategory] = React.useState('Minuman');
  const [prodPrice, setProdPrice] = React.useState('');
  const [prodStock, setProdStock] = React.useState('');
  const [prodSearch, setProdSearch] = React.useState('');

  // User Management state
  // User Management state - start with empty list, will be populated by sample effect
  const [userList, setUserList] = React.useState([]);

  const [showAddUserForm, setShowAddUserForm] = React.useState(false);
  const [showEditUserForm, setShowEditUserForm] = React.useState(false);
  const [targetUser, setTargetUser] = React.useState(null);
  const [newUsername, setNewUsername] = React.useState('');
  const [newRole, setNewRole] = React.useState('operator');
  const [newEmail, setNewEmail] = React.useState('');
  const [newPhone, setNewPhone] = React.useState('');

  // Copy states
  // Load sample users if none exist
  React.useEffect(() => {
    if (userList.length === 0) {
      const sampleUsers = [
        { id: 'USR-001', username: 'john.doe', role: 'admin', email: 'john.doe@example.com', phone: '081234567890' },
        { id: 'USR-002', username: 'jane.smith', role: 'operator', email: 'jane.smith@example.com', phone: '082345678901' },
        { id: 'USR-003', username: 'alice.wonder', role: 'operator', email: 'alice.wonder@example.com', phone: '083456789012' },
        { id: 'USR-004', username: 'bob.builder', role: 'admin', email: 'bob.builder@example.com', phone: '084567890123' }
      ];
      setUserList(sampleUsers);
    }
  }, []);
  const [copiedKey, setCopiedKey] = React.useState(null);

  // Activation simulation states
  const [activationCode, setActivationCode] = React.useState(null);
  const [showActivationMessage, setShowActivationMessage] = React.useState(false);

  // Helper: Copy to clipboard
  const handleCopy = (text, fieldId) => {
    navigator.clipboard.writeText(text);
    setCopiedKey(fieldId);
    setTimeout(() => setCopiedKey(null), 1500);
  };

  if (!activeMerchant) {
    return (
      <div style={{ padding: '32px', textAlign: 'center', background: '#fff', borderRadius: 12 }}>
        <i className="bx bx-info-circle" style={{ fontSize: 40, color: '#a7a8a8', marginBottom: 12 }} />
        <h3 style={{ margin: 0, fontSize: 16, color: '#171919' }}>Tidak ada merchant aktif</h3>
        <p style={{ color: '#515252', fontSize: 13, marginTop: 4 }}>Aktifkan merchant terlebih dahulu di menu Approval.</p>
      </div>
    );
  }

  // Ensure posList is initialized
  const posList = activeMerchant.posList || [
    { id: 'POS-001', name: 'POS WEB LITE', status: 'inactive', clientId: `cid_pos_${activeMerchant.id.toLowerCase().replace(/[^a-z0-9]/g, '')}_002`, publicKey: `pk_live_pos_${activeMerchant.id.toLowerCase().replace(/[^a-z0-9]/g, '')}_002_4b5c2a` },
    { id: 'POS-003', name: 'Kasir Utama (Lantai 1)', status: 'inactive', clientId: `cid_pos_${activeMerchant.id.toLowerCase().replace(/[^a-z0-9]/g, '')}_003`, publicKey: `pk_live_pos_${activeMerchant.id.toLowerCase().replace(/[^a-z0-9]/g, '')}_003_1f9e2d` }
  ];

  // Ensure storeList is initialized
  const storeList = activeMerchant.storeList || [
    { id: `STR-${activeMerchant.id.replace('MRC-', '')}-01`, name: 'Cabang Utama Pekalongan', address: 'Jl. Hayam Wuruk No. 21, Pekalongan', assignedPos: ['POS-001'], status: 'active' },
    { id: `STR-${activeMerchant.id.replace('MRC-', '')}-02`, name: 'Store Outlet Mall Kota', address: 'Grand Mall Lantai Dasar, Jakarta', assignedPos: ['POS-002'], status: 'active' },
    { id: `STR-${activeMerchant.id.replace('MRC-', '')}-03`, name: 'Flagship Store Heritage', address: 'Jl. Pemuda No. 45, Semarang', assignedPos: ['POS-003'], status: 'inactive' }
  ];

  // Ensure productList is initialized
  const productList = activeMerchant.productList || [
    { id: 'PRD-001', name: 'Kopi Susu Gula Aren', sku: 'KSGA-01', category: 'Minuman', price: 22000, stock: 120, status: 'active' },
    { id: 'PRD-002', name: 'Americano Hot/Ice', sku: 'AMR-01', category: 'Minuman', price: 18000, stock: 80, status: 'active' },
    { id: 'PRD-003', name: 'Croissant Butter', sku: 'CRB-01', category: 'Makanan', price: 25000, stock: 40, status: 'active' },
    { id: 'PRD-004', name: 'Nasi Goreng Spesial', sku: 'NGS-01', category: 'Makanan', price: 35000, stock: 0, status: 'inactive' },
    { id: 'PRD-005', name: 'Tote Bag Merchandise', sku: 'TTB-01', category: 'Merchandise', price: 75000, stock: 15, status: 'active' }
  ];

  const fmtRpProd = (v) => 'Rp ' + Number(v || 0).toLocaleString('id-ID');

  // Business Rules (View Only)
  const businessRules = [
    { id: 'RULE-001', parameter: 'Limit Minimum Transaksi QRIS', value: 'Rp 10.000', category: 'Limit Transaksi', desc: 'Batas minimal per transaksi QRIS' },
    { id: 'RULE-002', parameter: 'Limit Maksimum Transaksi QRIS', value: 'Rp 10.000.000', category: 'Limit Transaksi', desc: 'Batas maksimal per transaksi QRIS standar Bank Indonesia' },
    { id: 'RULE-003', parameter: 'Merchant Discount Rate (MDR) Fee', value: '0.70% (Regular)', category: 'Biaya Layanan', desc: 'Tarif MDR yang dikenakan ke merchant' },
    { id: 'RULE-004', parameter: 'Siklus Settlement Merchant', value: 'H+1 Hari Kerja', category: 'Operasional', desc: 'Siklus transfer dana penjualan ke rekening merchant' },
    { id: 'RULE-005', parameter: 'Batas Minimum Settlement Dana', value: 'Rp 50.000', category: 'Operasional', desc: 'Batas minimum saldo mengendap untuk proses pencairan dana' },
    { id: 'RULE-006', parameter: 'Toleransi Pembatalan / Refund', value: 'Maksimum 24 Jam', category: 'Refund', desc: 'Jendela waktu pengajuan refund transaksi sukses' }
  ];

  // Generate preview values when showingAddForm is opened
  React.useEffect(() => {
    if (showingAddForm && activeMerchant) {
      const nextSeq = posList.length + 1;
      const midClean = activeMerchant.id.toLowerCase().replace(/[^a-z0-9]/g, '');
      const cid = `cid_pos_${midClean}_${String(nextSeq).padStart(3, '0')}`;
      const randomHex = Math.random().toString(36).slice(2, 8);
      const secret = `cs_live_pos_${midClean}_${String(nextSeq).padStart(3, '0')}_${randomHex}${Math.random().toString(36).slice(2, 6)}`;
      setTempClientId(cid);
      setTempClientSecret(secret);
      setMerchantPublicKey('');
      setMerchantCallbackUrl('');
    }
  }, [showingAddForm, activeMerchant, posList.length]);

  // State Updater Helper
  const updateMerchantData = (updates) => {
    setMerchants(prev => prev.map(m => {
      if (m.id !== activeMerchant.id) return m;
      return {
        ...m,
        ...updates
      };
    }));
  };

  // Add POS action
  const handleAddPos = () => {
    if (!posName.trim()) {
      alert('Nama POS / Kasir harus diisi!');
      return;
    }
    if (!merchantPublicKey.trim()) {
      alert('Public Key Merchant harus diisi!');
      return;
    }
    if (!merchantCallbackUrl.trim()) {
      alert('Callback URL Merchant harus diisi!');
      return;
    }

    const nextSeq = posList.length + 1;
    const posId = `POS-${String(nextSeq).padStart(3, '0')}`;
    const randomHex = Math.random().toString(36).slice(2, 8);
    const generatedPublicKey = `pk_live_pos_${activeMerchant.id.toLowerCase().replace(/[^a-z0-9]/g, '')}_${String(nextSeq).padStart(3, '0')}_${randomHex}`;

    const newPos = {
      id: posId,
      name: posName.trim(),
      status: 'active',
      clientId: tempClientId,
      clientSecret: tempClientSecret,
      publicKey: generatedPublicKey,
      merchantPublicKey: merchantPublicKey.trim(),
      callbackUrl: merchantCallbackUrl.trim()
    };

    updateMerchantData({
      posList: [...posList, newPos]
    });

    setPosName('');
    setMerchantPublicKey('');
    setMerchantCallbackUrl('');
    setShowingAddForm(false);
  };

  // Edit POS action
  const handleEditPos = () => {
    if (!posName.trim() || !targetPos) return;
    updateMerchantData({
      posList: posList.map(p => p.id === targetPos.id ? { ...p, name: posName.trim() } : p)
    });
    setPosName('');
    setTargetPos(null);
    setShowEditPosModal(false);
  };

  // Revoke POS action
  const handleRevokePos = () => {
    if (!targetPos) return;
    updateMerchantData({
      posList: posList.map(p => p.id === targetPos.id ? { ...p, status: 'revoked' } : p)
    });
    setTargetPos(null);
    setShowRevokePosModal(false);
  };

  // Activate POS Web Lite simulation
  const handleActivatePos = (posId) => {
    const code = Math.floor(100000 + Math.random() * 900000).toString();
    setActivationCode(code);
    setShowActivationMessage(true);

    // Update targetPos locally so details modal updates dynamically
    setTargetPos(prev => prev ? { ...prev, status: 'active' } : null);

    // Update in parent state
    updateMerchantData({
      posList: posList.map(p => p.id === posId ? { ...p, status: 'active' } : p)
    });
  };

  // Assign POS to Store action
  const handleAssignPos = () => {
    if (!targetStore) return;
    updateMerchantData({
      storeList: storeList.map(s => s.id === targetStore.id ? { ...s, assignedPos: selectedPosIds } : s)
    });
    setTargetStore(null);
    setShowAssignModal(false);
  };

  // Add Store action
  const handleAddStore = () => {
    if (!storeName.trim()) {
      alert('Nama Store / Outlet harus diisi!');
      return;
    }
    if (!storeAddress.trim()) {
      alert('Alamat Store / Outlet harus diisi!');
      return;
    }

    const nextSeq = storeList.length + 1;
    const storeId = `STR-${activeMerchant.id.replace('MRC-', '')}-${String(nextSeq).padStart(2, '0')}`;

    const newStore = {
      id: storeId,
      name: storeName.trim(),
      address: storeAddress.trim(),
      assignedPos: selectedPosIds,
      status: storeStatus
    };

    updateMerchantData({
      storeList: [...storeList, newStore]
    });

    setStoreName('');
    setStoreAddress('');
    setStoreStatus('active');
    setSelectedPosIds([]);
    setShowingAddStoreForm(false);
  };

  // Edit Store action
  const handleEditStore = () => {
    if (!storeName.trim() || !targetStore) return;
    updateMerchantData({
      storeList: storeList.map(s => s.id === targetStore.id ? {
        ...s,
        name: storeName.trim(),
        address: storeAddress.trim(),
        assignedPos: selectedPosIds,
        status: storeStatus
      } : s)
    });
    setStoreName('');
    setStoreAddress('');
    setStoreStatus('active');
    setSelectedPosIds([]);
    setTargetStore(null);
    setShowingEditStoreForm(false);
  };

  // ── Product Management actions ──
  const resetProdForm = () => { setProdName(''); setProdSku(''); setProdCategory('Minuman'); setProdPrice(''); setProdStock(''); };

  const handleAddProduct = () => {
    if (!prodName.trim() || !prodPrice) return;
    const nextSeq = productList.length + 1;
    const newProduct = {
      id: `PRD-${String(nextSeq).padStart(3, '0')}`,
      name: prodName.trim(),
      sku: prodSku.trim() || `SKU-${String(nextSeq).padStart(3, '0')}`,
      category: prodCategory,
      price: Number(prodPrice),
      stock: Number(prodStock) || 0,
      status: 'active'
    };
    updateMerchantData({ productList: [...productList, newProduct] });
    resetProdForm();
    setShowAddProductModal(false);
  };

  const handleEditProduct = () => {
    if (!prodName.trim() || !targetProduct) return;
    updateMerchantData({
      productList: productList.map(p => p.id === targetProduct.id
        ? { ...p, name: prodName.trim(), sku: prodSku.trim(), category: prodCategory, price: Number(prodPrice), stock: Number(prodStock) || 0 }
        : p)
    });
    resetProdForm();
    setTargetProduct(null);
    setShowEditProductModal(false);
  };

  const handleDeleteProduct = () => {
    if (!targetProduct) return;
    updateMerchantData({ productList: productList.filter(p => p.id !== targetProduct.id) });
    setTargetProduct(null);
    setShowDeleteProductModal(false);
  };

  const toggleProductStatus = (id) => {
    updateMerchantData({
      productList: productList.map(p => p.id === id ? { ...p, status: p.status === 'active' ? 'inactive' : 'active' } : p)
    });
  };

  // ── User Management Actions ──
  const resetUserForm = () => {
    setNewUsername('');
    setNewRole('operator');
    setNewEmail('');
    setNewPhone('');
    setTargetUser(null);
  };

  const handleAddUser = () => {
    if (!newUsername.trim()) {
      alert('Username harus diisi!');
      return;
    }
    const nextSeq = userList.length + 1;
    const newUser = {
      id: `USR-${String(nextSeq).padStart(3, '0')}`,
      username: newUsername.trim(),
      role: newRole,
      email: newEmail.trim(),
      phone: newPhone.trim()
    };
    setUserList([...userList, newUser]);
    resetUserForm();
    setShowAddUserForm(false);
  };

  const handleEditUser = () => {
    if (!newUsername.trim() || !targetUser) return;
    setUserList(userList.map(u => u.id === targetUser.id
      ? { ...u, username: newUsername.trim(), role: newRole, email: newEmail.trim(), phone: newPhone.trim() }
      : u
    ));
    resetUserForm();
    setShowEditUserForm(false);
  };

  const handleDeleteUser = (id) => {
    if (confirm('Apakah Anda yakin ingin menghapus pengguna ini?')) {
      setUserList(userList.filter(u => u.id !== id));
    }
  };


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

      {/* Header & Selector */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24, gap: 16 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, color: TEAL, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>Merchant Business</div>
          <h1 style={{ fontSize: 24, fontWeight: 700, color: '#171919', letterSpacing: '-0.01em', margin: 0 }}>Bisnis & POS Merchant</h1>
          <p style={{ fontSize: 13, color: '#515252', marginTop: 4, marginBottom: 0 }}>Kelola profil outlet, Integrasi, dan produk.</p>
        </div>

        {/* Dropdown Selector */}
        <div style={{ background: '#fff', padding: '8px 16px', borderRadius: 10, border: '1.5px solid #efefef', boxShadow: '0 2px 6px rgba(0,0,0,0.02)', display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ fontSize: 12.5, fontWeight: 700, color: '#515252' }}>Pilih Merchant:</span>
          <select
            value={selectedMid}
            onChange={e => setSelectedMid(e.target.value)}
            style={{ border: 'none', background: 'transparent', outline: 'none', fontSize: 13, fontWeight: 600, color: TEAL, cursor: 'pointer', fontFamily: 'inherit' }}
          >
            {approvedMerchants.map(m => (
              <option key={m.id} value={m.id}>{m.merchantName} ({m.id})</option>
            ))}
          </select>
        </div>
      </div>

      {/* ── SECTION 1: MERCHANT PROFILE ── */}
      <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(23,25,25,0.03)', padding: '24px', marginBottom: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, borderBottom: '1px solid #efefef', paddingBottom: 16, marginBottom: 16 }}>
          <div style={{ width: 44, height: 44, borderRadius: 10, background: `${TEAL}10`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <i className="bx bx-briefcase" style={{ fontSize: 22, color: TEAL }} />
          </div>
          <div>
            <h3 style={{ fontSize: 16, fontWeight: 800, color: '#171919', margin: 0 }}>{activeMerchant.merchantName}</h3>
            <div style={{ fontSize: 12, color: '#a7a8a8', marginTop: 3, fontFamily: 'monospace' }}>MID: {activeMerchant.id} | Tipe: {activeMerchant.businessType}</div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16 }}>
          <div>
            <div style={{ fontSize: 11, color: '#a7a8a8', textTransform: 'uppercase', fontWeight: 600 }}>Nama Pemilik / PIC</div>
            <div style={{ fontSize: 13.5, fontWeight: 700, color: '#171919', marginTop: 4 }}>{activeMerchant.picName || '—'}</div>
          </div>
          <div>
            <div style={{ fontSize: 11, color: '#a7a8a8', textTransform: 'uppercase', fontWeight: 600 }}>Email Kontak</div>
            <div style={{ fontSize: 13.5, fontWeight: 700, color: '#171919', marginTop: 4 }}>{activeMerchant.email || '—'}</div>
          </div>
          <div>
            <div style={{ fontSize: 11, color: '#a7a8a8', textTransform: 'uppercase', fontWeight: 600 }}>Telepon PIC</div>
            <div style={{ fontSize: 13.5, fontWeight: 700, color: '#171919', marginTop: 4 }}>{activeMerchant.picPhone || '—'}</div>
          </div>
          <div>
            <div style={{ fontSize: 11, color: '#a7a8a8', textTransform: 'uppercase', fontWeight: 600 }}>NPWP Usaha</div>
            <div style={{ fontSize: 13.5, fontWeight: 700, color: '#171919', marginTop: 4, fontFamily: 'monospace' }}>{activeMerchant.npwp || '—'}</div>
          </div>
          <div style={{ gridColumn: '1 / -1' }}>
            <div style={{ fontSize: 11, color: '#a7a8a8', textTransform: 'uppercase', fontWeight: 600 }}>Alamat Operasional</div>
            <div style={{ fontSize: 13, color: '#515252', marginTop: 4, lineHeight: 1.4 }}>
              {activeMerchant.mAddress ? `${activeMerchant.mAddress}, ${activeMerchant.mKelurahan}, ${activeMerchant.mKecamatan}, ${activeMerchant.mKabupaten}, ${activeMerchant.mProvinsi} - ${activeMerchant.mPostal}` : '—'}
            </div>
          </div>
        </div>
      </div>

      {/* ── SECTION 2: TABS NAVIGATION ── */}
      <div style={{ display: 'flex', borderBottom: '2.5px solid #efefef', marginBottom: 20, gap: 24 }}>
        {[
          { id: 'rules', label: 'Business Rules', icon: 'bx-notepad' },
          { id: 'integration', label: 'Third Party Integration', icon: 'bx-code-curly' },
          { id: 'stores', label: 'Outlet & Store Management', icon: 'bx-store' },
          { id: 'products', label: 'Product Management', icon: 'bx-package' },
          { id: 'users', label: 'User Management', icon: 'bx-user' }
        ].map(tab => {
          const isActive = activeTab === tab.id;
          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}
            </button>
          );
        })}
      </div>

      {/* ── TAB CONTENT ── */}

      {/* ── TAB 1: BUSINESS RULES (VIEW ONLY) ── */}
      {activeTab === 'rules' && (
        <div style={{ background: '#fff', borderRadius: 12, 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: 100 }}>Rule ID</th>
                <th style={{ padding: '12px 18px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Nama Aturan</th>
                <th style={{ padding: '12px 18px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Batasan / Nilai</th>
                <th style={{ padding: '12px 18px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Kategori</th>
                <th style={{ padding: '12px 18px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Deskripsi</th>
                <th style={{ padding: '12px 18px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase', textAlign: 'center', width: 100 }}>Status</th>
              </tr>
            </thead>
            <tbody>
              {businessRules.map(rule => (
                <tr key={rule.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', color: TEAL, fontWeight: 700 }}>{rule.id}</td>
                  <td style={{ padding: '14px 18px', fontWeight: 700, color: '#171919' }}>{rule.parameter}</td>
                  <td style={{ padding: '14px 18px' }}>
                    <span style={{ display: 'inline-block', background: 'rgba(0,86,210,0.06)', color: TEAL, fontWeight: 700, borderRadius: 6, padding: '3px 8px', fontSize: 12 }}>
                      {rule.value}
                    </span>
                  </td>
                  <td style={{ padding: '14px 18px', color: '#515252' }}>{rule.category}</td>
                  <td style={{ padding: '14px 18px', color: '#a7a8a8', fontSize: 12.5, lineHeight: 1.4 }}>{rule.desc}</td>
                  <td style={{ padding: '14px 18px', textAlign: 'center' }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, background: 'rgba(116,181,12,0.12)', color: '#74b50c', fontSize: 11, fontWeight: 700, borderRadius: 4, padding: '2px 6px' }}>
                      Active
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* ── TAB 2: INTEGRATION (POS LIST WITH ADD, EDIT, REVOKE) ── */}
      {activeTab === 'integration' && (
        showingAddForm ? (
          <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(0,0,0,0.02)', padding: '24px' }}>
            <div style={{ marginBottom: 20 }}>
              <button
                type="button"
                onClick={() => setShowingAddForm(false)}
                style={{
                  background: 'none', border: 'none', color: '#515252', fontSize: 13, fontWeight: 600,
                  cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, padding: '4px 0'
                }}
              >
                <i className="bx bx-arrow-back" style={{ fontSize: 16 }} /> Kembali ke Daftar Integrasi
              </button>
            </div>

            <h3 style={{ fontSize: 16, fontWeight: 800, color: '#171919', marginTop: 0, marginBottom: 8 }}>Tambah Integrasi Baru</h3>
            <p style={{ fontSize: 12, color: '#a7a8a8', marginBottom: 24 }}>Daftarkan integrasi  baru dan konfigurasikan parameter integrasi serta kunci enkripsi.</p>

            <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'stretch' }}>
              {/* Left Column: Form Inputs */}
              <div style={{ flex: '1 1 450px', display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div>
                  <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Nama  <span style={{ color: '#ed3151' }}>*</span></label>
                  <input
                    type="text"
                    placeholder="Contoh: Kasir Lantai 2"
                    value={posName}
                    onChange={e => setPosName(e.target.value)}
                    style={{ width: '100%', boxSizing: 'border-box', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', fontFamily: 'inherit' }}
                    onFocus={e => e.target.style.borderColor = TEAL} onBlur={e => e.target.style.borderColor = '#efefef'}
                  />
                </div>

                <div>
                  <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Public Key Merchant <span style={{ color: '#ed3151' }}>*</span></label>
                  <textarea
                    rows={4}
                    placeholder="-----BEGIN PUBLIC KEY-----&#10;MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAv1Y...&#10;-----END PUBLIC KEY-----"
                    value={merchantPublicKey}
                    onChange={e => setMerchantPublicKey(e.target.value)}
                    style={{ width: '100%', boxSizing: 'border-box', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 12, color: '#171919', outline: 'none', fontFamily: 'monospace', resize: 'vertical' }}
                    onFocus={e => e.target.style.borderColor = TEAL} onBlur={e => e.target.style.borderColor = '#efefef'}
                  />
                  <span style={{ fontSize: 11, color: '#a7a8a8', marginTop: 4, display: 'block' }}>Kunci publik RSA milik merchant untuk memverifikasi tanda tangan respon transaksi.</span>
                </div>

                <div>
                  <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Callback / Webhook URL Merchant <span style={{ color: '#ed3151' }}>*</span></label>
                  <input
                    type="text"
                    placeholder="https://api.merchant.com/v1/qris/callback"
                    value={merchantCallbackUrl}
                    onChange={e => setMerchantCallbackUrl(e.target.value)}
                    style={{ width: '100%', boxSizing: 'border-box', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', fontFamily: 'inherit' }}
                    onFocus={e => e.target.style.borderColor = TEAL} onBlur={e => e.target.style.borderColor = '#efefef'}
                  />
                  <span style={{ fontSize: 11, color: '#a7a8a8', marginTop: 4, display: 'block' }}>URL endpoint API merchant yang akan dikirimi notifikasi setelah pembayaran QRIS sukses.</span>
                </div>

                <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
                  <button type="button" onClick={() => setShowingAddForm(false)} style={{ background: '#f6f6f6', border: 'none', borderRadius: 8, padding: '10px 20px', fontSize: 13, fontWeight: 600, color: '#515252', cursor: 'pointer', fontFamily: 'inherit' }}>Batal</button>
                  <button type="button" onClick={handleAddPos} style={{ background: TEAL, color: '#fff', border: 'none', borderRadius: 8, padding: '10px 20px', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>Simpan</button>
                </div>
              </div>

              {/* Right Column: Read-only Credentials Card */}
              <div style={{ flex: '1 1 350px', background: '#fafbfc', border: '1px solid #efefef', borderRadius: 12, padding: '20px', display: 'flex', flexDirection: 'column', gap: 16 }}>
                <h4 style={{ fontSize: 12.5, fontWeight: 800, color: '#515252', marginTop: 0, marginBottom: 4, textTransform: 'uppercase', letterSpacing: '0.5px', display: 'flex', alignItems: 'center', gap: 6 }}>
                  <i className="bx bx-shield-quarter" style={{ color: TEAL, fontSize: 18 }} /> Kredensial Hibank (Auto-Generated)
                </h4>
                <p style={{ fontSize: 11.5, color: '#a7a8a8', margin: 0 }}>Kredensial berikut dibuat otomatis oleh sistem untuk intergasi ini.</p>

                <hr style={{ border: 'none', borderTop: '1px solid #efefef', margin: '4px 0' }} />

                <div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                    <label style={{ fontSize: 11.5, fontWeight: 700, color: '#515252' }}>Client ID</label>
                    <button type="button" onClick={() => handleCopy(tempClientId, 'temp_cid')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: TEAL, fontSize: 11, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 2, padding: 0 }}>
                      <i className="bx bx-copy" /> {copiedKey === 'temp_cid' ? 'Copied' : 'Copy'}
                    </button>
                  </div>
                  <div style={{ fontFamily: 'monospace', fontSize: 12, background: '#fff', border: '1px solid #efefef', borderRadius: 6, padding: '8px 10px', color: '#171919', overflowX: 'auto', borderLeft: `3px solid ${TEAL}` }}>
                    {tempClientId || 'Menghitung...'}
                  </div>
                </div>

                <div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                    <label style={{ fontSize: 11.5, fontWeight: 700, color: '#515252' }}>Client Secret</label>
                    <button type="button" onClick={() => handleCopy(tempClientSecret, 'temp_secret')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: TEAL, fontSize: 11, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 2, padding: 0 }}>
                      <i className="bx bx-copy" /> {copiedKey === 'temp_secret' ? 'Copied' : 'Copy'}
                    </button>
                  </div>
                  <div style={{ fontFamily: 'monospace', fontSize: 12, background: '#fff', border: '1px solid #efefef', borderRadius: 6, padding: '8px 10px', color: '#171919', overflowX: 'auto', borderLeft: `3px solid ${TEAL}` }}>
                    {tempClientSecret || 'Menghitung...'}
                  </div>
                </div>

                <div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                    <label style={{ fontSize: 11.5, fontWeight: 700, color: '#515252' }}>Public Key QRIS Management Hibank</label>
                    <button type="button" onClick={() => handleCopy(tempHibankPublicKey, 'temp_hpk')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: TEAL, fontSize: 11, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 2, padding: 0 }}>
                      <i className="bx bx-copy" /> {copiedKey === 'temp_hpk' ? 'Copied' : 'Copy'}
                    </button>
                  </div>
                  <div style={{ fontFamily: 'monospace', fontSize: 11, background: '#fff', border: '1px solid #efefef', borderRadius: 6, padding: '8px 10px', color: '#171919', overflowX: 'auto', maxHeight: 80, borderLeft: `3px solid ${TEAL}` }}>
                    {tempHibankPublicKey}
                  </div>
                </div>
              </div>
            </div>
          </div>
        ) : showingDetailForm && targetPos ? (
          <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(0,0,0,0.02)', padding: '24px' }}>
            <div style={{ marginBottom: 20 }}>
              <button
                type="button"
                onClick={() => { setShowingDetailForm(false); setTargetPos(null); }}
                style={{
                  background: 'none', border: 'none', color: '#515252', fontSize: 13, fontWeight: 600,
                  cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, padding: '4px 0'
                }}
              >
                <i className="bx bx-arrow-back" style={{ fontSize: 16 }} /> Kembali ke Daftar Integrasi
              </button>
            </div>

            <h3 style={{ fontSize: 16, fontWeight: 800, color: '#171919', marginTop: 0, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
              <i className="bx bx-shield-quarter" style={{ color: TEAL, fontSize: 20 }} />
              Detail Kredensial Terminal
            </h3>
            <p style={{ fontSize: 12, color: '#a7a8a8', marginBottom: 24 }}>
              Informasi kredensial koneksi API untuk terminal <strong>{targetPos.name} ({targetPos.id})</strong>.
            </p>

            {/* Activation status / action for POS WEB LITE (POS-001) */}
            {targetPos.id === 'POS-001' && targetPos.status === 'inactive' && (
              <div style={{ background: 'rgba(207,90,39,0.06)', border: `1px solid ${ORANGE}22`, borderRadius: 8, padding: 16, marginBottom: 24, maxWidth: 600 }}>
                <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <i className="bx bx-error-circle" style={{ color: ORANGE, fontSize: 20, marginTop: 1 }} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 700, color: ORANGE, marginBottom: 4 }}>
                      Aktivasi POS Web Lite Diperlukan
                    </div>
                    <p style={{ fontSize: 12, color: '#515252', lineHeight: 1.4, margin: 0 }}>
                      Koneksi API untuk terminal ini belum diaktifkan. Silakan aktifkan untuk menghubungkan dengan sistem kasir POS Web Lite Anda.
                    </p>

                    {!showActivationMessage ? (
                      <button
                        onClick={() => handleActivatePos(targetPos.id)}
                        style={{
                          background: TEAL, color: '#fff', border: 'none', borderRadius: 6,
                          padding: '6px 12px', fontSize: 11.5, fontWeight: 700, cursor: 'pointer',
                          marginTop: 10, display: 'inline-flex', alignItems: 'center', gap: 4, fontFamily: 'inherit'
                        }}
                      >
                        <i className="bx bx-power-off" /> Aktifkan Terminal
                      </button>
                    ) : (
                      <div style={{ marginTop: 12, background: '#fff', border: '1.5px solid #d6e9c6', borderRadius: 6, padding: 12 }}>
                        <div style={{ fontSize: 11, color: '#a7a8a8', textTransform: 'uppercase', fontWeight: 700 }}>Kode Aktivasi (6 Digit)</div>
                        <div style={{ display: 'flex', gap: 6, margin: '6px 0', alignItems: 'center' }}>
                          {activationCode ? activationCode.split('').map((char, idx) => (
                            <span key={idx} style={{
                              width: 32, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center',
                              background: '#f9f9f9', border: '1px solid #ddd', borderRadius: 4, fontSize: 16, fontWeight: 800, color: TEAL
                            }}>
                              {char}
                            </span>
                          )) : '—'}
                          <span style={{ fontSize: 11.5, color: '#27ae60', fontWeight: 700, marginLeft: 8, display: 'flex', alignItems: 'center', gap: 3 }}>
                            <i className="bx bx-check-circle" /> TERKIRIM
                          </span>
                        </div>
                        <div style={{ fontSize: 11.5, color: '#27ae60', lineHeight: 1.4, fontWeight: 600 }}>
                          Kode aktivasi telah berhasil dikirim ke PIC terdaftar: <strong>{activeMerchant.picName || 'PIC'} ({activeMerchant.picPhone || '—'})</strong>.
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            )}

            {targetPos.id === 'POS-001' && targetPos.status === 'active' && showActivationMessage && (
              <div style={{ background: 'rgba(116,181,12,0.08)', border: '1px solid rgba(116,181,12,0.2)', borderRadius: 8, padding: 16, marginBottom: 24, maxWidth: 600 }}>
                <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <i className="bx bx-check-circle" style={{ color: '#74b50c', fontSize: 20, marginTop: 1 }} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 700, color: '#74b50c', marginBottom: 4 }}>
                      POS Web Lite Berhasil Diaktifkan!
                    </div>
                    <p style={{ fontSize: 12, color: '#515252', lineHeight: 1.4, margin: 0 }}>
                      Koneksi API terminal telah aktif. OTP telah diverifikasi dengan PIC terdaftar.
                    </p>

                    <div style={{ marginTop: 12, background: '#fff', border: '1.5px solid #d6e9c6', borderRadius: 8, padding: 16 }}>
                      <div style={{ fontSize: 13, fontWeight: 800, color: TEAL, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 4 }}>
                        <i className="bx bx-check-circle" style={{ fontSize: 16 }} /> [SIMULASI] Kode Aktivasi 6-Digit: <strong style={{ fontFamily: 'monospace', background: 'rgba(0,86,210,0.08)', padding: '2px 8px', borderRadius: 4, fontSize: 14, fontWeight: 800, marginLeft: 4 }}>{activationCode}</strong>
                      </div>
                      <div style={{ fontSize: 12.5, color: '#27ae60', fontWeight: 700, marginBottom: 6 }}>
                        Kode sudah dikirim ke PIC Terdaftar:
                      </div>
                      <div style={{ fontSize: 12.5, color: '#515252', lineHeight: 1.6, paddingLeft: 8 }}>
                        <div>- Nama PIC: <strong>{activeMerchant.picName || '—'}</strong></div>
                        <div>- No Telp: <strong>{activeMerchant.picPhone || '—'}</strong></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            )}

            <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'stretch' }}>
              {/* Left Column: Client Credentials */}
              <div style={{ flex: '1 1 450px', display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                    <label style={{ fontSize: 12.5, fontWeight: 750, color: '#515252' }}>Client ID</label>
                    <button type="button" onClick={() => handleCopy(targetPos.clientId, 'det_cid')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: TEAL, fontSize: 11.5, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 2, padding: 0 }}>
                      <i className="bx bx-copy" /> {copiedKey === 'det_cid' ? 'Copied' : 'Copy'}
                    </button>
                  </div>
                  <div style={{ fontFamily: 'monospace', fontSize: 12.5, background: '#fafafa', border: '1.5px solid #efefef', borderRadius: 8, padding: '10px 12px', color: '#171919' }}>
                    {targetPos.clientId}
                  </div>
                </div>

                <div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                    <label style={{ fontSize: 12.5, fontWeight: 750, color: '#515252' }}>Client Secret</label>
                    <button type="button" onClick={() => handleCopy(targetPos.clientSecret || `cs_live_pos_secret_${targetPos.id.toLowerCase()}_7d8f9e`, 'det_secret')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: TEAL, fontSize: 11.5, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 2, padding: 0 }}>
                      <i className="bx bx-copy" /> {copiedKey === 'det_secret' ? 'Copied' : 'Copy'}
                    </button>
                  </div>
                  <div style={{ fontFamily: 'monospace', fontSize: 12.5, background: '#fafafa', border: '1.5px solid #efefef', borderRadius: 8, padding: '10px 12px', color: '#171919' }}>
                    {targetPos.clientSecret || `cs_live_pos_secret_${targetPos.id.toLowerCase()}_7d8f9e`}
                  </div>
                </div>

                <div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                    <label style={{ fontSize: 12.5, fontWeight: 750, color: '#515252' }}>Callback / Webhook URL Merchant</label>
                    <button type="button" onClick={() => handleCopy(targetPos.callbackUrl || 'https://api.merchant.com/v1/qris/callback', 'det_url')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: TEAL, fontSize: 11.5, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 2, padding: 0 }}>
                      <i className="bx bx-copy" /> {copiedKey === 'det_url' ? 'Copied' : 'Copy'}
                    </button>
                  </div>
                  <div style={{ fontFamily: 'monospace', fontSize: 12.5, background: '#fafafa', border: '1.5px solid #efefef', borderRadius: 8, padding: '10px 12px', color: '#171919' }}>
                    {targetPos.callbackUrl || 'https://api.merchant.com/v1/qris/callback'}
                  </div>
                </div>
              </div>

              {/* Right Column: Public Keys */}
              <div style={{ flex: '1 1 350px', display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                    <label style={{ fontSize: 12.5, fontWeight: 750, color: '#515252' }}>Public Key QRIS Management Hibank</label>
                    <button type="button" onClick={() => handleCopy(tempHibankPublicKey, 'det_hpk')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: TEAL, fontSize: 11.5, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 2, padding: 0 }}>
                      <i className="bx bx-copy" /> {copiedKey === 'det_hpk' ? 'Copied' : 'Copy'}
                    </button>
                  </div>
                  <div style={{ fontFamily: 'monospace', fontSize: 11.5, background: '#fafafa', border: '1.5px solid #efefef', borderRadius: 8, padding: '10px 12px', color: '#171919', overflowX: 'auto', maxHeight: 80 }}>
                    {tempHibankPublicKey}
                  </div>
                </div>

                <div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                    <label style={{ fontSize: 12.5, fontWeight: 750, color: '#515252' }}>Public Key Merchant</label>
                    <button type="button" onClick={() => handleCopy(targetPos.merchantPublicKey || targetPos.publicKey || '-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8A...', 'det_mpk')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: TEAL, fontSize: 11.5, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 2, padding: 0 }}>
                      <i className="bx bx-copy" /> {copiedKey === 'det_mpk' ? 'Copied' : 'Copy'}
                    </button>
                  </div>
                  <pre style={{ margin: 0, fontFamily: 'monospace', fontSize: 11.5, background: '#fafafa', border: '1px solid #efefef', borderRadius: 8, padding: '10px 12px', color: '#171919', overflowX: 'auto', whiteSpace: 'pre-wrap', wordBreak: 'break-all', maxHeight: 100 }}>
                    {targetPos.merchantPublicKey || targetPos.publicKey || '-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAq8hG... (Default Mock Key)'}
                  </pre>
                </div>
              </div>
            </div>
          </div>
        ) : (
          <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(0,0,0,0.02)', padding: '24px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <div>
                <h3 style={{ fontSize: 14.5, fontWeight: 800, color: '#171919', margin: 0 }}>Daftar Integrasi Perangkat</h3>
                <p style={{ fontSize: 12, color: '#a7a8a8', margin: '4px 0 0' }}>Kelola koneksi Integrasi perangat.</p>
              </div>
              <button
                onClick={() => { setPosName(''); setShowingAddForm(true); }}
                style={{ background: TEAL, color: '#fff', border: 'none', borderRadius: 8, padding: '8px 16px', fontSize: 12.5, fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'inherit' }}
              >
                <i className="bx bx-plus" /> Tambah Integrasi
              </button>
            </div>

            <div style={{ overflowX: 'auto', border: '1px solid #efefef', borderRadius: 10 }}>
              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13, textAlign: 'left' }}>
                <thead>
                  <tr style={{ background: '#fafafa', borderBottom: '1px solid #efefef' }}>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Terminal ID</th>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Client ID</th>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Nama Integrasi Perangkat</th>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Status</th>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Public Key POS</th>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase', textAlign: 'center' }}>Aksi</th>
                  </tr>
                </thead>
                <tbody>
                  {posList.length === 0 ? (
                    <tr>
                      <td colSpan="6" style={{ padding: '32px 16px', textAlign: 'center', color: '#a7a8a8' }}>
                        Belum ada perangkat terdaftar.
                      </td>
                    </tr>
                  ) : posList.map(pos => {
                    const isCopiedId = copiedKey === `${pos.id}_cid`;
                    const isCopiedPk = copiedKey === `${pos.id}_pk`;
                    const isRevoked = pos.status === 'revoked';

                    return (
                      <tr key={pos.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 16px', fontFamily: 'monospace', fontWeight: 700, color: TEAL }}>{pos.id}</td>

                        {/* Client ID copyable */}
                        <td style={{ padding: '14px 16px' }}>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                            <span style={{ fontFamily: 'monospace', color: isRevoked ? '#a7a8a8' : '#515252', background: '#fafafa', border: '1px solid #efefef', borderRadius: 4, padding: '3px 8px', fontSize: 11.5 }}>
                              {pos.clientId}
                            </span>
                            {!isRevoked && (
                              <button onClick={() => handleCopy(pos.clientId, `${pos.id}_cid`)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#a7a8a8', display: 'flex', alignItems: 'center' }}>
                                <i className="bx bx-copy" style={{ fontSize: 14 }} />
                              </button>
                            )}
                            {isCopiedId && <span style={{ fontSize: 10, color: '#10B981', fontWeight: 600 }}>Copied</span>}
                          </div>
                        </td>

                        <td style={{ padding: '14px 16px', fontWeight: 700, color: isRevoked ? '#a7a8a8' : '#171919' }}>
                          {pos.name}
                        </td>

                        {/* Status */}
                        <td style={{ padding: '14px 16px' }}>
                          <span style={{
                            display: 'inline-flex', alignItems: 'center', gap: 4,
                            background: pos.status === 'active' ? 'rgba(116,181,12,0.12)' : (pos.status === 'revoked' ? 'rgba(237,49,81,0.1)' : '#f6f6f6'),
                            color: pos.status === 'active' ? '#74b50c' : (pos.status === 'revoked' ? '#ed3151' : '#777'),
                            fontSize: 11.5, fontWeight: 600, borderRadius: 100, padding: '3px 9px'
                          }}>
                            <span style={{ width: 6, height: 6, borderRadius: '50%', background: pos.status === 'active' ? '#74b50c' : (pos.status === 'revoked' ? '#ed3151' : '#777') }} />
                            {pos.status === 'active' ? 'Aktif' : (pos.status === 'revoked' ? 'Revoked' : 'Non-aktif')}
                          </span>
                        </td>

                        {/* Public key */}
                        <td style={{ padding: '14px 16px' }}>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                            <input
                              type="password"
                              readOnly
                              value={pos.publicKey}
                              style={{ fontFamily: 'monospace', fontSize: 11.5, background: '#fafafa', border: '1px solid #efefef', borderRadius: 4, padding: '4px 6px', color: '#a7a8a8', width: 120, outline: 'none' }}
                            />
                            {!isRevoked && (
                              <button onClick={() => handleCopy(pos.publicKey, `${pos.id}_pk`)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#a7a8a8' }}>
                                <i className="bx bx-copy" style={{ fontSize: 14 }} />
                              </button>
                            )}
                            {isCopiedPk && <span style={{ fontSize: 10, color: '#10B981', fontWeight: 600 }}>Copied</span>}
                          </div>
                        </td>

                        {/* Actions */}
                        <td style={{ padding: '14px 16px', textAlign: 'center' }}>
                          <div style={{ display: 'flex', gap: 6, justifyContent: 'center' }}>
                            <button
                              onClick={() => { setTargetPos(pos); setActivationCode(null); setShowActivationMessage(false); setShowingDetailForm(true); }}
                              style={{ background: '#fff', border: `1.5px solid ${TEAL}22`, borderRadius: 6, padding: '4px 8px', fontSize: 11, fontWeight: 700, color: TEAL, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 3 }}
                            >
                              <i className="bx bx-info-circle" /> Detail
                            </button>
                            {pos.id === 'POS-001' ? (
                              <span style={{ fontSize: 11, color: '#a7a8a8', fontStyle: 'italic', fontWeight: 600, display: 'inline-flex', alignItems: 'center', marginLeft: 4 }}>
                                Default Sistem
                              </span>
                            ) : !isRevoked ? (
                              <>
                                <button
                                  onClick={() => { setTargetPos(pos); setPosName(pos.name); setShowEditPosModal(true); }}
                                  style={{ background: '#fff', border: '1px solid #efefef', borderRadius: 6, padding: '4px 8px', fontSize: 11, fontWeight: 600, color: '#515252', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 3 }}
                                >
                                  <i className="bx bx-edit" /> Edit
                                </button>
                                <button
                                  onClick={() => { setTargetPos(pos); setShowRevokePosModal(true); }}
                                  style={{ background: 'rgba(237,49,81,0.06)', border: 'none', borderRadius: 6, padding: '4px 8px', fontSize: 11, fontWeight: 600, color: '#ed3151', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 3 }}
                                >
                                  <i className="bx bx-block" /> Revoke
                                </button>
                              </>
                            ) : (
                              <span style={{ fontSize: 11, color: '#a7a8a8', fontStyle: 'italic', display: 'inline-flex', alignItems: 'center', marginLeft: 4 }}>Revoked</span>
                            )}
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        )
      )}

      {/* ── TAB 3: STORES & ASSIGNED POS ── */}
      {activeTab === 'stores' && (
        showingAddStoreForm ? (
          <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(0,0,0,0.02)', padding: '24px' }}>
            <div style={{ marginBottom: 20 }}>
              <button
                type="button"
                onClick={() => { setShowingAddStoreForm(false); setSelectedPosIds([]); }}
                style={{
                  background: 'none', border: 'none', color: '#515252', fontSize: 13, fontWeight: 600,
                  cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, padding: '4px 0'
                }}
              >
                <i className="bx bx-arrow-back" style={{ fontSize: 16 }} /> Kembali ke Daftar Outlet
              </button>
            </div>

            <h3 style={{ fontSize: 16, fontWeight: 800, color: '#171919', marginTop: 0, marginBottom: 8 }}>Tambah Outlet Baru</h3>
            <p style={{ fontSize: 12, color: '#a7a8a8', marginBottom: 24 }}>Daftarkan cabang store fisik merchant baru dan alokasikan terminal perangkat kasir (POS).</p>

            <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'stretch' }}>
              {/* Left Column: Form Inputs */}
              <div style={{ flex: '1 1 450px', display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div>
                  <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Nama Store / Outlet <span style={{ color: '#ed3151' }}>*</span></label>
                  <input
                    type="text"
                    placeholder="Contoh: Cabang Setiabudi"
                    value={storeName}
                    onChange={e => setStoreName(e.target.value)}
                    style={{ width: '100%', boxSizing: 'border-box', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', fontFamily: 'inherit' }}
                    onFocus={e => e.target.style.borderColor = TEAL} onBlur={e => e.target.style.borderColor = '#efefef'}
                  />
                </div>

                <div>
                  <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Alamat / Lokasi <span style={{ color: '#ed3151' }}>*</span></label>
                  <textarea
                    rows={3}
                    placeholder="Contoh: Ruko Setiabudi No. 12, Jakarta Selatan"
                    value={storeAddress}
                    onChange={e => setStoreAddress(e.target.value)}
                    style={{ width: '100%', boxSizing: 'border-box', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', fontFamily: 'inherit', resize: 'vertical' }}
                    onFocus={e => e.target.style.borderColor = TEAL} onBlur={e => e.target.style.borderColor = '#efefef'}
                  />
                </div>

                <div>
                  <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Status Outlet <span style={{ color: '#ed3151' }}>*</span></label>
                  <select
                    value={storeStatus}
                    onChange={e => setStoreStatus(e.target.value)}
                    style={{ width: '100%', boxSizing: 'border-box', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', fontFamily: 'inherit', background: '#fff' }}
                  >
                    <option value="active">Aktif</option>
                    <option value="inactive">Tutup</option>
                  </select>
                </div>

                <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
                  <button type="button" onClick={() => { setShowingAddStoreForm(false); setSelectedPosIds([]); }} style={{ background: '#f6f6f6', border: 'none', borderRadius: 8, padding: '10px 20px', fontSize: 13, fontWeight: 600, color: '#515252', cursor: 'pointer', fontFamily: 'inherit' }}>Batal</button>
                  <button type="button" onClick={handleAddStore} style={{ background: TEAL, color: '#fff', border: 'none', borderRadius: 8, padding: '10px 20px', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>Tambah Outlet</button>
                </div>
              </div>

              {/* Right Column: POS Allocations checkboxes */}
              <div style={{ flex: '1 1 350px', background: '#fafbfc', border: '1px solid #efefef', borderRadius: 12, padding: '20px', display: 'flex', flexDirection: 'column' }}>
                <h4 style={{ fontSize: 12.5, fontWeight: 800, color: '#515252', marginTop: 0, marginBottom: 4, textTransform: 'uppercase', letterSpacing: '0.5px', display: 'flex', alignItems: 'center', gap: 6 }}>
                  <i className="bx bx-link" style={{ color: TEAL, fontSize: 18 }} /> Alokasikan Terminal POS
                </h4>
                <p style={{ fontSize: 11.5, color: '#a7a8a8', marginBottom: 16 }}>Pilih satu atau beberapa perangkat POS kasir untuk dihubungkan ke outlet baru ini.</p>

                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, maxHeight: 240, overflowY: 'auto', padding: '4px 2px', border: '1px solid #efefef', borderRadius: 8, background: '#fff' }}>
                  {posList.length === 0 ? (
                    <div style={{ padding: '20px 10px', textAlign: 'center', color: '#a7a8a8', fontSize: 12.5, fontStyle: 'italic' }}>
                      Belum ada POS terdaftar. Silakan buat terminal POS terlebih dahulu.
                    </div>
                  ) : posList.map(pos => {
                    const isSelected = selectedPosIds.includes(pos.id);
                    const isRevoked = pos.status === 'revoked';
                    return (
                      <label
                        key={pos.id}
                        style={{
                          display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', borderRadius: 6,
                          background: isRevoked ? '#fdfdfd' : (isSelected ? `${TEAL}05` : 'transparent'),
                          border: isSelected && !isRevoked ? `1px solid ${TEAL}22` : '1px solid transparent',
                          cursor: isRevoked ? 'not-allowed' : 'pointer', opacity: isRevoked ? 0.6 : 1
                        }}
                      >
                        <input
                          type="checkbox"
                          checked={isSelected}
                          disabled={isRevoked}
                          onChange={() => {
                            if (isSelected) {
                              setSelectedPosIds(selectedPosIds.filter(id => id !== pos.id));
                            } else {
                              setSelectedPosIds([...selectedPosIds, pos.id]);
                            }
                          }}
                          style={{ cursor: isRevoked ? 'not-allowed' : 'pointer' }}
                        />
                        <div style={{ fontSize: 12.5 }}>
                          <span style={{ fontFamily: 'monospace', fontWeight: 700, color: TEAL }}>{pos.id}</span> - <span style={{ fontWeight: 600 }}>{pos.name}</span>
                          {isRevoked && <span style={{ color: '#ed3151', fontSize: 11, marginLeft: 6, fontWeight: 600 }}>(Revoked)</span>}
                        </div>
                      </label>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        ) : showingEditStoreForm ? (
          <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(0,0,0,0.02)', padding: '24px' }}>
            <div style={{ marginBottom: 20 }}>
              <button
                type="button"
                onClick={() => { setShowingEditStoreForm(false); setSelectedPosIds([]); setTargetStore(null); }}
                style={{
                  background: 'none', border: 'none', color: '#515252', fontSize: 13, fontWeight: 600,
                  cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, padding: '4px 0'
                }}
              >
                <i className="bx bx-arrow-back" style={{ fontSize: 16 }} /> Kembali ke Daftar Outlet
              </button>
            </div>

            <h3 style={{ fontSize: 16, fontWeight: 800, color: '#171919', marginTop: 0, marginBottom: 8 }}>Edit Outlet</h3>
            <p style={{ fontSize: 12, color: '#a7a8a8', marginBottom: 24 }}>Ubah data cabang store fisik merchant dan perbarui alokasi terminal perangkat kasir (POS).</p>

            <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'stretch' }}>
              {/* Left Column: Form Inputs */}
              <div style={{ flex: '1 1 450px', display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div>
                  <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Nama Store / Outlet <span style={{ color: '#ed3151' }}>*</span></label>
                  <input
                    type="text"
                    placeholder="Contoh: Cabang Setiabudi"
                    value={storeName}
                    onChange={e => setStoreName(e.target.value)}
                    style={{ width: '100%', boxSizing: 'border-box', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', fontFamily: 'inherit' }}
                    onFocus={e => e.target.style.borderColor = TEAL} onBlur={e => e.target.style.borderColor = '#efefef'}
                  />
                </div>

                <div>
                  <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Alamat / Lokasi <span style={{ color: '#ed3151' }}>*</span></label>
                  <textarea
                    rows={3}
                    placeholder="Contoh: Ruko Setiabudi No. 12, Jakarta Selatan"
                    value={storeAddress}
                    onChange={e => setStoreAddress(e.target.value)}
                    style={{ width: '100%', boxSizing: 'border-box', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', fontFamily: 'inherit', resize: 'vertical' }}
                    onFocus={e => e.target.style.borderColor = TEAL} onBlur={e => e.target.style.borderColor = '#efefef'}
                  />
                </div>

                <div>
                  <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Status Outlet <span style={{ color: '#ed3151' }}>*</span></label>
                  <select
                    value={storeStatus}
                    onChange={e => setStoreStatus(e.target.value)}
                    style={{ width: '100%', boxSizing: 'border-box', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', fontFamily: 'inherit', background: '#fff' }}
                  >
                    <option value="active">Aktif</option>
                    <option value="inactive">Tutup</option>
                  </select>
                </div>

                <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
                  <button type="button" onClick={() => { setShowingEditStoreForm(false); setSelectedPosIds([]); setTargetStore(null); }} style={{ background: '#f6f6f6', border: 'none', borderRadius: 8, padding: '10px 20px', fontSize: 13, fontWeight: 600, color: '#515252', cursor: 'pointer', fontFamily: 'inherit' }}>Batal</button>
                  <button type="button" onClick={handleEditStore} style={{ background: TEAL, color: '#fff', border: 'none', borderRadius: 8, padding: '10px 20px', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>Simpan Perubahan</button>
                </div>
              </div>

              {/* Right Column: POS Allocations checkboxes */}
              <div style={{ flex: '1 1 350px', background: '#fafbfc', border: '1px solid #efefef', borderRadius: 12, padding: '20px', display: 'flex', flexDirection: 'column' }}>
                <h4 style={{ fontSize: 12.5, fontWeight: 800, color: '#515252', marginTop: 0, marginBottom: 4, textTransform: 'uppercase', letterSpacing: '0.5px', display: 'flex', alignItems: 'center', gap: 6 }}>
                  <i className="bx bx-link" style={{ color: TEAL, fontSize: 18 }} /> Alokasikan Terminal POS
                </h4>
                <p style={{ fontSize: 11.5, color: '#a7a8a8', marginBottom: 16 }}>Pilih satu atau beberapa perangkat POS kasir untuk dihubungkan ke outlet ini.</p>

                <div style={{ display: 'flex', flexDirection: 'column', gap: 10, maxHeight: 240, overflowY: 'auto', padding: '4px 2px', border: '1px solid #efefef', borderRadius: 8, background: '#fff' }}>
                  {posList.length === 0 ? (
                    <div style={{ padding: '20px 10px', textAlign: 'center', color: '#a7a8a8', fontSize: 12.5, fontStyle: 'italic' }}>
                      Belum ada POS terdaftar. Silakan buat terminal POS terlebih dahulu.
                    </div>
                  ) : posList.map(pos => {
                    const isSelected = selectedPosIds.includes(pos.id);
                    const isRevoked = pos.status === 'revoked';
                    return (
                      <label
                        key={pos.id}
                        style={{
                          display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', borderRadius: 6,
                          background: isRevoked ? '#fdfdfd' : (isSelected ? `${TEAL}05` : 'transparent'),
                          border: isSelected && !isRevoked ? `1px solid ${TEAL}22` : '1px solid transparent',
                          cursor: isRevoked ? 'not-allowed' : 'pointer', opacity: isRevoked ? 0.6 : 1
                        }}
                      >
                        <input
                          type="checkbox"
                          checked={isSelected}
                          disabled={isRevoked}
                          onChange={() => {
                            if (isSelected) {
                              setSelectedPosIds(selectedPosIds.filter(id => id !== pos.id));
                            } else {
                              setSelectedPosIds([...selectedPosIds, pos.id]);
                            }
                          }}
                          style={{ cursor: isRevoked ? 'not-allowed' : 'pointer' }}
                        />
                        <div style={{ fontSize: 12.5 }}>
                          <span style={{ fontFamily: 'monospace', fontWeight: 700, color: TEAL }}>{pos.id}</span> - <span style={{ fontWeight: 600 }}>{pos.name}</span>
                          {isRevoked && <span style={{ color: '#ed3151', fontSize: 11, marginLeft: 6, fontWeight: 600 }}>(Revoked)</span>}
                        </div>
                      </label>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        ) : (
          <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(0,0,0,0.02)', padding: '24px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <div>
                <h3 style={{ fontSize: 14.5, fontWeight: 800, color: '#171919', margin: 0 }}>Daftar Outlet</h3>
                <p style={{ fontSize: 12, color: '#a7a8a8', margin: '4px 0 0' }}>Kelola daftar store fisik merchant dan alokasikan terminal perangkat untuk masing-masing outlet.</p>
              </div>
              <button
                onClick={() => { setStoreName(''); setStoreAddress(''); setStoreStatus('active'); setSelectedPosIds([]); setShowingAddStoreForm(true); }}
                style={{ background: TEAL, color: '#fff', border: 'none', borderRadius: 8, padding: '8px 16px', fontSize: 12.5, fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'inherit' }}
              >
                <i className="bx bx-plus" /> Tambah Outlet
              </button>
            </div>

            <div style={{ overflowX: 'auto', border: '1px solid #efefef', borderRadius: 10 }}>
              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13, textAlign: 'left' }}>
                <thead>
                  <tr style={{ background: '#fafafa', borderBottom: '1px solid #efefef' }}>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase', width: 140 }}>ID Store</th>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Nama Store / Outlet</th>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Lokasi / Alamat</th>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase', textAlign: 'center', width: 90 }}>Status</th>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>POS Assigned</th>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase', textAlign: 'center', width: 120 }}>Aksi</th>
                  </tr>
                </thead>
                <tbody>
                  {storeList.map(store => (
                    <tr key={store.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 16px', fontFamily: 'monospace', fontWeight: 700, color: TEAL }}>{store.id}</td>
                      <td style={{ padding: '14px 16px', fontWeight: 700, color: '#171919' }}>{store.name}</td>
                      <td style={{ padding: '14px 16px', color: '#515252', fontSize: 12.5 }}>{store.address}</td>

                      {/* Status */}
                      <td style={{ padding: '14px 16px', textAlign: 'center' }}>
                        <span style={{
                          display: 'inline-flex', alignItems: 'center', gap: 4,
                          background: store.status === 'active' ? 'rgba(116,181,12,0.12)' : '#f6f6f6',
                          color: store.status === 'active' ? '#74b50c' : '#777',
                          fontSize: 11, fontWeight: 700, borderRadius: 4, padding: '2px 6px'
                        }}>
                          {store.status === 'active' ? 'Aktif' : 'Tutup'}
                        </span>
                      </td>

                      {/* POS Assigned */}
                      <td style={{ padding: '14px 16px' }}>
                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
                          {store.assignedPos && store.assignedPos.length > 0 ? (
                            store.assignedPos.map(pid => {
                              const pInfo = posList.find(p => p.id === pid);
                              const nameLabel = pInfo ? `${pid} - ${pInfo.name}` : pid;
                              const isPInfoRevoked = pInfo && pInfo.status === 'revoked';
                              return (
                                <span
                                  key={pid}
                                  style={{
                                    background: isPInfoRevoked ? 'rgba(237,49,81,0.06)' : `${TEAL}10`,
                                    color: isPInfoRevoked ? '#ed3151' : TEAL,
                                    fontFamily: 'monospace', fontSize: 11, borderRadius: 4, padding: '2px 6px',
                                    border: `1px solid ${isPInfoRevoked ? '#ed315122' : `${TEAL}20`}`
                                  }}
                                  title={isPInfoRevoked ? 'Terminal POS ini telah direvoke' : ''}
                                >
                                  {nameLabel} {isPInfoRevoked && '(Revoked)'}
                                </span>
                              );
                            })
                          ) : (
                            <span style={{ fontSize: 12, color: '#a7a8a8', fontStyle: 'italic' }}>Belum ada POS terhubung</span>
                          )}
                        </div>
                      </td>

                      {/* Actions */}
                      <td style={{ padding: '14px 16px', textAlign: 'center' }}>
                        <div style={{ display: 'flex', gap: 6, justifyContent: 'center' }}>
                          <button
                            onClick={() => {
                              setTargetStore(store);
                              setStoreName(store.name);
                              setStoreAddress(store.address);
                              setStoreStatus(store.status);
                              setSelectedPosIds(store.assignedPos || []);
                              setShowingEditStoreForm(true);
                            }}
                            style={{ background: '#fff', border: '1.5px solid #efefef', borderRadius: 6, padding: '5px 10px', fontSize: 11.5, fontWeight: 700, color: '#515252', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 3 }}
                          >
                            <i className="bx bx-edit" /> Edit
                          </button>
                          <button
                            onClick={() => { setTargetStore(store); setSelectedPosIds(store.assignedPos || []); setShowAssignModal(true); }}
                            style={{ background: '#fff', border: `1.5px solid ${TEAL}`, borderRadius: 6, padding: '5px 10px', fontSize: 11.5, fontWeight: 700, color: TEAL, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4, transition: 'all 150ms' }}
                            onMouseEnter={e => { e.currentTarget.style.background = TEAL; e.currentTarget.style.color = '#fff'; }}
                            onMouseLeave={e => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.color = TEAL; }}
                          >
                            <i className="bx bx-link" /> Assign POS
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )
      )}

      {/* ── TAB 4: PRODUCT MANAGEMENT ── */}
      {activeTab === 'products' && (() => {
        const q = prodSearch.trim().toLowerCase();
        const filteredProducts = q
          ? productList.filter(p => p.name.toLowerCase().includes(q) || p.sku.toLowerCase().includes(q) || p.category.toLowerCase().includes(q))
          : productList;
        const activeCount = productList.filter(p => p.status === 'active').length;
        const outOfStock = productList.filter(p => p.stock === 0).length;
        return (
          <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(0,0,0,0.02)', padding: '24px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, gap: 16, flexWrap: 'wrap' }}>
              <div>
                <h3 style={{ fontSize: 14.5, fontWeight: 800, color: '#171919', margin: 0 }}>Katalog Produk Merchant</h3>
                <p style={{ fontSize: 12, color: '#a7a8a8', margin: '4px 0 0' }}>Kelola daftar produk / item yang dijual merchant — tambah, ubah, atau hapus produk.</p>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ position: 'relative' }}>
                  <i className="bx bx-search" style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', fontSize: 15, color: '#a7a8a8' }} />
                  <input
                    value={prodSearch}
                    onChange={e => setProdSearch(e.target.value)}
                    placeholder="Cari produk / SKU..."
                    style={{ padding: '8px 12px 8px 30px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 12.5, color: '#171919', outline: 'none', fontFamily: 'inherit', width: 190 }}
                  />
                </div>
                <button
                  onClick={() => { resetProdForm(); setShowAddProductModal(true); }}
                  style={{ background: TEAL, color: '#fff', border: 'none', borderRadius: 8, padding: '8px 16px', fontSize: 12.5, fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'inherit', whiteSpace: 'nowrap' }}
                >
                  <i className="bx bx-plus" /> Tambah Produk
                </button>
              </div>
            </div>

            {/* Mini summary */}
            <div style={{ display: 'flex', gap: 12, marginBottom: 18, flexWrap: 'wrap' }}>
              {[
                { label: 'Total Produk', value: productList.length, color: TEAL, icon: 'bx-package' },
                { label: 'Produk Aktif', value: activeCount, color: '#74b50c', icon: 'bx-check-circle' },
                { label: 'Stok Habis', value: outOfStock, color: outOfStock > 0 ? '#ed3151' : '#a7a8a8', icon: 'bx-error-circle' }
              ].map((c, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, background: '#fafafa', border: '1px solid #efefef', borderRadius: 10, padding: '10px 16px', flex: 1, minWidth: 160 }}>
                  <div style={{ width: 34, height: 34, borderRadius: '50%', background: `${c.color}10`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <i className={`bx ${c.icon}`} style={{ fontSize: 17, color: c.color }} />
                  </div>
                  <div>
                    <div style={{ fontSize: 11, color: '#a7a8a8', fontWeight: 600 }}>{c.label}</div>
                    <div style={{ fontSize: 18, fontWeight: 800, color: '#171919', lineHeight: 1 }}>{c.value}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ overflowX: 'auto', border: '1px solid #efefef', borderRadius: 10 }}>
              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13, textAlign: 'left' }}>
                <thead>
                  <tr style={{ background: '#fafafa', borderBottom: '1px solid #efefef' }}>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase', width: 100 }}>Kode</th>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Nama Produk</th>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>SKU</th>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Kategori</th>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase' }}>Harga</th>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase', textAlign: 'center' }}>Stok</th>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase', textAlign: 'center', width: 100 }}>Status</th>
                    <th style={{ padding: '12px 16px', color: '#a7a8a8', fontWeight: 700, fontSize: 11, textTransform: 'uppercase', textAlign: 'center', width: 150 }}>Aksi</th>
                  </tr>
                </thead>
                <tbody>
                  {filteredProducts.length === 0 ? (
                    <tr>
                      <td colSpan="8" style={{ padding: '36px 16px', textAlign: 'center', color: '#a7a8a8' }}>
                        <i className="bx bx-package" style={{ fontSize: 30, display: 'block', marginBottom: 8 }} />
                        {q ? 'Produk tidak ditemukan.' : 'Belum ada produk terdaftar.'}
                      </td>
                    </tr>
                  ) : filteredProducts.map(prod => {
                    const isActive = prod.status === 'active';
                    const noStock = prod.stock === 0;
                    return (
                      <tr key={prod.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 16px', fontFamily: 'monospace', fontWeight: 700, color: TEAL }}>{prod.id}</td>
                        <td style={{ padding: '14px 16px', fontWeight: 700, color: '#171919' }}>{prod.name}</td>
                        <td style={{ padding: '14px 16px', fontFamily: 'monospace', color: '#515252' }}>{prod.sku}</td>
                        <td style={{ padding: '14px 16px' }}>
                          <span style={{ display: 'inline-block', background: `${ORANGE}10`, color: ORANGE, fontSize: 11.5, fontWeight: 700, borderRadius: 4, padding: '2px 8px' }}>{prod.category}</span>
                        </td>
                        <td style={{ padding: '14px 16px', fontWeight: 700, color: '#171919' }}>{fmtRpProd(prod.price)}</td>
                        <td style={{ padding: '14px 16px', textAlign: 'center', fontWeight: 700, color: noStock ? '#ed3151' : '#171919' }}>
                          {noStock ? 'Habis' : prod.stock}
                        </td>
                        <td style={{ padding: '14px 16px', textAlign: 'center' }}>
                          <button
                            onClick={() => toggleProductStatus(prod.id)}
                            title="Klik untuk ubah status"
                            style={{
                              display: 'inline-flex', alignItems: 'center', gap: 4, cursor: 'pointer', border: 'none', fontFamily: 'inherit',
                              background: isActive ? 'rgba(116,181,12,0.12)' : '#f6f6f6',
                              color: isActive ? '#74b50c' : '#777',
                              fontSize: 11, fontWeight: 700, borderRadius: 100, padding: '4px 10px'
                            }}
                          >
                            <span style={{ width: 6, height: 6, borderRadius: '50%', background: isActive ? '#74b50c' : '#777' }} />
                            {isActive ? 'Aktif' : 'Non-aktif'}
                          </button>
                        </td>
                        <td style={{ padding: '14px 16px', textAlign: 'center' }}>
                          <div style={{ display: 'flex', gap: 6, justifyContent: 'center' }}>
                            <button
                              onClick={() => { setTargetProduct(prod); setProdName(prod.name); setProdSku(prod.sku); setProdCategory(prod.category); setProdPrice(String(prod.price)); setProdStock(String(prod.stock)); setShowEditProductModal(true); }}
                              style={{ background: '#fff', border: '1px solid #efefef', borderRadius: 6, padding: '4px 8px', fontSize: 11, fontWeight: 600, color: '#515252', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 3 }}
                            >
                              <i className="bx bx-edit" /> Edit
                            </button>
                            <button
                              onClick={() => { setTargetProduct(prod); setShowDeleteProductModal(true); }}
                              style={{ background: 'rgba(237,49,81,0.06)', border: 'none', borderRadius: 6, padding: '4px 8px', fontSize: 11, fontWeight: 600, color: '#ed3151', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 3 }}
                            >
                              <i className="bx bx-trash" /> Hapus
                            </button>
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        );
      })()}

      {/* ── TAB 5: USER MANAGEMENT ── */}
      {activeTab === 'users' && (() => {
        return (
          <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(0,0,0,0.02)', padding: '24px' }}>
            {/* Header */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <div>
                <h3 style={{ fontSize: 14.5, fontWeight: 800, color: '#171919', margin: 0 }}>Daftar Pengguna POS</h3>
                <p style={{ fontSize: 12, color: '#a7a8a8', margin: '4px 0 0' }}>Kelola user yang memiliki akses login ke sistem POS.</p>
              </div>
              <button onClick={() => { resetUserForm(); setShowAddUserForm(true); setShowEditUserForm(false); }} style={{ ...primaryBtn, marginTop: 0 }}>
                <i className="bx bx-plus" /> Tambah Pengguna Baru
              </button>
            </div>

            {/* Summary Cards */}
            <div style={{ display: 'flex', gap: 12, marginBottom: 18, flexWrap: 'wrap' }}>
              {[
                { label: 'Total User', value: userList.length, icon: 'bx-group', color: TEAL },
                { label: 'Admin', value: userList.filter(u => u.role === 'admin').length, icon: 'bx-shield', color: '#cf5a27' },
                { label: 'Operator', value: userList.filter(u => u.role === 'operator').length, icon: 'bx-wrench', color: '#4a90d9' },
                { label: 'Kasir', value: userList.filter(u => u.role === 'kasir').length, icon: 'bx-calculator', color: '#27ae60' }
              ].map((card, i) => (
                <div key={i} style={{ flex: '1 1 120px', background: '#fafbfc', borderRadius: 10, padding: '12px 16px', border: '1px solid #efefef' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                    <i className={`bx ${card.icon}`} style={{ fontSize: 18, color: card.color }} />
                    <span style={{ fontSize: 11, color: '#a7a8a8', fontWeight: 600 }}>{card.label}</span>
                  </div>
                  <span style={{ fontSize: 20, fontWeight: 800, color: '#171919' }}>{card.value}</span>
                </div>
              ))}
            </div>

            {/* User Table */}
            <div style={{ overflowX: 'auto', border: '1px solid #efefef', borderRadius: 10 }}>
              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13, textAlign: 'left' }}>
                <thead>
                  <tr style={{ background: '#fafafa', borderBottom: '1px solid #efefef' }}>
                    <th style={thStyle}>ID</th>
                    <th style={thStyle}>Username</th>
                    <th style={thStyle}>Role</th>
                    <th style={thStyle}>Email</th>
                    <th style={thStyle}>Phone</th>
                    <th style={{ ...thStyle, textAlign: 'center' }}>Aksi</th>
                  </tr>
                </thead>
                <tbody>
                  {userList.length === 0 && (
                    <tr><td colSpan={6} style={{ padding: 24, textAlign: 'center', color: '#a7a8a8' }}>Belum ada data pengguna.</td></tr>
                  )}
                  {userList.map(u => {
                    const roleBadge = {
                      admin: { bg: '#fff3e6', color: '#cf5a27', label: 'Admin' },
                      operator: { bg: '#e8f0fe', color: '#4a90d9', label: 'Operator' },
                      kasir: { bg: '#e6f9ee', color: '#27ae60', label: 'Kasir' }
                    }[u.role] || { bg: '#f6f6f6', color: '#515252', label: u.role };

                    return (
                      <tr key={u.id} style={{ borderBottom: '1px solid #f3f3f3' }}
                          onMouseEnter={e => e.currentTarget.style.background = '#fafbfc'}
                          onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                        <td style={tdStyle}><span style={{ fontFamily: 'monospace', fontWeight: 700, color: TEAL, fontSize: 12 }}>{u.id}</span></td>
                        <td style={tdStyle}><span style={{ fontWeight: 600 }}>{u.username}</span></td>
                        <td style={tdStyle}>
                          <span style={{ background: roleBadge.bg, color: roleBadge.color, padding: '3px 10px', borderRadius: 20, fontSize: 11, fontWeight: 700 }}>
                            {roleBadge.label}
                          </span>
                        </td>
                        <td style={tdStyle}>{u.email}</td>
                        <td style={tdStyle}>{u.phone}</td>
                        <td style={{ ...tdStyle, textAlign: 'center' }}>
                          <button
                            onClick={() => { setTargetUser(u); setNewUsername(u.username); setNewRole(u.role); setNewEmail(u.email); setNewPhone(u.phone); setShowEditUserForm(true); setShowAddUserForm(false); }}
                            style={{ background: TEAL, color: '#fff', border: 'none', borderRadius: 5, padding: '4px 10px', fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', marginRight: 6 }}
                          >
                            <i className="bx bx-edit-alt" style={{ marginRight: 2 }} /> Edit
                          </button>
                          <button
                            onClick={() => handleDeleteUser(u.id)}
                            style={{ background: '#ed3151', color: '#fff', border: 'none', borderRadius: 5, padding: '4px 10px', fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}
                          >
                            <i className="bx bx-trash" style={{ marginRight: 2 }} /> Hapus
                          </button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        );
      })()}

      {/* ── MODALS ── */}



      {/* MODAL 2: EDIT POS */}
      {showEditPosModal && targetPos && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 1500, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(23,25,25,0.4)', backdropFilter: 'blur(3px)', animation: 'fadeIn 150ms ease' }} onClick={() => setShowEditPosModal(false)}>
          <div style={{ background: '#fff', borderRadius: 12, padding: 24, width: 380, maxWidth: '90%', boxShadow: '0 20px 40px rgba(0,0,0,0.15)', display: 'flex', flexDirection: 'column', animation: 'slideUp 250ms cubic-bezier(0.22, 0.68, 0, 1.1)' }} onClick={e => e.stopPropagation()}>
            <h3 style={{ fontSize: 15, fontWeight: 800, color: '#171919', marginTop: 0, marginBottom: 16 }}>Edit Terminal POS</h3>
            <label style={{ fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Nama POS / Kasir</label>
            <input
              type="text"
              value={posName}
              onChange={e => setPosName(e.target.value)}
              style={{ padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', fontFamily: 'inherit', marginBottom: 20 }}
            />
            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              <button onClick={() => setShowEditPosModal(false)} style={{ background: '#f6f6f6', border: 'none', borderRadius: 6, padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#515252', cursor: 'pointer', fontFamily: 'inherit' }}>Batal</button>
              <button onClick={handleEditPos} style={{ background: TEAL, color: '#fff', border: 'none', borderRadius: 6, padding: '8px 16px', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>Simpan Perubahan</button>
            </div>
          </div>
        </div>
      )}



      {/* MODAL 3: REVOKE POS */}
      {showRevokePosModal && targetPos && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 1500, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(23,25,25,0.4)', backdropFilter: 'blur(3px)', animation: 'fadeIn 150ms ease' }} onClick={() => setShowRevokePosModal(false)}>
          <div style={{ background: '#fff', borderRadius: 12, padding: 24, width: 400, maxWidth: '90%', boxShadow: '0 20px 40px rgba(0,0,0,0.15)', display: 'flex', flexDirection: 'column', animation: 'slideUp 250ms cubic-bezier(0.22, 0.68, 0, 1.1)' }} onClick={e => e.stopPropagation()}>
            <h3 style={{ fontSize: 15, fontWeight: 800, color: '#ed3151', marginTop: 0, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}><i className="bx bx-error" /> Revoke Kredensial POS</h3>
            <p style={{ fontSize: 13, color: '#515252', lineHeight: 1.4, margin: '0 0 20px' }}>
              Apakah Anda yakin ingin merevoke terminal <strong>{targetPos.name} ({targetPos.id})</strong>?
              <br /><br />
              Aksi ini akan menonaktifkan Client ID dan Public Key POS tersebut secara permanen. Transaksi baru tidak akan bisa diproses dari terminal ini.
            </p>
            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              <button onClick={() => setShowRevokePosModal(false)} style={{ background: '#f6f6f6', border: 'none', borderRadius: 6, padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#515252', cursor: 'pointer', fontFamily: 'inherit' }}>Batal</button>
              <button onClick={handleRevokePos} style={{ background: '#ed3151', color: '#fff', border: 'none', borderRadius: 6, padding: '8px 16px', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>Ya, Revoke Kredensial</button>
            </div>
          </div>
        </div>
      )}

      {/* MODAL 4: ASSIGN POS TO STORE */}
      {showAssignModal && targetStore && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 1500, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(23,25,25,0.4)', backdropFilter: 'blur(3px)', animation: 'fadeIn 150ms ease' }} onClick={() => setShowAssignModal(false)}>
          <div style={{ background: '#fff', borderRadius: 12, padding: 24, width: 420, maxWidth: '90%', boxShadow: '0 20px 40px rgba(0,0,0,0.15)', display: 'flex', flexDirection: 'column', animation: 'slideUp 250ms cubic-bezier(0.22, 0.68, 0, 1.1)' }} onClick={e => e.stopPropagation()}>
            <h3 style={{ fontSize: 15, fontWeight: 800, color: '#171919', marginTop: 0, marginBottom: 4 }}>Assign POS ke Store</h3>
            <p style={{ fontSize: 12, color: '#a7a8a8', margin: '0 0 16px' }}>Pilih terminal kasir (POS) yang ditugaskan ke: <strong>{targetStore.name}</strong></p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, maxHeight: 200, overflowY: 'auto', padding: '4px 2px', border: '1px solid #efefef', borderRadius: 8, marginBottom: 20 }}>
              {posList.map(pos => {
                const isSelected = selectedPosIds.includes(pos.id);
                const isRevoked = pos.status === 'revoked';
                return (
                  <label
                    key={pos.id}
                    style={{
                      display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', borderRadius: 6,
                      background: isRevoked ? '#fdfdfd' : (isSelected ? `${TEAL}05` : 'transparent'),
                      border: isSelected && !isRevoked ? `1px solid ${TEAL}22` : '1px solid transparent',
                      cursor: isRevoked ? 'not-allowed' : 'pointer', opacity: isRevoked ? 0.6 : 1
                    }}
                  >
                    <input
                      type="checkbox"
                      checked={isSelected}
                      disabled={isRevoked}
                      onChange={() => {
                        if (isSelected) {
                          setSelectedPosIds(selectedPosIds.filter(id => id !== pos.id));
                        } else {
                          setSelectedPosIds([...selectedPosIds, pos.id]);
                        }
                      }}
                      style={{ cursor: isRevoked ? 'not-allowed' : 'pointer' }}
                    />
                    <div style={{ fontSize: 13 }}>
                      <span style={{ fontFamily: 'monospace', fontWeight: 700, color: TEAL }}>{pos.id}</span> - <span style={{ fontWeight: 600 }}>{pos.name}</span>
                      {isRevoked && <span style={{ color: '#ed3151', fontSize: 11, marginLeft: 6, fontWeight: 600 }}>(Revoked)</span>}
                    </div>
                  </label>
                );
              })}
            </div>

            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              <button onClick={() => setShowAssignModal(false)} style={{ background: '#f6f6f6', border: 'none', borderRadius: 6, padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#515252', cursor: 'pointer', fontFamily: 'inherit' }}>Batal</button>
              <button onClick={handleAssignPos} style={{ background: TEAL, color: '#fff', border: 'none', borderRadius: 6, padding: '8px 16px', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>Simpan Alokasi</button>
            </div>
          </div>
        </div>
      )}

      {/* MODAL 5: TAMBAH / EDIT PRODUK */}
      {(showAddProductModal || showEditProductModal) && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 1500, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(23,25,25,0.4)', backdropFilter: 'blur(3px)', animation: 'fadeIn 150ms ease' }} onClick={() => { setShowAddProductModal(false); setShowEditProductModal(false); }}>
          <div style={{ background: '#fff', borderRadius: 12, padding: 24, width: 460, maxWidth: '90%', boxShadow: '0 20px 40px rgba(0,0,0,0.15)', display: 'flex', flexDirection: 'column', animation: 'slideUp 250ms cubic-bezier(0.22, 0.68, 0, 1.1)' }} onClick={e => e.stopPropagation()}>
            <h3 style={{ fontSize: 15, fontWeight: 800, color: '#171919', marginTop: 0, marginBottom: 16, display: 'flex', alignItems: 'center', gap: 8 }}>
              <i className="bx bx-package" style={{ color: TEAL, fontSize: 20 }} />
              {showEditProductModal ? 'Edit Produk' : 'Tambah Produk Baru'}
            </h3>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div>
                <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Nama Produk</label>
                <input type="text" placeholder="Contoh: Kopi Susu Gula Aren" value={prodName} onChange={e => setProdName(e.target.value)}
                  style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', fontFamily: 'inherit' }}
                  onFocus={e => e.target.style.borderColor = TEAL} onBlur={e => e.target.style.borderColor = '#efefef'} />
              </div>

              <div style={{ display: 'flex', gap: 12 }}>
                <div style={{ flex: 1 }}>
                  <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6 }}>SKU / Kode Barang</label>
                  <input type="text" placeholder="KSGA-01" value={prodSku} onChange={e => setProdSku(e.target.value)}
                    style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', fontFamily: 'inherit' }}
                    onFocus={e => e.target.style.borderColor = TEAL} onBlur={e => e.target.style.borderColor = '#efefef'} />
                </div>
                <div style={{ flex: 1 }}>
                  <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Kategori</label>
                  <select value={prodCategory} onChange={e => setProdCategory(e.target.value)}
                    style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', fontFamily: 'inherit', background: '#fff' }}>
                    {['Minuman', 'Makanan', 'Merchandise', 'Jasa / Layanan', 'Lainnya'].map(c => <option key={c} value={c}>{c}</option>)}
                  </select>
                </div>
              </div>

              <div style={{ display: 'flex', gap: 12 }}>
                <div style={{ flex: 1 }}>
                  <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Harga (Rp)</label>
                  <input type="number" placeholder="22000" value={prodPrice} onChange={e => setProdPrice(e.target.value)}
                    style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', fontFamily: 'inherit' }}
                    onFocus={e => e.target.style.borderColor = TEAL} onBlur={e => e.target.style.borderColor = '#efefef'} />
                </div>
                <div style={{ flex: 1 }}>
                  <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: '#515252', marginBottom: 6 }}>Stok</label>
                  <input type="number" placeholder="0" value={prodStock} onChange={e => setProdStock(e.target.value)}
                    style={{ width: '100%', padding: '10px 12px', borderRadius: 8, border: '1.5px solid #efefef', fontSize: 13, color: '#171919', outline: 'none', fontFamily: 'inherit' }}
                    onFocus={e => e.target.style.borderColor = TEAL} onBlur={e => e.target.style.borderColor = '#efefef'} />
                </div>
              </div>
            </div>

            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 22 }}>
              <button onClick={() => { setShowAddProductModal(false); setShowEditProductModal(false); }} style={{ background: '#f6f6f6', border: 'none', borderRadius: 6, padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#515252', cursor: 'pointer', fontFamily: 'inherit' }}>Batal</button>
              <button onClick={showEditProductModal ? handleEditProduct : handleAddProduct} style={{ background: TEAL, color: '#fff', border: 'none', borderRadius: 6, padding: '8px 16px', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>{showEditProductModal ? 'Simpan Perubahan' : 'Tambah Produk'}</button>
            </div>
          </div>
        </div>
      )}

      {/* MODAL 6: HAPUS PRODUK */}
      {showDeleteProductModal && targetProduct && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 1500, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(23,25,25,0.4)', backdropFilter: 'blur(3px)', animation: 'fadeIn 150ms ease' }} onClick={() => setShowDeleteProductModal(false)}>
          <div style={{ background: '#fff', borderRadius: 12, padding: 24, width: 400, maxWidth: '90%', boxShadow: '0 20px 40px rgba(0,0,0,0.15)', display: 'flex', flexDirection: 'column', animation: 'slideUp 250ms cubic-bezier(0.22, 0.68, 0, 1.1)' }} onClick={e => e.stopPropagation()}>
            <h3 style={{ fontSize: 15, fontWeight: 800, color: '#ed3151', marginTop: 0, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}><i className="bx bx-trash" /> Hapus Produk</h3>
            <p style={{ fontSize: 13, color: '#515252', lineHeight: 1.4, margin: '0 0 20px' }}>
              Apakah Anda yakin ingin menghapus produk <strong>{targetProduct.name} ({targetProduct.id})</strong>? Aksi ini tidak dapat dibatalkan.
            </p>
            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              <button onClick={() => setShowDeleteProductModal(false)} style={{ background: '#f6f6f6', border: 'none', borderRadius: 6, padding: '8px 16px', fontSize: 12, fontWeight: 600, color: '#515252', cursor: 'pointer', fontFamily: 'inherit' }}>Batal</button>
              <button onClick={handleDeleteProduct} style={{ background: '#ed3151', color: '#fff', border: 'none', borderRadius: 6, padding: '8px 16px', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>Ya, Hapus Produk</button>
            </div>
          </div>
        </div>
      )}

      {/* MODAL 7: TAMBAH / EDIT USER */}
      {(showAddUserForm || showEditUserForm) && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 1500, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(23,25,25,0.4)', backdropFilter: 'blur(3px)', animation: 'fadeIn 150ms ease' }} onClick={() => { setShowAddUserForm(false); setShowEditUserForm(false); }}>
          <div style={{ background: '#fff', borderRadius: 12, padding: 24, width: 380, maxWidth: '90%', boxShadow: '0 20px 40px rgba(0,0,0,0.15)', display: 'flex', flexDirection: 'column', animation: 'slideUp 250ms cubic-bezier(0.22, 0.68, 0, 1.1)' }} onClick={e => e.stopPropagation()}>
            <h3 style={{ fontSize: 15, fontWeight: 800, color: '#171919', marginTop: 0, marginBottom: 16 }}>
              {showEditUserForm ? 'Edit Pengguna' : 'Tambah Pengguna Baru'}
            </h3>
            <label style={labelStyle}>Username *</label>
            <input value={newUsername} onChange={e => setNewUsername(e.target.value)} placeholder="Masukkan username" style={inputStyle} />
            <label style={labelStyle}>Role *</label>
            <select value={newRole} onChange={e => setNewRole(e.target.value)} style={inputStyle}>
              <option value="admin">Admin</option>
              <option value="operator">Operator</option>
              <option value="kasir">Kasir</option>
            </select>
            <label style={labelStyle}>Email</label>
            <input value={newEmail} onChange={e => setNewEmail(e.target.value)} placeholder="email@example.com" style={inputStyle} />
            <label style={labelStyle}>Phone</label>
            <input value={newPhone} onChange={e => setNewPhone(e.target.value)} placeholder="08xxxxxxxxxx" style={inputStyle} />
            <div style={{ marginTop: 12, display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              <button onClick={() => { resetUserForm(); setShowAddUserForm(false); setShowEditUserForm(false); }} style={secondaryBtn}>Batal</button>
              <button onClick={showAddUserForm ? handleAddUser : handleEditUser} style={primaryBtn}>Simpan</button>
            </div>
          </div>
        </div>
      )}

    </div>
  );
}

Object.assign(window, { MerchantBusinessPage });