<?php
$active = 'profile';
$pageTitle = 'My Profile';
$layoutHeader = $user['is_super_admin']
    ? __DIR__ . '/../layout/admin_header.php'
    : __DIR__ . '/../layout/workspace_header.php';
if ($user['is_super_admin']) { $admin = $user; }
require $layoutHeader;
?>

<div class="topbar">
  <div>
    <h1>My Profile &amp; Security</h1>
    <div class="crumbs">Workspace → Profile</div>
  </div>
  <div class="user-chip"><span class="dot"></span> <?= htmlspecialchars($user['name']) ?></div>
</div>

<?php if ($flash): ?>
  <div class="alert alert-<?= $flash['type'] === 'error' ? 'error' : 'success' ?>"><?= htmlspecialchars($flash['msg']) ?></div>
<?php endif; ?>

<div class="card" style="max-width:560px;">
  <h3>Account Info</h3>
  <p style="color:var(--text-muted);font-size:13px;margin:0 0 4px;">Name</p>
  <p style="margin:0 0 14px;font-weight:600;"><?= htmlspecialchars($user['name']) ?></p>
  <p style="color:var(--text-muted);font-size:13px;margin:0 0 4px;">Username</p>
  <p style="margin:0 0 14px;font-weight:600;"><?= htmlspecialchars($user['username'] ?? '—') ?></p>
  <p style="color:var(--text-muted);font-size:13px;margin:0 0 4px;">Role</p>
  <p style="margin:0;font-weight:600;"><?= htmlspecialchars($user['roles'][0]['name'] ?? ($user['is_super_admin'] ? 'Super Admin' : '—')) ?></p>
</div>

<div class="card" style="max-width:560px;">
  <h3>Change Password</h3>
  <form method="POST" action="/profile/change-password">
    <div class="field"><label>Current Password</label><input type="password" name="current_password" required></div>
    <div class="field"><label>New Password</label><input type="password" name="new_password" required minlength="8"></div>
    <button type="submit" class="btn-primary">Update Password</button>
  </form>
</div>

<div class="card" style="max-width:560px;">
  <h3>Two-Factor Authentication</h3>

  <?php if (!empty($user['raw']['two_factor_enabled'])): ?>
    <p style="color:var(--success);font-weight:700;font-size:13px;">✔ Enabled on this account</p>
    <form method="POST" action="/profile/2fa/disable">
      <div class="field"><label>Confirm Password to Disable</label><input type="password" name="password" required></div>
      <button type="submit" class="btn-danger" style="padding:10px 18px;font-size:13px;">Disable Two-Factor</button>
    </form>

  <?php elseif ($qrUrl): ?>
    <p style="font-size:13px;color:var(--text-muted);margin-bottom:12px;">
      Scan this QR code with Google Authenticator, Authy, or any TOTP app, then enter the 6-digit code it shows.
    </p>
    <img src="<?= htmlspecialchars($qrUrl) ?>" alt="2FA QR Code" style="border-radius:10px;border:1px solid var(--border);margin-bottom:14px;">

    <div class="alert" style="background:#fef3e2;color:#92600a;border:1px solid #f5dcae;">
      <strong>Getting a "page not available" error when scanning?</strong> Use the authenticator app's own
      built-in QR scanner (inside Google Authenticator / Authy — tap "+" → "Scan a QR code"), not your phone's
      regular Camera app — the regular camera can't open this type of code correctly. Or enter this key manually:
    </div>
    <div class="field">
      <label>Manual Setup Key</label>
      <div style="display:flex;gap:8px;">
        <input type="text" readonly value="<?= htmlspecialchars($pendingSecret) ?>" id="manualSecret" style="flex:1;font-family:monospace;letter-spacing:1px;">
        <button type="button" class="btn-secondary" onclick="copySecret()">📋 Copy</button>
      </div>
      <small style="color:var(--text-muted);">Account name: <?= htmlspecialchars($user['username'] ?? $user['name']) ?> · Type: Time-based</small>
    </div>

    <form method="POST" action="/profile/2fa/confirm">
      <div class="field"><label>Enter Code to Confirm</label><input type="text" name="code" maxlength="6" required autocomplete="one-time-code"></div>
      <button type="submit" class="btn-primary">Enable Two-Factor</button>
    </form>

    <script>
    function copySecret(){
      const el = document.getElementById('manualSecret');
      el.select(); el.setSelectionRange(0, 99999);
      navigator.clipboard.writeText(el.value);
    }
    </script>

  <?php else: ?>
    <p style="font-size:13px;color:var(--text-muted);margin-bottom:14px;">Not enabled. Adding two-factor authentication protects your account with a code from your phone in addition to your password.</p>
    <form method="POST" action="/profile/2fa/begin">
      <button type="submit" class="btn-primary">Set Up Two-Factor Authentication</button>
    </form>
  <?php endif; ?>
</div>

<?php require __DIR__ . '/../layout/admin_footer.php'; ?>
