<?php /** @var array $staff; @var array $artists */ ?>
<div class="p-5 md:p-8 max-w-5xl">
  <div class="text-xs uppercase tracking-[0.3em] text-gold"><?= e(t('admin.staff.kicker')) ?></div>
  <h1 class="mt-1 text-2xl md:text-3xl font-display mb-6"><?= e(t('admin.staff.title')) ?></h1>

  <!-- Create new staff/artist -->
  <section class="bg-ink/50 border border-white/10 rounded-2xl p-5 mb-6">
    <h2 class="text-xs uppercase tracking-widest text-gold mb-4"><?= e(t('admin.staff.add_new')) ?></h2>
    <form method="POST" action="<?= url('/admin/staff') ?>" class="grid grid-cols-2 md:grid-cols-3 gap-4">
      <?= csrf_field() ?>
      <div><label class="label"><?= e(t('admin.staff.username')) ?></label><input name="username" required class="input"></div>
      <div><label class="label"><?= e(t('form.first_name')) ?></label><input name="first_name" required class="input"></div>
      <div><label class="label"><?= e(t('form.last_name')) ?></label><input name="last_name" class="input"></div>
      <div><label class="label"><?= e(t('form.email')) ?></label><input name="email" type="email" class="input"></div>
      <div><label class="label"><?= e(t('admin.staff.temp_password')) ?></label><input name="password" type="text" required minlength="8" class="input"></div>
      <div>
        <label class="label"><?= e(t('admin.staff.role')) ?></label>
        <select name="role" class="input" id="role-select" onchange="document.getElementById('artist-link').style.display=this.value==='ARTIST'?'block':'none'">
          <option value="STAFF">Staff</option>
          <option value="ADMIN">Admin</option>
          <option value="ARTIST">Artist</option>
        </select>
      </div>
      <div id="artist-link" style="display:none" class="col-span-2 md:col-span-3">
        <label class="label"><?= e(t('admin.staff.link_artist_profile')) ?></label>
        <select name="artist_profile_id" class="input max-w-xs">
          <option value=""><?= e(t('admin.staff.no_link')) ?></option>
          <?php foreach ($artists as $art): ?>
            <option value="<?= e($art['id']) ?>"><?= e($art['display_name']) ?></option>
          <?php endforeach; ?>
        </select>
      </div>
      <div class="col-span-2 md:col-span-3"><button class="btn-gold"><?= e(t('admin.staff.create_btn')) ?></button></div>
    </form>
  </section>

  <!-- Staff list -->
  <div class="bg-ink/50 border border-white/10 rounded-2xl overflow-hidden">
    <table class="w-full text-sm">
      <thead class="bg-white/5 text-xs uppercase tracking-widest text-bone/40">
        <tr>
          <th class="text-left px-4 py-3"><?= e(t('admin.staff.username')) ?></th>
          <th class="text-left px-4 py-3"><?= e(t('form.name')) ?></th>
          <th class="text-left px-4 py-3"><?= e(t('admin.staff.role')) ?></th>
          <th class="text-left px-4 py-3">PIN</th>
          <th class="text-left px-4 py-3"><?= e(t('admin.staff.status')) ?></th>
          <th class="px-4 py-3"></th>
        </tr>
      </thead>
      <tbody>
        <?php foreach ($staff as $s): ?>
          <tr class="border-t border-white/5" x-data="{ pwOpen: false }">
            <td class="px-4 py-3 font-mono text-xs"><?= e($s['username'] ?? '') ?></td>
            <td class="px-4 py-3"><?= e(trim(($s['first_name'] ?? '') . ' ' . ($s['last_name'] ?? ''))) ?></td>
            <td class="px-4 py-3 text-xs uppercase tracking-widest text-gold/70"><?= e($s['role'] ?? '') ?></td>
            <td class="px-4 py-3 text-xs"><?= !empty($s['pin_hash']) ? '<span class="text-green-400">✓ ' . e(t('admin.staff.pin_set')) . '</span>' : '<span class="text-bone/40">' . e(t('admin.staff.pin_not_set')) . '</span>' ?></td>
            <td class="px-4 py-3 text-xs"><?= empty($s['is_active']) ? '<span class="text-red-400">' . e(t('admin.staff.disabled')) . '</span>' : '<span class="text-green-400">' . e(t('admin.staff.active')) . '</span>' ?></td>
            <td class="px-4 py-3 text-right">
              <div class="flex items-center gap-2 justify-end flex-wrap">
                <!-- Reset PIN -->
                <form method="POST" action="<?= url('/admin/staff/' . e($s['id']) . '/reset-pin') ?>">
                  <?= csrf_field() ?>
                  <button class="text-xs text-bone/50 hover:text-gold transition-colors"><?= e(t('admin.staff.reset_pin')) ?></button>
                </form>
                <!-- Reset password (expand inline) -->
                <button type="button" @click="pwOpen = !pwOpen" class="text-xs text-bone/50 hover:text-gold transition-colors"><?= e(t('admin.staff.reset_password')) ?></button>
                <!-- Disable / enable -->
                <?php if (!empty($s['is_active'])): ?>
                  <form method="POST" action="<?= url('/admin/staff/' . e($s['id']) . '/disable') ?>">
                    <?= csrf_field() ?>
                    <button class="text-xs text-red-400/70 hover:text-red-400 transition-colors"><?= e(t('admin.staff.disable')) ?></button>
                  </form>
                <?php else: ?>
                  <form method="POST" action="<?= url('/admin/staff/' . e($s['id']) . '/enable') ?>">
                    <?= csrf_field() ?>
                    <button class="text-xs text-green-400/70 hover:text-green-400 transition-colors"><?= e(t('admin.staff.enable')) ?></button>
                  </form>
                <?php endif; ?>
              </div>
              <!-- Reset password inline form -->
              <div x-show="pwOpen" x-cloak class="mt-2 text-left">
                <form method="POST" action="<?= url('/admin/staff/' . e($s['id']) . '/reset-password') ?>" class="flex gap-2">
                  <?= csrf_field() ?>
                  <input type="text" name="new_password" required minlength="8"
                         placeholder="New password (8+ chars)"
                         class="input text-xs py-1.5 px-2 flex-1">
                  <button class="btn-gold text-xs px-3 py-1.5"><?= e(t('common.save')) ?></button>
                </form>
              </div>
            </td>
          </tr>
        <?php endforeach; ?>
      </tbody>
    </table>
  </div>
</div>
