<?php
$currentUser = \App\Auth::user();
$currentRole = $currentUser['role'] ?? '';
$wantsAdmin = str_starts_with(($_SERVER['REQUEST_URI'] ?? ''), '/admin');
?>
<!DOCTYPE html>
<html lang="<?= e(locale()) ?>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>403 · <?= e(t('error.403.title')) ?></title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config={theme:{extend:{colors:{ink:'#0a0a0a',slate:'#111113',bone:'#f5f5f2',gold:'#d4af37'},fontFamily:{sans:['Inter','system-ui','sans-serif'],display:['Playfair Display','serif']}}}};</script>
<link rel="stylesheet" href="<?= asset('css/site.css') ?>">
<style>[x-cloak]{display:none!important}</style>
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</head>
<body class="bg-ink text-bone font-sans antialiased min-h-screen flex items-center justify-center">
  <div class="text-center px-6 max-w-md">
    <div class="w-20 h-20 rounded-full bg-gold/10 border border-gold/30 flex items-center justify-center mx-auto mb-6">
      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#d4af37" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
    </div>
    <div class="text-6xl font-display text-gold">403</div>
    <h1 class="mt-3 text-2xl font-display"><?= e(t('error.403.title')) ?></h1>

    <?php if ($wantsAdmin && $currentUser && $currentRole !== 'ADMIN'): ?>
      <!-- User is logged in as staff/artist but trying to access admin -->
      <p class="mt-3 text-bone/50 text-sm leading-relaxed">
        <?= e(t('error.403.logged_as', ['role' => $currentRole, 'name' => ($currentUser['first_name'] ?? '')])) ?>
      </p>
      <p class="mt-1 text-bone/40 text-sm"><?= e(t('error.403.need_admin')) ?></p>

      <div class="mt-8 space-y-3" x-data="{ showLogin: false }">
        <button @click="showLogin = true" x-show="!showLogin" class="btn-gold w-full"><?= e(t('error.403.switch_account')) ?></button>

        <!-- Inline admin login form -->
        <div x-show="showLogin" x-cloak class="bg-slate border border-white/10 rounded-2xl p-6 text-left">
          <h3 class="text-sm font-semibold text-gold mb-4"><?= e(t('error.403.login_as_admin')) ?></h3>
          <form method="POST" action="<?= url('/hub/login') ?>" class="space-y-3">
            <?= csrf_field() ?>
            <input type="hidden" name="_redirect" value="<?= e($_SERVER['REQUEST_URI'] ?? '/admin') ?>">
            <div>
              <label class="label"><?= e(t('hub.pin.username')) ?></label>
              <input name="username" required class="input" autocomplete="username">
            </div>
            <div>
              <label class="label"><?= e(t('hub.login.password')) ?></label>
              <input name="password" type="password" required class="input" autocomplete="current-password">
            </div>
            <button class="btn-gold w-full text-sm"><?= e(t('hub.login.submit')) ?></button>
          </form>
          <button @click="showLogin = false" class="mt-3 text-xs text-bone/40 hover:text-bone transition-colors w-full text-center"><?= e(t('common.cancel')) ?></button>
        </div>

        <a href="<?= url('/hub') ?>" class="block text-sm text-bone/40 hover:text-bone transition-colors"><?= e(t('error.403.back_to_hub')) ?></a>
      </div>

    <?php else: ?>
      <p class="mt-3 text-bone/50"><?= e(t('error.403.generic')) ?></p>
      <div class="mt-8 flex flex-col gap-3">
        <a href="<?= url('/hub') ?>" class="btn-gold"><?= e(t('error.403.back_to_hub')) ?></a>
        <a href="<?= url('/hub/login') ?>" class="text-sm text-bone/40 hover:text-bone transition-colors"><?= e(t('error.403.try_login')) ?></a>
      </div>
    <?php endif; ?>
  </div>
</body>
</html>
