<?php require __DIR__.'/../layouts/header.php'; ?>
<div class="section-head">
  <div class="eyebrow">Discover</div>
  <h1>People worldwide</h1>
</div>

<div class="spark-bar">
  <div class="spark-ico">✨</div>
  <div>
    <strong>Swipe to decide</strong>
    <span>← Pass · Like → · Tap photo edges to browse pics · Rewind undoes last swipe</span>
  </div>
</div>

<div class="discover-wrap"
     data-action-url="<?= e(url('discover/action')) ?>"
     data-csrf="<?= e(Csrf::token()) ?>">
<?php if (!empty($profiles)): ?>
  <?php $card = $profiles[0]; ?>
  <?php
    $cardPhotos = [];
    if (!empty($card['photos']) && is_array($card['photos'])) {
        $cardPhotos = $card['photos'];
    } elseif (!empty($card['photo'])) {
        $cardPhotos = [$card['photo']];
    }
  ?>
  <div class="discover-stack" id="discover-stack">
    <article class="discover-card is-front" data-id="<?= (int)$card['id'] ?>" id="swipe-card">
      <div class="stamp stamp-like">LIKE</div>
      <div class="stamp stamp-nope">NOPE</div>
      <div class="stamp stamp-super">SUPER</div>
      <div class="card-photos" id="card-photos">
        <?php if ($cardPhotos): ?>
          <?php foreach ($cardPhotos as $i => $ph): ?>
            <img class="photo card-photo <?= $i === 0 ? 'is-active' : '' ?>"
                 src="<?= url($ph) ?>"
                 alt="<?= e($card['name']) ?>"
                 loading="<?= $i === 0 ? 'eager' : 'lazy' ?>"
                 draggable="false"
                 data-i="<?= $i ?>">
          <?php endforeach; ?>
          <?php if (count($cardPhotos) > 1): ?>
            <div class="photo-bars">
              <?php foreach ($cardPhotos as $i => $_): ?>
                <span class="photo-bar <?= $i === 0 ? 'is-active' : '' ?>" data-i="<?= $i ?>"></span>
              <?php endforeach; ?>
            </div>
            <button type="button" class="photo-hit left" id="photo-prev" aria-label="Previous photo"></button>
            <button type="button" class="photo-hit right" id="photo-next" aria-label="Next photo"></button>
          <?php endif; ?>
        <?php else: ?>
          <div class="photo-fallback"><?= e(mb_substr($card['name'], 0, 1)) ?></div>
        <?php endif; ?>
      </div>
      <div class="info">
        <h2>
          <?= e($card['name']) ?><?php if (!empty($card['age'])): ?>, <?= (int)$card['age'] ?><?php endif; ?>
          <?= paid_badge_html((int)($card['id'] ?? 0)) ?>
        </h2>
        <div class="detail-line">
          <?php
            $place = trim(($card['location_label'] ?? '') !== '' ? ($card['location_label'] ?? '') : ($card['city'] ?? ''));
            if ($place === '' && !empty($card['city'])) $place = $card['city'];
          ?>
          <?php if ($place !== '' || !empty($card['country'])): ?><span>📍 <?= e($place !== '' ? $place : '') ?><?= ($place !== '' && !empty($card['country'])) ? ', ' : '' ?><?= e($card['country'] ?? '') ?></span><?php endif; ?>
          <?php if (!empty($card['gender'])): ?><span class="detail-chip"><?= e($card['gender']) ?></span><?php endif; ?>
          <?php if (!empty($card['relationship_goal'])): ?><span class="detail-chip"><?= e($card['relationship_goal']) ?></span><?php endif; ?>
        </div>
        <?php if (!empty($card['bio'])): ?>
          <p><?= e(mb_substr($card['bio'], 0, 110)) ?><?= mb_strlen($card['bio'] ?? '') > 110 ? '…' : '' ?></p>
        <?php endif; ?>
        <?php if (!empty($card['hobbies'])): ?>
          <p style="opacity:.9">Hobbies: <?= e(mb_substr($card['hobbies'], 0, 60)) ?></p>
        <?php endif; ?>
        <?php if (!empty($card['interests'])): ?>
          <div class="tags">
            <?php foreach (array_slice(explode(',', $card['interests']), 0, 5) as $tag): ?>
              <span class="tag"><?= e(trim($tag)) ?></span>
            <?php endforeach; ?>
          </div>
        <?php endif; ?>
      </div>
    </article>
    <?php if (count($profiles) > 1): $peek = $profiles[1]; ?>
    <article class="discover-card is-peek" aria-hidden="true">
      <?php if (!empty($peek['photo'])): ?>
        <img class="photo" src="<?= url($peek['photo']) ?>" alt="" loading="lazy" draggable="false">
      <?php else: ?>
        <div class="photo-fallback"><?= e(mb_substr($peek['name'], 0, 1)) ?></div>
      <?php endif; ?>
    </article>
    <?php endif; ?>
  </div>

  <p class="discover-meta" style="margin-top:12px">
    <a class="btn ghost small" href="<?= url('profile/view?id='.(int)$card['id']) ?>">View full profile</a>
    <?php if (!empty($card['common_interest_count'])): ?>
      · <span class="badge"><?= (int)$card['common_interest_count'] ?> shared</span>
    <?php endif; ?>
    <?php if (count($cardPhotos) > 1): ?>
      · <?= count($cardPhotos) ?> photos
    <?php endif; ?>
  </p>
  <div class="discover-actions" id="discover-actions">
    <form method="post" action="<?= url('discover/action') ?>" id="form-pass"><?= csrf() ?>
      <input type="hidden" name="target_id" value="<?= (int)$card['id'] ?>">
      <input type="hidden" name="action" value="pass">
      <button class="btn icon pass" type="submit" title="Pass (swipe left)" aria-label="Pass">✕</button>
    </form>
    <form method="post" action="<?= url('discover/rewind') ?>" id="form-rewind"><?= csrf() ?>
      <button class="btn icon rewind" type="submit" title="Rewind last swipe" aria-label="Rewind">↩</button>
    </form>
    <?php if (!empty($plan) && has_plan($u['id'], 'Gold')): ?>
    <form method="post" action="<?= url('discover/action') ?>" id="form-super"><?= csrf() ?>
      <input type="hidden" name="target_id" value="<?= (int)$card['id'] ?>">
      <input type="hidden" name="action" value="superlike">
      <button class="btn icon super" type="submit" title="Super Like" aria-label="Super Like">★</button>
    </form>
    <?php endif; ?>
    <form method="post" action="<?= url('discover/action') ?>" id="form-like"><?= csrf() ?>
      <input type="hidden" name="target_id" value="<?= (int)$card['id'] ?>">
      <input type="hidden" name="action" value="like">
      <button class="btn icon like" type="submit" title="Like (swipe right)" aria-label="Like">♥</button>
    </form>
  </div>
  <p class="discover-meta"><?= count($profiles) ?> in stack · Swipe left = pass · Swipe right = like</p>

<?php else: ?>
  <div class="discover-empty panel">
    <div class="orb">V</div>
    <h2>You’re all caught up</h2>
    <p class="muted">No more profiles right now. Use Rewind if you passed someone by mistake, widen preferences, or check back later.</p>
    <form method="post" action="<?= url('discover/rewind') ?>" style="display:inline"><?= csrf() ?>
      <button class="btn ghost" type="submit">↩ Rewind last swipe</button>
    </form>
    <a class="btn" href="<?= url('profile') ?>">Edit preferences</a>
  </div>
<?php endif; ?>
</div>

<div id="match-toast" class="match-toast" hidden>
  <div class="match-toast-inner">
    <div class="match-burst" aria-hidden="true"></div>
    <h2>It’s a match!</h2>
    <p>You liked each other. Say hello.</p>
    <button type="button" class="btn" id="match-toast-dismiss">Continue</button>
    <a class="btn ghost" href="<?= url('matches') ?>">Open matches</a>
  </div>
</div>
<?php require __DIR__.'/../layouts/footer.php'; ?>
