<?php require __DIR__.'/../layouts/header.php'; ?>
<div class="chat-page compact-chat">
  <div class="chat panel"
       data-partner="<?= (int)$partnerUser['id'] ?>"
       data-poll="<?= e(url('chat/poll')) ?>"
       data-typing="<?= e(url('chat/typing')) ?>"
       data-csrf="<?= e(Csrf::token()) ?>">
    <div class="chat-head">
      <a href="<?= url('matches') ?>" class="btn ghost small" aria-label="Back">‹</a>
      <a href="<?= url('profile/view?id='.(int)$partnerUser['id']) ?>" class="mini-avatar" title="View profile">
        <?php if (!empty($partnerUser['photo'])): ?><img src="<?= url($partnerUser['photo']) ?>" alt=""><?php else: ?>V<?php endif; ?>
      </a>
      <div style="min-width:0;flex:1">
        <h2>
          <a href="<?= url('profile/view?id='.(int)$partnerUser['id']) ?>"><?= e($partnerUser['name']) ?></a>
          <?= paid_badge_html((int)$partnerUser['id']) ?>
        </h2>
        <small id="presence-label">
          <?php if (!empty($online)): ?>
            <span class="online-dot"></span> Active now
          <?php else: ?>
            <?= e($partnerUser['city'] ?? '') ?><?= !empty($partnerUser['relationship_goal']) ? ' · '.e($partnerUser['relationship_goal']) : '' ?>
          <?php endif; ?>
        </small>
        <div id="typing-label" class="typing-label" hidden>typing…</div>
      </div>
      <div class="chat-actions">
        <a class="btn small" href="<?= url('chat/call?user='.(int)$partnerUser['id']) ?>" title="Video call">📹</a>
        <details class="report-menu">
          <summary class="btn ghost small">···</summary>
          <div class="report-form">
            <a class="btn ghost small" style="width:100%;text-align:center" href="<?= url('profile/view?id='.(int)$partnerUser['id']) ?>">View profile</a>
            <form method="post" action="<?= url('chat/unmatch') ?>" onsubmit="return confirm('Unmatch?');"><?= csrf() ?>
              <input type="hidden" name="user_id" value="<?= (int)$partnerUser['id'] ?>">
              <button class="btn ghost small" type="submit" style="width:100%">Unmatch</button>
            </form>
            <form method="post" action="<?= url('block') ?>" onsubmit="return confirm('Block this person?');"><?= csrf() ?>
              <input type="hidden" name="user_id" value="<?= (int)$partnerUser['id'] ?>">
              <button class="btn ghost small" type="submit" style="width:100%">Block</button>
            </form>
            <form method="post" action="<?= url('report') ?>"><?= csrf() ?>
              <input type="hidden" name="user_id" value="<?= (int)$partnerUser['id'] ?>">
              <select name="reason" required>
                <option value="Harassment">Harassment</option>
                <option value="Spam / scam">Spam / scam</option>
                <option value="Fake profile">Fake profile</option>
                <option value="Other">Other</option>
              </select>
              <textarea name="details" placeholder="Optional details" maxlength="2000" rows="2"></textarea>
              <button class="btn small" type="submit" style="width:100%">Report</button>
            </form>
          </div>
        </details>
      </div>
    </div>

    <div class="messages" id="messages">
      <?php foreach ($messages as $m): ?>
        <div class="msg <?= ((int)$m['sender_id'] === (int)$u['id']) ? 'mine' : '' ?>" data-id="<?= (int)$m['id'] ?>">
          <?= nl2br(e($m['body'])) ?>
          <small><?= e(date('g:ia', strtotime($m['created_at']))) ?><?= ((int)$m['is_read'] && (int)$m['sender_id'] === (int)$u['id']) ? ' · Read' : '' ?></small>
        </div>
      <?php endforeach; ?>
      <?php if (!$messages): ?>
        <div class="empty" id="chat-empty"><p>You’re matched — say hi 👋</p></div>
        <?php if (!empty($icebreakers) && can_foreach($icebreakers)): ?>
          <div class="icebreakers" id="icebreakers">
            <p class="muted" style="font-size:12px;margin:8px 0 4px">Icebreakers — tap to use</p>
            <?php foreach ($icebreakers as $line): ?>
              <button type="button" class="icebreaker-chip" data-line="<?= e($line) ?>"><?= e($line) ?></button>
            <?php endforeach; ?>
          </div>
        <?php endif; ?>
      <?php endif; ?>
    </div>

    <form class="composer" id="chat-form" method="post" action="<?= url('chat/send') ?>">
      <?= csrf() ?>
      <input type="hidden" name="receiver_id" value="<?= (int)$partnerUser['id'] ?>">
      <input type="hidden" name="ajax" value="1">
      <input name="body" id="chat-body" maxlength="2000" autocomplete="off" placeholder="Message…" required>
      <button class="btn" type="submit">Send</button>
    </form>
  </div>
</div>
<script>
(function(){
  document.querySelectorAll('.icebreaker-chip').forEach(function(btn){
    btn.addEventListener('click', function(){
      var input = document.getElementById('chat-body');
      if (!input) return;
      input.value = btn.getAttribute('data-line') || '';
      input.focus();
      var box = document.getElementById('icebreakers');
      if (box) box.style.opacity = '0.5';
    });
  });
})();
</script>
<?php require __DIR__.'/../layouts/footer.php'; ?>
