{% extends 'base.html.twig' %}

{% block title %}Live Racing Monitor{% endblock %}

{% block navbar %}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .lr-mon {
            position: fixed; inset: 0; overflow: hidden;
            background: #0b0f1a; color: #e5e7eb;
            display: grid;
            grid-template-columns: min(48vw, 720px) 1fr;
            grid-template-rows: auto auto auto minmax(0, 1fr) auto;
            gap: 12px; padding: 14px;
            font: 14px/1.3 Inter, system-ui, sans-serif;
        }

        .lr-mon__top {
            grid-column: 1 / -1; grid-row: 1;
            display: flex; align-items: center; justify-content: space-between; gap: 16px;
            font-size: 18px; font-weight: 700;
        }
        .lr-mon__live { display: inline-flex; align-items: center; gap: 8px; color: #f87171; font-size: 13px; letter-spacing: .08em; }
        .lr-mon__pulse { width: 10px; height: 10px; border-radius: 50%; background: #f87171; animation: lr-mon-pulse 1.4s ease-in-out infinite; }
        @keyframes lr-mon-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
        .lr-mon__fs {
            background: #1e293b; color: #e5e7eb; border: 1px solid #334155;
            border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer;
        }
        .lr-mon__fs:hover { background: #334155; }

        .lr-mon__video {
            grid-column: 1; grid-row: 2; align-self: start;
            position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 44vh;
            background: #000; border-radius: 10px; overflow: hidden;
        }
        .lr-mon__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
        .lr-mon__video-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 14px; }

        /* The polled region is transparent to the grid so its children (KPIs,
           settlement bar, races, footer) place into the page grid directly. */
        .lr-mon__live-region { display: contents; }

        .lr-mon__right {
            min-height: 0;
            display: flex; flex-direction: column; gap: 10px;
        }

        .lr-mon__earners {
            flex: 1 1 0; min-height: 0; overflow-y: auto;
            background: #111827; border: 1px solid #1f2937; border-radius: 10px; padding: 8px 12px;
        }
        .lr-mon__earners-head { font-size: 12px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
        .lr-mon__earner-row { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; border-top: 1px solid #1f2937; font-size: 12px; }
        .lr-mon__earner-row:first-of-type { border-top: none; }
        .lr-mon__earner-rank { color: #64748b; flex-shrink: 0; width: 14px; }
        .lr-mon__earner-name { color: #e5e7eb; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .lr-mon__earner-amount { color: #6ee7b7; font-weight: 700; flex-shrink: 0; }
        .lr-mon__earners-empty { color: #64748b; font-size: 12px; }

        .lr-mon__ticker {
            flex: 1; min-height: 0; overflow-y: auto;
            background: #111827; border: 1px solid #1f2937; border-radius: 10px; padding: 8px 12px;
        }
        .lr-mon__ticker-head { font-size: 12px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
        .lr-mon__ticker-row { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; border-top: 1px solid #1f2937; font-size: 12px; }
        .lr-mon__ticker-row:first-of-type { border-top: none; }
        .lr-mon__ticker-time { color: #64748b; font-variant-numeric: tabular-nums; flex-shrink: 0; }
        .lr-mon__ticker-name { color: #e5e7eb; font-weight: 600; flex-shrink: 0; }
        .lr-mon__ticker-bet { color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
        .lr-mon__ticker-amount { color: #6ee7b7; font-weight: 700; flex-shrink: 0; margin-left: auto; }
        .lr-mon__ticker-empty { color: #64748b; font-size: 12px; }

        .lr-mon__side {
            grid-column: 2; grid-row: 2; align-self: start; min-height: 0;
            display: flex; flex-direction: column; gap: 10px;
        }

        .lr-mon__horses { background: #111827; border: 1px solid #1f2937; border-radius: 10px; padding: 10px 12px; }
        .lr-mon__horses-head { font-size: 12px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
        .lr-mon__horses-list { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; }
        .lr-mon__horse--scratched { color: #fca5a5; text-decoration: line-through; }

        .lr-mon__kpis {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: start;
        }
        .lr-mon__kpi { background: #111827; border: 1px solid #1f2937; border-radius: 10px; padding: 10px 12px; }
        .lr-mon__kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }
        .lr-mon__kpi-value { font-size: 21px; font-weight: 700; margin-top: 2px; }
        .lr-mon__kpi-sub { font-size: 11px; color: #64748b; margin-top: 2px; }
        .lr-mon__pos { color: #34d399; }
        .lr-mon__neg { color: #f87171; }

        .lr-mon__settle { grid-column: 1 / -1; grid-row: 3; background: #111827; border: 1px solid #1f2937; border-radius: 10px; padding: 8px 12px; }
        .lr-mon__settle[data-settlement-state="in-progress"] { border-color: #b45309; }
        .lr-mon__settle-head { display: flex; justify-content: space-between; font-size: 12px; color: #cbd5e1; margin-bottom: 6px; }
        .lr-mon__bar { height: 6px; background: #1f2937; border-radius: 999px; overflow: hidden; }
        .lr-mon__bar > span { display: block; height: 100%; background: #34d399; transition: width .4s ease; }
        .lr-mon__settle[data-settlement-state="in-progress"] .lr-mon__bar > span { background: #f59e0b; animation: lr-mon-pulse 1.4s ease-in-out infinite; }
        .lr-mon__saved { font-size: 10px; color: #6ee7b7; margin-right: 6px; }

        .lr-mon__body-row {
            grid-column: 1 / -1; grid-row: 4; min-height: 0;
            display: grid; grid-template-columns: 6fr 4fr; gap: 10px;
        }

        .lr-mon__races {
            min-height: 0;
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
            overflow: hidden auto; align-content: start;
        }
        .lr-mon__race { background: #111827; border: 1px solid #1f2937; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
        .lr-mon__race-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
        .lr-mon__race-no { font-size: 15px; font-weight: 700; }
        .lr-mon__badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
        .lr-mon__badge--open { background: #064e3b; color: #6ee7b7; }
        .lr-mon__badge--betting-closed { background: #78350f; color: #fcd34d; }
        .lr-mon__badge--awaiting-settlement { background: #7c2d12; color: #fdba74; }
        .lr-mon__badge--settled { background: #1e293b; color: #94a3b8; }
        .lr-mon__badge--settling { background: #1e3a8a; color: #93c5fd; }
        .lr-mon__race--settling { border-color: #2563eb; }
        .lr-mon__spin { display: inline-block; animation: lr-mon-spin 1.6s linear infinite; }
        @keyframes lr-mon-spin { to { transform: rotate(360deg); } }
        .lr-mon__chip { font-size: 11px; color: #fcd34d; }
        .lr-mon__scratch { font-size: 12px; color: #fca5a5; }
        .lr-mon__winner { font-size: 12px; font-weight: 700; color: #fbbf24; }
        .lr-mon__late { font-size: 12px; font-weight: 700; color: #f87171; }
        .lr-mon__div-label { font-size: 11px; color: #94a3b8; }
        .lr-mon__race-money { font-size: 11px; color: #64748b; margin-top: auto; }

        .lr-mon__updated { grid-column: 1 / -1; grid-row: 5; font-size: 12px; color: #64748b; text-align: right; }

        /* Idle state: single column, header then centred clock. */
        .lr-mon--idle { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
        .lr-mon__idle { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
        .lr-mon__idle-clock { font-size: 88px; font-weight: 700; letter-spacing: .02em; }
        .lr-mon__idle-msg { font-size: 18px; color: #94a3b8; }
        .lr-mon__idle-next { font-size: 15px; color: #64748b; }
    </style>
{% endblock %}

{% block body %}
    <div class="lr-mon{{ state == 'idle' ? ' lr-mon--idle' : '' }}"
         data-controller="lr-monitor"
         data-lr-monitor-url-value="{{ path('app_wfbo_live_racing_monitor_data', app.request.query.get('event') ? {event: app.request.query.get('event')} : {}) }}"
         data-lr-monitor-interval-ms-value="15000">

        <header class="lr-mon__top">
            <div>{{ state == 'live' ? event.management.name ~ ' — ' ~ event.eventDate|date('D, M j, Y') : 'Live Racing Monitor' }}</div>
            {% if state == 'live' %}<div class="lr-mon__live"><span class="lr-mon__pulse"></span> LIVE</div>{% endif %}
            <button type="button" class="lr-mon__fs" data-action="lr-monitor#toggleFullscreen" data-testid="lr-monitor-fullscreen">
                &#9974; Fullscreen
            </button>
        </header>

        {% if state == 'live' %}
            <section class="lr-mon__video">
                {% if videoEmbedUrl %}
                    <iframe src="{{ videoEmbedUrl }}?autoplay=1&amp;mute=0&amp;controls=1&amp;playsinline=1"
                            allow="autoplay; encrypted-media" allowfullscreen
                            data-testid="lr-monitor-video"></iframe>
                {% else %}
                    <div class="lr-mon__video-empty" data-testid="lr-monitor-video-empty">No stream configured for this event</div>
                {% endif %}
            </section>
        {% endif %}

        <div class="lr-mon__live-region" data-lr-monitor-target="live" data-testid="lr-monitor-live">
            {% include 'wfbo/live-racing/_monitor_live.html.twig' %}
        </div>
    </div>
{% endblock %}