// Admin Panel Component with AES-GCM Credential Vault
// Accessible only to System Admin & Senior Leadership roles

// ============================================================
// VAULT DECRYPTION UTILITIES (AES-GCM + PBKDF2)
// ============================================================
const VAULT_SALT = 'tz_vault_salt_v1';

async function vaultDeriveKey(password, usage) {
  var enc = new TextEncoder();
  var keyMaterial = await crypto.subtle.importKey(
    'raw', enc.encode(password), 'PBKDF2', false, ['deriveKey']
  );
  return crypto.subtle.deriveKey(
    { name: 'PBKDF2', salt: enc.encode(VAULT_SALT), iterations: 100000, hash: 'SHA-256' },
    keyMaterial,
    { name: 'AES-GCM', length: 256 },
    false,
    [usage]
  );
}

async function vaultDecrypt(hexString, password) {
  try {
    var bytes = new Uint8Array(hexString.match(/.{2}/g).map(function(b) { return parseInt(b, 16); }));
    var iv = bytes.slice(0, 12);
    var ciphertext = bytes.slice(12);
    var key = await vaultDeriveKey(password, 'decrypt');
    var decrypted = await crypto.subtle.decrypt({ name: 'AES-GCM', iv: iv }, key, ciphertext);
    return new TextDecoder().decode(decrypted);
  } catch (e) {
    return null;
  }
}

async function vaultEncrypt(plainText, password) {
  var enc = new TextEncoder();
  var key = await vaultDeriveKey(password, 'encrypt');
  var iv = crypto.getRandomValues(new Uint8Array(12));
  var encrypted = await crypto.subtle.encrypt({ name: 'AES-GCM', iv: iv }, key, enc.encode(plainText));
  var combined = new Uint8Array(iv.length + encrypted.byteLength);
  combined.set(iv);
  combined.set(new Uint8Array(encrypted), iv.length);
  return Array.from(combined).map(function(b) { return b.toString(16).padStart(2, '0'); }).join('');
}

async function vaultGetPassword(adminUsername, adminPassword, targetUsername) {
  if (!window.CREDENTIAL_VAULT) return null;
  var encryptedMasterKey = window.CREDENTIAL_VAULT.adminKeys[adminUsername];
  if (!encryptedMasterKey) return null;
  var masterKey = await vaultDecrypt(encryptedMasterKey, adminPassword);
  if (!masterKey) return null;
  var encryptedPassword = window.CREDENTIAL_VAULT.credentials[targetUsername];
  if (!encryptedPassword) return null;
  return await vaultDecrypt(encryptedPassword, masterKey);
}

// ============================================================
// CREDENTIAL VAULT DATA
// Replace this with output from generate_vault.html
// ============================================================
// window.CREDENTIAL_VAULT = { adminKeys: { ... }, credentials: { ... } };
// If CREDENTIAL_VAULT is not set, vault features are disabled and
// the panel falls back to the existing hash-based credential system.

