<?php
// =============================================================================
// /api/webview/sports/sport_top.php — "Live & Today's Sport" card grid.
// Mirrors the original IBO `ev-card` template: each card has the event thumb
// as background with a gradient overlay; team badges + names + score/time
// floated on top.
// =============================================================================
require_once __DIR__ . '/../_wv_common.php';

wv_maybe_bootstrap_sports();

$now       = time();
$today_end = strtotime('tomorrow') ?: ($now + 86400);

$events = db_all(
    'SELECT e.*, l.name AS league_name, l.logo_url AS league_logo_url
     FROM sports_events e
     LEFT JOIN sports_leagues l ON l.id = e.league_id
     WHERE e.status = "LIVE"
        OR (e.kickoff_ts >= ? AND e.kickoff_ts < ?)
     ORDER BY
        CASE e.status WHEN "LIVE" THEN 0 ELSE 1 END,
        e.kickoff_ts ASC
     LIMIT 24',
    [$now - 6 * 3600, $today_end]
);
if (!$events) {
    $events = db_all(
        'SELECT e.*, l.name AS league_name, l.logo_url AS league_logo_url
         FROM sports_events e
         LEFT JOIN sports_leagues l ON l.id = e.league_id
         WHERE e.status IN ("FT", "UPCOMING")
         ORDER BY e.kickoff_ts DESC
         LIMIT 24'
    );
}
$events = array_map('wv_event_view', $events);

wv_html_head('Live & Today\'s Sport', '<style>
:root{--bg:#0a0a0a;--card:#141414;--border:rgba(255,255,255,.08);--text:#f5f7fb;--muted:#8a93a3;--accent:#f9a825;--live:#ef4444;--finished:#22c55e;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Inter",system-ui,-apple-system,sans-serif;line-height:1.5;font-size:14px;}
.page{max-width:1200px;margin:0 auto;padding:20px 16px 40px;}
h1{font-size:22px;font-weight:700;margin:0 0 4px;}
.date-label{color:var(--muted);font-size:13px;margin-bottom:16px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;}

/* Card with TheSportsDB thumb as full-bleed background */
.ev-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;transition:all .2s;position:relative;}
.ev-card:hover{border-color:rgba(255,255,255,.18);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4);}
.ev-card.has-thumb{background-size:cover;background-position:center;min-height:180px;}
.ev-card.has-thumb .ev-overlay{background:linear-gradient(transparent 10%,rgba(0,0,0,.85) 60%);position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;}
.ev-card:not(.has-thumb){min-height:140px;}
.ev-inner{padding:16px;}
.ev-league{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.ev-league-name{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600;}
.ev-status-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:20px;}
.badge-live{background:var(--live);color:#fff;animation:pulse 2s infinite;}
.badge-ft{background:var(--finished);color:#fff;}
.badge-upcoming{background:rgba(255,255,255,.10);color:var(--text);}
.badge-tba{background:#2a2a2a;color:#aaa;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.65}}

.ev-matchup{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;}
.ev-team{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0;}
.ev-badge{width:42px;height:42px;border-radius:8px;background:rgba(255,255,255,.04);object-fit:contain;flex-shrink:0;}
.ev-team-name{font-size:13px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.ev-score-box{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:62px;}
.ev-vs{font-size:13px;font-weight:700;color:var(--muted);}
.ev-score{font-size:22px;font-weight:800;color:#fff;line-height:1;}
.ev-time{font-size:11px;color:var(--accent);font-weight:600;}
.empty{padding:60px 0;text-align:center;color:var(--muted);font-size:13px;}
</style>');

$status_class = ['LIVE'=>'badge-live','FT'=>'badge-ft','UPCOMING'=>'badge-upcoming','TBA'=>'badge-tba'];
$status_label = ['LIVE'=>'LIVE','FT'=>'FT','UPCOMING'=>'NS','TBA'=>'TBA'];
?>
<div class="page">
    <h1>Live &amp; Today's Sport</h1>
    <p class="date-label"><?php echo date('l, j F Y'); ?></p>

    <?php if (!$events): ?>
        <div class="empty">No live games right now — check back closer to kick‑off.</div>
    <?php else: ?>
    <div class="grid">
        <?php foreach ($events as $i => $e):
            $thumb = $e['thumb_url'] ?? ''; ?>
            <div class="ev-card<?php echo $thumb ? ' has-thumb' : ''; ?>"
                 <?php if ($thumb): ?>style="background-image:url('<?php echo htmlspecialchars($thumb, ENT_QUOTES, 'UTF-8'); ?>/preview')"<?php endif; ?>>
                <div class="ev-overlay">
                <div class="ev-inner">
                    <div class="ev-league">
                        <span class="ev-league-name"><?php echo htmlspecialchars($e['league_name'] ?: '—', ENT_QUOTES, 'UTF-8'); ?></span>
                        <span class="ev-status-badge <?php echo $status_class[$e['status']] ?? 'badge-upcoming'; ?>">
                            <?php echo $status_label[$e['status']] ?? $e['status']; ?>
                        </span>
                    </div>
                    <div class="ev-matchup">
                        <div class="ev-team">
                            <?php if ($e['home_badge_url']): ?><img class="ev-badge" src="<?php echo htmlspecialchars($e['home_badge_url'], ENT_QUOTES, 'UTF-8'); ?>" alt="" loading="lazy"><?php endif; ?>
                            <span class="ev-team-name"><?php echo htmlspecialchars($e['home_team'], ENT_QUOTES, 'UTF-8'); ?></span>
                        </div>
                        <div class="ev-score-box">
                            <?php if ($e['status'] === 'LIVE' || $e['status'] === 'FT'): ?>
                                <span class="ev-score"><?php echo (int)$e['home_score']; ?> - <?php echo (int)$e['away_score']; ?></span>
                                <span class="ev-time"><?php echo $e['kickoff_ts'] ? date('g:ia', $e['kickoff_ts']) : ''; ?></span>
                            <?php else: ?>
                                <span class="ev-vs">vs</span>
                                <span class="ev-time"><?php echo $e['kickoff_ts'] ? date('g:ia', $e['kickoff_ts']) : '—'; ?></span>
                            <?php endif; ?>
                        </div>
                        <div class="ev-team">
                            <?php if ($e['away_badge_url']): ?><img class="ev-badge" src="<?php echo htmlspecialchars($e['away_badge_url'], ENT_QUOTES, 'UTF-8'); ?>" alt="" loading="lazy"><?php endif; ?>
                            <span class="ev-team-name"><?php echo htmlspecialchars($e['away_team'], ENT_QUOTES, 'UTF-8'); ?></span>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>
</div>
<?php wv_html_foot();
