<div class="toolbar">
  <h2 class="mb-0">Welcome back</h2>
  <a href="<?= url('/portal/tickets/new') ?>" class="btn btn-primary">+ Raise a support ticket</a>
</div>

<div class="stat-grid" style="grid-template-columns:repeat(auto-fit,minmax(160px,1fr))">
  <a class="stat-card stat-card-hover stat-card-link" href="<?= url('/portal/tickets?status=OPEN') ?>">
    <div class="stat-label">Open tickets</div>
    <div class="stat-value"><?= $openCount ?></div>
    <div class="stat-sub">click to view →</div>
  </a>
  <a class="stat-card stat-card-hover stat-card-link" href="<?= url('/portal/tickets?status=PENDING_CUSTOMER') ?>">
    <div class="stat-card-head"><span class="stat-label">Awaiting your reply</span><?php if ($awaitingReplyCount > 0) : ?><span class="stat-icon stat-icon-amber">✉️</span><?php endif; ?></div>
    <div class="stat-value <?= $awaitingReplyCount > 0 ? 'stat-amber' : '' ?>"><?= $awaitingReplyCount ?></div>
    <div class="stat-sub"><?= $awaitingReplyCount > 0 ? "we're waiting to hear back from you" : 'click to view →' ?></div>
  </a>
  <a class="stat-card stat-card-hover stat-card-link" href="<?= url('/portal/tickets?status=RESOLVED_MONTH') ?>">
    <div class="stat-label">Resolved this month</div>
    <div class="stat-value stat-green"><?= $resolvedThisMonth ?></div>
    <div class="stat-sub">click to view →</div>
  </a>
  <a class="stat-card stat-card-hover stat-card-link" href="<?= url('/portal/tickets') ?>">
    <div class="stat-label">All-time tickets</div>
    <div class="stat-value"><?= $totalCount ?></div>
    <div class="stat-sub">click to view →</div>
  </a>
</div>

<div class="ticket-grid" style="grid-template-columns:1fr 320px">
  <div class="card">
    <div class="card-header"><h3>Recent tickets</h3><a href="<?= url('/portal/tickets') ?>" class="text-sm">View all →</a></div>
    <div class="table-wrap">
      <table class="table">
        <thead><tr><th>Ticket</th><th>Subject</th><th>Status</th><th>Updated</th></tr></thead>
        <tbody>
        <?php foreach ($recentTickets as $t) : ?>
          <tr>
            <td class="mono"><a class="row-link" href="<?= url('/portal/tickets/' . $t['id']) ?>"><?= e($t['ticket_no']) ?></a></td>
            <td><?= e($t['subject']) ?></td>
            <td><span class="<?= status_badge_class($t['status']) ?>"><?= status_label($t['status']) ?></span></td>
            <td class="text-sm"><?= fmt_dt($t['updated_at']) ?></td>
          </tr>
        <?php endforeach; ?>
        <?php if (empty($recentTickets)) : ?><tr><td colspan="4"><div class="empty-state">No tickets yet — raise your first one above.</div></td></tr><?php endif; ?>
        </tbody>
      </table>
    </div>
  </div>
  <div class="card">
    <div class="card-header"><h3>Tickets by status</h3><span class="text-faint text-sm">click a row to drill down</span></div>
    <div class="card-body">
      <?php $statusMax = max(1, ...array_map(fn($r) => (int)$r['c'], $byStatus) ?: [1]); ?>
      <?php foreach ($byStatus as $row) : ?>
        <a class="mini-bar-row" href="<?= url('/portal/tickets?status=' . urlencode($row['status'])) ?>">
          <span class="mini-bar-label"><?= status_label($row['status']) ?></span>
          <span class="mini-bar-track"><span class="mini-bar-fill" style="width:<?= round(($row['c'] / $statusMax) * 100) ?>%"></span></span>
          <span class="mini-bar-value"><?= $row['c'] ?></span>
        </a>
      <?php endforeach; ?>
      <?php if (empty($byStatus)) : ?><div class="text-faint text-sm">No tickets yet.</div><?php endif; ?>
    </div>
  </div>
</div>