// ============================================================
// CREDENTIAL VAULT — Auto-generated, do NOT edit manually
// Generated: 2026-06-08T05:36:19.857Z
// Venues: 93 | Admins: 4
// ============================================================
const CREDENTIAL_VAULT = {
  "adminKeys": {
    "tz.admin": "e46a15931f33a983109831696e421704c54a9a585db1543d91e5de912b49986aa8fd614237669090c5888aaf715c50b5b31597d786b8c5b49404",
    "slt.admin": "3314c7b59279821150ba484a6696964f7f9b0f34752fdddb15211ccb5401b4b9e71ea7bbd3d86595784bfb8aa9b1329df5f54ef7a4d4caa33692",
    "slt.view": "db8c6affa77fd09972f55467ff910ba2cda8989576c6339a9cf85e3c795460ef680a80395ed906021acd3ac603c5a9a54d9f203e346553762f29",
    "slt.exec": "7e1d943737947f5ac2a340fecf2368f0ee5eb5f5bd0239d98b3b55b62facf96265545201949617ecc56cf20ac9581204ae32925eb8da6cefc3e1"
  },
  "credentials": {
    "region1.manager": "e78213e4704d9498f057a17322d3e7cd7897b9ac3a8254242b4fae26a38164a6a8c8202b7b00f767",
    "region2.manager": "5e59b2c289093c31b38f9a9d879443a3dc420f5277457169b155a7cdeabd64fb336714facf411804",
    "region3.manager": "65ff2b9b50bdcf95c1f7d37d947823b8e0164cb2bca94900f9ab4deae2ec3b85baafe967e66ad28b",
    "region4.manager": "662c2c45e0c85908c972efe0fa5187e86be62359fdda9435aaedba97b6a5c494a3455f26da2487cb",
    "region5.manager": "d38046ec65f3e963618208ef7d95890b6cc2f2cd6a100f2ed8381cde72b128d934fe921e6f0575a3",
    "tutikpujilestari.manager": "5e9424f680d29d011c7a70ec53e1d71fcad3a9e951485bcce0a12ead1b9b2bc974773743b94894b4",
    "bali.manager": "94cdb619ce5322b651f9a7c45d68cf8d20295ced87746bb98e1b6bcb9893b80f2b337f8b7f27c088",
    "bandung.manager": "b08e221e5f362579f03e4b8de3869098b71497b721a356ff2be7686eb06555f8009c71982d6324fb",
    "centraljava.manager": "8866e893eb1f48cd393b1cca0c8ccdd4aa1fdb67c3c19e186728d930ce74811cb0b62b631a3f9e2c",
    "greaterjakarta1.manager": "1f0b187d523434fad0c15bdecc62d643b0743dd8316cb07a05e61948c42a5a3460d7b3ff8e00176a",
    "greaterjakarta2.manager": "3e9265995da6f7aad3193a0940ba09773022e39de0436ec19cc90b0440f58aab5fdff885b0502f89",
    "jakarta.manager": "d6dae3c27705323ce1cce4e1cc572192bd96ee8716d1603c91d2708a01964460da1f25ef9d851f97",
    "kalimantan.manager": "b35ddba7038aefae4ba31f68f82a4cd20b9ed614e87076649bc95b91530a112a3ca2914765a2cdab",
    "medan.manager": "bad923bc785e7145384890da9d4069336a95753fd37d5080629d7db2d4905b6439c30bdd4e0eb076",
    "restofsumatra.manager": "e5a198884293c4c9972208e21875bb021b6cd33c3bc6a6e3dc8b26820c8cc57cc58d83f399cc2b01",
    "sulawesi.manager": "327d900c14bd7f2bdb559722902345fe2a6668f315b7daffe19f96dbbd35e18398ec6561aab59a98",
    "surabaya.manager": "2a41e2bde680c82afc892fa459d2b6bc9272883c66cc1f64cc6ad13893d336ebd1d3414590c93891",
    "tangerang.manager": "0cb70d867c68a7733e430a92f82824cde6834cb2207bbbca8d1c0e7b92b8b3d372c9c2c798039350",
    "venue.10262": "923fdb2806f0890e03ff9b89323394b871740d1c514b5dd558e71e7aaf4d702d44d1f6303e104cb9",
    "venue.13062": "02cc0f3a4f72264e7874184a1d71983219661e4e518018c279aba013401d5e48dcb5c6e23dc99222",
    "venue.13962": "1f5d2e8f9b90cb0afdcafc27dc8ffb2b5e87893d895b6ca38a8c8fb92d616467647df6004014369d",
    "venue.14062": "5b23a82d07cc1b46c269e91dcc077d84585c221c85e47fb5a38a4dd359de9b2988b61b049c352904",
    "venue.20862": "c8da7ce5e1851cb769a190766ad6e1816ab3f2bfbf22cad2a70609f4641d8c54f45eb91dc7d55ecb",
    "venue.21562": "a27bf1217ec9d190c2e24cefff8ca45dca30c16f533594af3e56634202b6b91dd81a9dbdcce0999c",
    "venue.23062": "4d87fbe9208a86c1007aa19a0df8860ea45c0c7b9d3bc5cc065f708249e4a0688f6e59be02407612",
    "venue.23762": "b1ec587699c0c0a50c2e79ee3ed6d1f5b4bc6d9cae7c335b68637f613b05b3386c3a386f4ed98894",
    "venue.24762": "cbf379beff21cf31b109714c9ef1363afe01cb743caf4dd0160af1cf70ad4efb8858abc37217d1c1",
    "venue.25062": "ef63162091e72e6290fced4622243b707b14c3cb8bf353494dba522d27a97c26985b10f0f96f5f7e",
    "venue.25262": "4495fb6550f4826b2ccea002aa68547bdf610f7c8cbe9d7f2a17a4a1196d86a9a5da3dd2ad5e9634",
    "venue.30562": "e308e8368fad820e4f4c0362badc906129fbe6da5da8b1c43ed075b5791c3999e662f686d65fe9db",
    "venue.30662": "d51adc983f4c55a42ca90605b3152f3426894b75bb2152250a7139b41c2e35ffcb6039e67aaf92bc",
    "venue.33362": "e9b6084cc13266d25e8f6c9de3cf4aa34c7692351036b631e75290862b8ea936ecbeb7466cd3afdd",
    "venue.34462": "db33e00d4e1d3f07c8ac7cc00d0407b1d5bf22e4f5f8bd09ada151e0548bc906d2648a1098a98e64",
    "venue.34562": "98f63e5791a3014057ddabff2eff349d36ec2e63b7e826b35d346e5f8743c7e1a57db5baa305c8e0",
    "venue.34662": "a36e4fc3923d81f203f8d85e68ad585c8c0eeb66b1f0789b7631f509a3f48471ee4e9e4949152ac0",
    "venue.34962": "f630a8027b2afb02bcc9ba9d8a82ed82a1ed67526d7abd30c8413ad59701b251b324ef8d5708c24c",
    "venue.35062": "69885a2e41acea0594a94aacfaca6abe56dd042b48af17107444761c48f352a1c8e5f99138274659",
    "venue.35362": "a58b274e8621f89a2673dda6d1225be6f0bc802351be7e6c347d48de0b170b2fd8df238cdb08dab2",
    "venue.40462": "17ee5836e0dabdc3a4f25c3efaa8f758f70b1fbea7e1c8a26c968d9d8f9a2958ea0c9cedfd08e766",
    "venue.41562": "d443d852d47f1e27957c99b8b5ad905649abb4e70b6d033e1adb6f275dc791ea6beb60c3a013ce20",
    "venue.41962": "2d857c359b2e2e7d616d0bbffd8d1954841ca777bf6ca896539bf9c4c40c9881ffb539aa741eba0c",
    "venue.42062": "b42530493087c19eb434c85e89d236f927b36767020490da23c7f661778fc5855c8796813db3c5f7",
    "venue.42262": "a2f44d0ce1044a124e0a0a86fb80a0f62155f5185e6ddf003bf1d436e8313ad8ef429771f67d2a77",
    "venue.42362": "15c76fd6becb5f207c5006d16aa744fd58310215385c0b189b05846c242bc5d4d9a89a4bde092159",
    "venue.50262": "97c259d3a5106f962c76069561d6efe905b6f76f1df838bc83526330cc613c7ff3ed192560cbb13c",
    "venue.50362": "aa1cbb2a5b6162e13c02b96e474f264b3ff208e55f85ddb9a8c9c8ac0794ff84aaeb8665c336e955",
    "venue.51062": "5c3c75b5a0d59a0c456972555cb193706485bc5d8d2ee76bd633b4138ab6ff70b27c0b64625582b0",
    "venue.52562": "d1a923132e5f37ecca2fb2d63f0575c3c41e23d55d4accb1e12ecd3a3a75291d9854732950f555ce",
    "venue.52762": "c03759bc5d28d97fc6eb81f772c579097c045254b3abf493446718c676f8051f33541c0004564068",
    "venue.53162": "2c9f67b2256d61f9c9b333d5d0160a9c459db8c2ef22f577d93eece302e6a08c9220249fde3b5f33",
    "venue.53962": "945ad40859c2b22789c0660d67170775d34aed792de69100b432cd627a517f284872b5de904a39ed",
    "venue.54562": "e0afbbbab60e2d05cb34d859f98c0546637475640b7b90728d1b37b6ac1a0ade402389109ce00025",
    "venue.54862": "39fddf8bfb5719a18d3c0c192b68428d0ab344f81206b3388d2feaf2565dbf891ade3cc6dc47cabc",
    "venue.54962": "70c1e540950f9815d1d7aed19fe2693199d0bf96f1e5da9bd94a3ee79d41927257925fdb09e0435a",
    "venue.55262": "5cc04358d72f849b4dc1f351d33b6121c54d48e0bc07de9a36a700977e4f863f1347c78130ea58b1",
    "venue.55362": "8109b8d7e364e8de9c9a097d756365c7bf7f7160da3d17e76f0a2b4400bd45864a527a8278179695",
    "venue.55562": "ad1b5e84cae139a57f67ca2bc19b33efa851ac12eea0f105dc8baa63dbb0c50250f74a985ce9362e",
    "venue.55662": "7e8498cd0e975c90665662e1652978d478d548682ccb642fbb2394cb2cbef5f7377806e3808c84ab",
    "venue.55862": "ea2758ecf2d57597fa2b12d5b6d45f8428e565a3c6aa3fc0471a24b439e2c20bddbf91399036a33a",
    "venue.82262": "26b91afc47d4ba0fb7b24eb8dd4f0bddd73eb320245d08f0f9afffb541834d62b917d3d58d27d23a",
    "venue.82762": "3122f750e8a2a9b833c71e37bda48fd8ca2dc84228c6a35e5fbc6a89663a40e7322a4c47892a0704",
    "venue.82862": "87752a18a7579e62d91d5fd2f296d5e7481a3cd5ba6361b5028b08ae92edbc0e3e0463829705f515",
    "venue.82962": "267a7230e73b270c3b01094a7fb3215cde3879bb1fb6747e27faca638195a25fe4ad06847046767e",
    "venue.83162": "8cbdb57357ec2387d92ff5168c5bc0eb27c6c95dc0d68a4b8fc26da60dafc10c94ce7e232ef52091",
    "venue.83262": "99faa7155f176fa770b92ac182115c58f5a3bc988a7cad3842b188a2e9ccdcb9fddfec2af8324d44",
    "venue.83362": "668c04d3da52aea9b1439a139b7ec73ff126cc3f8d85ffffae98423c3c6893f048cc753bc1959b9b",
    "venue.83462": "08faa0140f1bab345900e7683a189026a3d6c06a28b67bf1b6a1c30a3c83e423238f422cbac36522",
    "venue.83562": "f61a8f5c64fc346a1978da8aa0418059db48b23deba77a2fc4110964756a3a8fb6a77ddf18269681",
    "venue.83662": "ede8ea28a91432a8944d646e1da5f62c00793d6fa1a90e5c5e85683c5caf98b11bd198799537e1dc",
    "venue.83762": "58512c6af63512ed4331ef8e9ba959b84088408b2578f7a6ab59c24861619046259c6808a831c33e",
    "venue.83862": "5d9cadb607a834dc3ea91841f0b32c363fb5cd64a92d98bef64312885eb0cb903a54f00de1521028",
    "venue.84162": "6a85ca227217e1d45451003b986da244115ee55ee3a1b670c60596c5a450c98b81b87231a9a6115d",
    "venue.84262": "42941ee8814a9acd1523669bf8389cb90a3995fde37b5857754cbf4c44c67dec34f8ca4b5a3c4d62",
    "venue.84462": "c24160e3cb6db44d988a28b7fac1090cf406717b666895f0900506569fdd18dc4420aff737b090ed",
    "venue.84562": "c333496abba198f59a5b1471644ea278a33dbedba410e113b461a8e380bc04eb8d39f7d607661073",
    "venue.84662": "cd55ab6c7685f4a2cb6f6f1b92a4922af62114197e6f82815a523757ab4450535d4281750b59abd0",
    "venue.84762": "dcd10a06833d20ee19dc593aacbdf131bed11d7da5fcc59508e300171671d951af683881b4e432e8",
    "venue.84862": "934c12b5b3ba326989370386e77aabc652458cdfca4f52ef07b124c803f33427fe40937c2fcb5599",
    "venue.85062": "6cd5f5df497ff097cfd1bbcfff19fc7e9a514d614f891fd8c32086387951538d23d16a4e8e90bcac",
    "venue.85162": "f1ec82b86701cbbb7cc4f4ac80752f169ebb9c627e605a3a9b86b6e8c0f5d4b0990487653545429e",
    "venue.85262": "1547d3e459255941d17f3536af05649258646106b340fa7bdae205565d8af8a36e182de605494b65",
    "venue.85362": "afd2a4f370731817564437acd39f4f6373bd8d1aa44cee3d47597003aaf16047500c27353810061a",
    "venue.85462": "87ec36723368977b2b299f6cc2dccf3544f526b338237d9a29f8014f176c4a23737a2c27df265f23",
    "venue.85562": "84655139baeda4acdfcee1191072eca20b5c1b0d1f12f2f6e05af89cb0fe0d2f3603ab60ac4bc759",
    "venue.85662": "1b8644122814ec992c47e3fd2db13b91da83a3bb0fc4ae44539e329753172c918cce321cf16c4b15",
    "venue.85762": "dfae9b6b417ae89fe8430bb4033e96c0fbb0d8fa10d1ac533dd569731173b469c5eb636557daddab",
    "venue.85862": "037b4ce7100820fc58c7b266193b6e3611f3d0881e81055ee146fd68036d681b711a365da3db86ca",
    "venue.85962": "b2d04ea9ab908023fd922d465d64d8e41624ad3057ba2b1ef9a2719317d909eded640eb9148707ab",
    "venue.86062": "4b046b338809f1aa9197193de8fed3364d2d6f05cbad54d96ca8e0bed1dd2386c4346cdafbed2d5b",
    "venue.86162": "6f54b2fffea271b96ac53ce2ae6871a4c6e57c7a62357640198db40322c3fbfceeba82c8aa523443",
    "venue.86262": "824103f0ef54d791ef8e702f538d5be2718e9aea73a6fd8f77ccbc688e642d3ce020927201f03f11",
    "venue.86362": "87e8e74f23d552b21030008ab3838858fa7c5ddba02779015a753eb4f8f3957414b502d8eec405a8",
    "venue.86462": "83e976d7cc01c21a800131129c86ebbd84e779d11a0c8dec2f238e1abb51232e93798c285215deff",
    "tz.admin": "e7e4f508f110e480bc5b28d5d38861c1f9fc80d5dd053068bdcf26f6ed1624b83bda06ba57d0e7c5",
    "slt.admin": "f6d69963d9155861086514e16cbffb22d44bb54ef48909562d223d17abfb6ccaa82dbca70f050a37",
    "slt.view": "a75f8c2bf2e35b3fa499c4bd24844818b0fe6ea10cbc0a9798e3dcec20d4241e93afe888b1be9686",
    "slt.exec": "8e7e9713a373ba5d35eaaf87fa286bd6e03fef8c99d83c676dbd6a66d06e15edd83ebb640f9c1195"
  }
};

