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

  <!-- Profile info -->
  <div class="bg-ink/50 border border-white/10 rounded-2xl p-5 mb-5 flex items-center gap-4">
    <div class="w-14 h-14 rounded-full bg-gold/20 border border-gold/30 flex items-center justify-center text-gold text-xl font-semibold shrink-0">
      <?= strtoupper(substr($user['first_name'] ?? '?', 0, 1)) ?>
    </div>
    <div>
      <div class="font-medium text-base"><?= e(($user['first_name'] ?? '') . ' ' . ($user['last_name'] ?? '')) ?></div>
      <div class="text-xs uppercase tracking-widest text-gold/60 mt-0.5"><?= e($user['role'] ?? '') ?></div>
      <div class="text-bone/50 text-sm mt-1"><?= e($user['email'] ?? '') ?></div>
    </div>
  </div>

  <!-- Change password -->
  <div class="bg-ink/50 border border-white/10 rounded-2xl p-5 mb-5">
    <h2 class="text-sm font-semibold mb-4"><?= e(t('hub.account.change_password')) ?></h2>
    <form method="POST" action="<?= url('/hub/account/password') ?>" class="space-y-3">
      <?= csrf_field() ?>
      <div><label class="label"><?= e(t('hub.account.current_password')) ?></label>
        <input type="password" name="current_password" required class="input" autocomplete="current-password"></div>
      <div class="grid grid-cols-2 gap-3">
        <div><label class="label"><?= e(t('hub.account.new_password')) ?></label>
          <input type="password" name="new_password" required minlength="8" class="input" autocomplete="new-password"></div>
        <div><label class="label"><?= e(t('hub.account.confirm_password')) ?></label>
          <input type="password" name="confirm_password" required minlength="8" class="input" autocomplete="new-password"></div>
      </div>
      <p class="text-xs text-bone/40"><?= e(t('hub.account.password_hint')) ?></p>
      <button class="btn-ghost text-xs px-5 py-2.5"><?= e(t('hub.account.save_password')) ?></button>
    </form>
  </div>

  <!-- Change PIN -->
  <div class="bg-ink/50 border border-white/10 rounded-2xl p-5">
    <h2 class="text-sm font-semibold mb-1"><?= e(t('hub.account.change_pin')) ?></h2>
    <p class="text-xs text-bone/40 mb-4"><?= e(t('hub.account.pin_hint')) ?></p>
    <form method="POST" action="<?= url('/hub/account/pin') ?>" class="space-y-3">
      <?= csrf_field() ?>
      <?php if (!empty($user['pin_hash'])): ?>
        <div><label class="label"><?= e(t('hub.account.current_pin')) ?></label>
          <input type="password" name="current_pin" inputmode="numeric" maxlength="6" required class="input w-32 text-center tracking-[0.5em]" autocomplete="off"></div>
      <?php endif; ?>
      <div class="grid grid-cols-2 gap-3">
        <div><label class="label"><?= e(t('hub.account.new_pin')) ?></label>
          <input type="password" name="new_pin" inputmode="numeric" maxlength="6" pattern="\d{4,6}" required class="input text-center tracking-[0.5em]" autocomplete="off"></div>
        <div><label class="label"><?= e(t('hub.account.confirm_pin')) ?></label>
          <input type="password" name="confirm_pin" inputmode="numeric" maxlength="6" pattern="\d{4,6}" required class="input text-center tracking-[0.5em]" autocomplete="off"></div>
      </div>
      <button class="btn-ghost text-xs px-5 py-2.5"><?= e(t('hub.account.save_pin')) ?></button>
    </form>
  </div>

  <!-- Schedule management (Artist only) -->
  <?php if (!empty($artistProfile)): ?>
  <div class="bg-ink/50 border border-white/10 rounded-2xl p-5 mt-5" x-data="{ rows: <?= htmlspecialchars(json_encode(array_map(fn($r) => ['weekday' => $r['weekday'], 'start' => $r['start_time'], 'end' => $r['end_time']], $weekly)), ENT_QUOTES) ?> }">
    <h2 class="text-sm font-semibold mb-1"><?= e(t('hub.account.schedule_title')) ?></h2>
    <p class="text-xs text-bone/40 mb-4"><?= e(t('hub.account.schedule_hint')) ?></p>
    <form method="POST" action="<?= url('/hub/account/schedule') ?>">
      <?= csrf_field() ?>
      <div class="space-y-2 mb-4">
        <?php $days = [0=>'Sunday',1=>'Monday',2=>'Tuesday',3=>'Wednesday',4=>'Thursday',5=>'Friday',6=>'Saturday']; ?>
        <template x-for="(row, i) in rows" :key="i">
          <div class="flex items-center gap-2">
            <select :name="'days[' + i + ']'" x-model="row.weekday" class="input w-32 text-sm">
              <?php foreach ($days as $v => $label): ?>
                <option value="<?= $v ?>"><?= $label ?></option>
              <?php endforeach; ?>
            </select>
            <input type="time" :name="'start[' + i + ']'" x-model="row.start" class="input w-28 text-sm">
            <span class="text-bone/40 text-xs">–</span>
            <input type="time" :name="'end[' + i + ']'" x-model="row.end" class="input w-28 text-sm">
            <button type="button" @click="rows.splice(i,1)" class="text-bone/30 hover:text-red-400 text-xs ml-1">✕</button>
          </div>
        </template>
      </div>
      <button type="button" @click="rows.push({weekday:1,start:'10:00',end:'18:00'})"
              class="text-xs text-gold hover:underline mb-4 block"><?= e(t('hub.account.add_day')) ?></button>
      <button class="btn-ghost text-xs px-5 py-2.5"><?= e(t('hub.account.save_schedule')) ?></button>
    </form>
  </div>
  <?php endif; ?>
</div>