// ============================================================
// ADMIN VIEW COMPONENT
// ============================================================
function AdminView({ session }) {
  const [credentials, setCredentials] = React.useState([]);
  const [newUsername, setNewUsername] = React.useState('');
  const [newPassword, setNewPassword] = React.useState('');
  const [newRole, setNewRole] = React.useState('venue');
  const [newScope, setNewScope] = React.useState('');
  const [newAllowed, setNewAllowed] = React.useState('');

  const [editingUser, setEditingUser] = React.useState(null);
  const [editPassword, setEditPassword] = React.useState('');

  // Vault reveal state
  const [revealedUser, setRevealedUser] = React.useState(null);
  const [revealedPassword, setRevealedPassword] = React.useState('');
  const [revealLoading, setRevealLoading] = React.useState(false);

  const [error, setError] = React.useState('');
  const [success, setSuccess] = React.useState('');

  const vaultEnabled = !!(window.CREDENTIAL_VAULT && window.CREDENTIAL_VAULT.adminKeys && window.CREDENTIAL_VAULT.credentials);

  React.useEffect(() => { loadCreds(); }, []);

  // Auto-hide revealed password after 60 seconds
  React.useEffect(() => {
    if (revealedUser) {
      var timer = setTimeout(function() {
        setRevealedUser(null);
        setRevealedPassword('');
      }, 60000);
      return function() { clearTimeout(timer); };
    }
  }, [revealedUser]);

  const loadCreds = () => {
    const db = window.VENUE_AUTH.getCredentials();
    setCredentials(db);
  };

  // --- Vault password reveal ---
  const handleRevealPassword = async (targetUsername) => {
    setError('');
    setSuccess('');

    if (!vaultEnabled) {
      setError('Credential vault not configured. Load CREDENTIAL_VAULT data first.');
      return;
    }

    var adminPwd = prompt('🔐 Verify your admin identity to view this credential.\n\nEnter your admin password:');
    if (!adminPwd) return;

    setRevealLoading(true);
    try {
      var decrypted = await vaultGetPassword(session.username, adminPwd, targetUsername);
      if (decrypted) {
        setRevealedUser(targetUsername);
        setRevealedPassword(decrypted);
        setSuccess('Password decrypted. Auto-hides in 60 seconds.');
      } else {
        setError('Incorrect admin password or credential not found in vault.');
      }
    } catch (e) {
      setError('Decryption failed: ' + e.message);
    }
    setRevealLoading(false);
  };

  // --- Existing handlers ---
  const handleCreateAccess = (e) => {
    e.preventDefault();
    setError('');
    setSuccess('');

    const uname = newUsername.trim().toLowerCase();
    const pword = newPassword.trim();
    const scope = newScope.trim();
    const allowed = newAllowed.trim();

    if (!uname || !pword || !scope) {
      setError('Please fill out Username, Password, and Scope Name.');
      return;
    }
    if (newRole === 'venue' && !allowed) {
      setError('Please provide the single Location ID for a venue account.');
      return;
    }
    const exists = credentials.some(user => user.u === uname);
    if (exists) {
      setError('Username "' + uname + '" already exists.');
      return;
    }

    const hashed = window.VENUE_AUTH.hashPassword(pword);
    const newEntry = {
      u: uname,
      h: hashed,
      r: newRole,
      s: scope,
      a: newRole === 'slt' ? 'ALL' : allowed
    };

    const updatedDb = [...credentials, newEntry];
    window.VENUE_AUTH.saveCredentials(updatedDb);
    setCredentials(updatedDb);
    setSuccess('Successfully provisioned access for user "' + uname + '"!');
    setNewUsername(''); setNewPassword(''); setNewRole('venue'); setNewScope(''); setNewAllowed('');
  };

  const handleKillAccess = (username) => {
    if (username === session.username) {
      setError("Security violation: You cannot kill your own logged-in admin session.");
      return;
    }
    const confirmKill = window.confirm('Are you sure you want to permanently revoke access for user "' + username + '"?');
    if (!confirmKill) return;
    setError(''); setSuccess('');
    const updatedDb = credentials.filter(user => user.u !== username);
    window.VENUE_AUTH.saveCredentials(updatedDb);
    setCredentials(updatedDb);
    setSuccess('Successfully revoked access for user "' + username + '".');
  };

  const handleStartEditPassword = (user) => {
    setEditingUser(user.u);
    setEditPassword('');
    setRevealedUser(null);
    setRevealedPassword('');
    setError(''); setSuccess('');
  };

  const handleSavePassword = (e) => {
    e.preventDefault();
    setError(''); setSuccess('');
    const pword = editPassword.trim();
    if (!pword) { setError('Password cannot be empty.'); return; }

    const hashed = window.VENUE_AUTH.hashPassword(pword);
    const updatedDb = credentials.map(user => {
      if (user.u === editingUser) return { ...user, h: hashed };
      return user;
    });
    window.VENUE_AUTH.saveCredentials(updatedDb);
    setCredentials(updatedDb);
    setSuccess('Successfully updated password for user "' + editingUser + '".');
    setEditingUser(null); setEditPassword('');
  };

  return (
    <div className="section-grid">
      <div className="page-head">
        <div>
          <h1>Credentials & Access Management</h1>
          <p>Securely manage login credentials, provision new roles, and revoke real-time system access.</p>
        </div>
        {vaultEnabled && (
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: '#ecfdf5', border: '1px solid #10b981', padding: '4px 12px', borderRadius: 8 }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#059669" strokeWidth="2.5"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
            <span style={{ fontSize: 11, fontWeight: 700, color: '#065f46' }}>Vault Active</span>
          </div>
        )}
      </div>

      {error && <div className="login-error" style={{ marginBottom: 20 }}>{error}</div>}
      {success && (
        <div style={{ padding: '12px 18px', background: '#ecfdf5', border: '1px solid #10b981', color: '#065f46', borderRadius: '10px', fontSize: '13px', fontWeight: 600, marginBottom: 20 }}>
          {success}
        </div>
      )}

      <div className="grid grid-12" style={{ gap: '24px' }}>

        {/* Left Column: Active Credentials Table */}
        <div className="card col-8" style={{ padding: '24px 28px', background: '#fff' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: 16 }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--navy)" strokeWidth="2.5" style={{ flexShrink: 0 }}>
              <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
              <path d="M12 8v4l3 3" />
            </svg>
            <div style={{ font: "700 15px 'Space Grotesk', sans-serif", color: 'var(--navy)' }}>
              Active Authorized Accounts ({credentials.length})
            </div>
          </div>

          <div style={{ overflowX: 'auto' }}>
            <table className="seg-chart-table" style={{ fontSize: '12px' }}>
              <thead>
                <tr>
                  <th>Username</th>
                  <th>Role</th>
                  <th>Scope / Location</th>
                  <th>Allowed IDs</th>
                  <th style={{ textAlign: 'right', width: '280px' }}>Actions</th>
                </tr>
              </thead>
              <tbody>
                {credentials.map(user => (
                  <tr key={user.u} style={{ cursor: 'default' }}>
                    <td>
                      <div style={{ fontWeight: 700, color: 'var(--navy)' }}>{user.u}</div>
                      {user.u === session.username && (
                        <span style={{ fontSize: '9px', background: 'var(--navy)', color: '#fff', padding: '1px 6px', borderRadius: 4, fontWeight: 700 }}>Your Session</span>
                      )}
                    </td>
                    <td>
                      <span style={{
                        fontSize: '10px', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em',
                        background: user.r === 'slt' ? 'var(--navy)' : user.r === 'region' ? 'var(--navy-50)' : 'var(--line-2)',
                        color: user.r === 'slt' ? '#fff' : 'var(--navy)', padding: '2px 8px', borderRadius: '10px'
                      }}>
                        {user.r}
                      </span>
                    </td>
                    <td style={{ fontWeight: 500, color: 'var(--ink-2)' }}>{user.s}</td>
                    <td style={{ fontFamily: 'JetBrains Mono', fontSize: '11px', color: 'var(--ink-3)' }}>
                      {user.a === 'ALL' ? 'ALL (75)' : user.a}
                    </td>
                    <td style={{ textAlign: 'right' }}>
                      {editingUser === user.u ? (
                        /* Edit password inline form */
                        <form onSubmit={handleSavePassword} style={{ display: 'flex', gap: '6px', justifyContent: 'flex-end' }}>
                          <input
                            type="text"
                            placeholder="New password"
                            value={editPassword}
                            onChange={e => setEditPassword(e.target.value)}
                            style={{ padding: '4px 8px', fontSize: '11px', border: '1px solid var(--navy)', borderRadius: '4px', outline: 'none', width: '110px' }}
                            autoFocus
                            required
                          />
                          <button type="submit" className="seg-tab-pill active" style={{ padding: '3px 8px', fontSize: '10px' }}>Save</button>
                          <button type="button" className="logout-btn" style={{ padding: '3px 6px', fontSize: '10px' }} onClick={() => setEditingUser(null)}>Cancel</button>
                        </form>
                      ) : revealedUser === user.u ? (
                        /* Revealed password display */
                        <div style={{ display: 'flex', gap: '6px', alignItems: 'center', justifyContent: 'flex-end' }}>
                          <input
                            type="text"
                            value={revealedPassword}
                            readOnly
                            style={{
                              padding: '4px 8px', fontSize: '11px', fontFamily: 'JetBrains Mono',
                              border: '2px solid #10b981', borderRadius: '6px', background: '#ecfdf5',
                              color: '#065f46', fontWeight: 700, width: '120px', outline: 'none'
                            }}
                            onClick={e => e.target.select()}
                          />
                          <button
                            className="seg-tab-pill"
                            style={{ padding: '3px 8px', fontSize: '10px' }}
                            onClick={() => handleStartEditPassword(user)}
                          >
                            ✏️ Edit
                          </button>
                          <button
                            className="logout-btn"
                            style={{ padding: '3px 6px', fontSize: '10px' }}
                            onClick={() => { setRevealedUser(null); setRevealedPassword(''); }}
                          >
                            Hide
                          </button>
                        </div>
                      ) : (
                        /* Default action buttons */
                        <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
                          {vaultEnabled && (
                            <button
                              className="seg-tab-pill"
                              style={{ padding: '4px 10px', fontSize: '11px' }}
                              onClick={() => handleRevealPassword(user.u)}
                              disabled={revealLoading}
                            >
                              {revealLoading ? '⏳' : '🔑'} View
                            </button>
                          )}
                          <button
                            className="seg-tab-pill"
                            style={{ padding: '4px 10px', fontSize: '11px' }}
                            onClick={() => handleStartEditPassword(user)}
                          >
                            ✏️ Pass
                          </button>
                          <button
                            className="logout-btn"
                            style={{ padding: '4px 10px', fontSize: '11px', borderRadius: '999px', border: '1px solid var(--line)' }}
                            onClick={() => handleKillAccess(user.u)}
                          >
                            ❌ Kill
                          </button>
                        </div>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Right Column: Provision New Access Form */}
        <div className="card col-4" style={{ padding: '24px 28px', background: '#fff', border: '1px solid var(--line)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: 16 }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--red)" strokeWidth="2.5" style={{ flexShrink: 0 }}>
              <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
              <circle cx="8.5" cy="7" r="4" />
              <line x1="20" y1="8" x2="20" y2="14" />
              <line x1="23" y1="11" x2="17" y2="11" />
            </svg>
            <div style={{ font: "700 15px 'Space Grotesk', sans-serif", color: 'var(--red)' }}>
              Provision New User Access
            </div>
          </div>

          <form onSubmit={handleCreateAccess} style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
            <div>
              <label className="login-label">Username</label>
              <input type="text" className="login-input" placeholder="e.g. region6.manager"
                value={newUsername} onChange={e => setNewUsername(e.target.value)} required />
            </div>
            <div>
              <label className="login-label">Password</label>
              <input type="text" className="login-input" placeholder="Enter password"
                value={newPassword} onChange={e => setNewPassword(e.target.value)} required />
            </div>
            <div>
              <label className="login-label">User Role</label>
              <select className="dropdown-filter"
                style={{ width: '100%', padding: '10px 14px', border: '2px solid var(--line)', borderRadius: '10px', fontSize: '13px', fontWeight: 600 }}
                value={newRole}
                onChange={e => {
                  setNewRole(e.target.value);
                  if (e.target.value === 'slt') { setNewAllowed('ALL'); setNewScope('All 75 Venues'); }
                  else { setNewAllowed(''); setNewScope(''); }
                }}>
                <option value="slt">slt (Senior Leadership / Admin)</option>
                <option value="region">region (Region Manager)</option>
                <option value="area">area (Area Manager)</option>
                <option value="venue">venue (Venue Manager)</option>
              </select>
            </div>
            <div>
              <label className="login-label">Scope Description</label>
              <input type="text" className="login-input" placeholder="e.g. Region 1, Bali+, Serpong GF TZ"
                value={newScope} onChange={e => setNewScope(e.target.value)} disabled={newRole === 'slt'} required />
            </div>
            <div>
              <label className="login-label">Allowed Venue ID(s)</label>
              <input type="text" className="login-input"
                placeholder={newRole === 'venue' ? "Single 5-digit ID (e.g. 10262)" : "Semicolon separated (e.g. 13062; 13962)"}
                value={newAllowed} onChange={e => setNewAllowed(e.target.value)} disabled={newRole === 'slt'} required />
            </div>
            <button type="submit" className="login-btn" style={{ background: 'var(--red)', color: '#fff', border: 'none', borderRadius: '10px', padding: '12px 14px', fontWeight: 'bold', fontSize: '13px', cursor: 'pointer', marginTop: 8 }}>
              Provision Access
            </button>
          </form>
        </div>

      </div>
    </div>
  );
}

window.AdminView = AdminView;