@if (loading()) {
  <div class="dlg-loading"><mat-spinner diameter="40"></mat-spinner></div>
} @else if (errored() || !details()) {
  <h2 mat-dialog-title>Match details</h2>
  <mat-dialog-content>
    <p class="muted">Could not load match statistics.</p>
  </mat-dialog-content>
  <mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>Close</button>
  </mat-dialog-actions>
} @else {
  @let d = details()!;
  <div class="dlg-header">
    <div class="comp muted">
      {{ d.leagueName }} ({{ d.country }}) · {{ d.seasonName }} · Round {{ d.matchdayNumber }}
    </div>
    <button mat-icon-button mat-dialog-close class="close-btn" aria-label="Close">
      <mat-icon>close</mat-icon>
    </button>
  </div>

  <mat-dialog-content>
    <div class="scoreline">
      <div class="team home">{{ d.homeTeamName }}</div>
      <div class="score">
        @if (d.hasScore) {
          <span class="ft mono">{{ d.homeScoreFt }} : {{ d.awayScoreFt }}</span>
          @if (d.homeScoreHt != null) {
            <span class="ht muted">HT {{ d.homeScoreHt }}:{{ d.awayScoreHt }}</span>
          }
        } @else {
          <span class="status-chip">{{ d.status }}</span>
        }
      </div>
      <div class="team away">{{ d.awayTeamName }}</div>
    </div>

    <div class="meta muted">
      <span><mat-icon>event</mat-icon>{{ d.kickoffAt | date: 'EEE d MMM y, HH:mm' }}</span>
      @if (d.stadium) { <span><mat-icon>stadium</mat-icon>{{ d.stadium }}</span> }
      @if (d.referee) { <span><mat-icon>sports</mat-icon>{{ d.referee }}</span> }
    </div>

    <!-- Model predictions: LLM vs OpenAI vs actual (shown for any match with stored predictions) -->
    @if (showComparison()) {
      <h3 class="section-title">
        Predictions{{ hasActual() ? ' vs actual' : '' }}
      </h3>
      <div class="pred-meta muted">
        @if (anyPrediction(); as p) {
          <span><span class="key llm"></span>LLM · trained {{ p.modelTrainedAt | date: 'mediumDate' }}@if (p.halfLifeDays != null) {, half-life {{ p.halfLifeDays }}d}</span>
        }
        @if (anyOpenAi(); as o) {
          <span><span class="key openai"></span>OpenAI {{ o.model }}@if (o.confidence) { · {{ o.confidence }} confidence}</span>
        }
        @if (hasActual()) { <span><span class="key actual"></span>Actual</span> }
      </div>

      <div class="pred-charts">
        <div class="pred-chart">
          <div class="pred-team">{{ d.homeTeamName }}</div>
          <div class="chart-box"><canvas #homePredChart></canvas></div>
        </div>
        <div class="pred-chart">
          <div class="pred-team">{{ d.awayTeamName }}</div>
          <div class="chart-box"><canvas #awayPredChart></canvas></div>
        </div>
      </div>

      <table class="pred-table">
        <thead>
          <tr>
            <th></th>
            <th [attr.colspan]="modelCount()" class="grp">{{ d.homeTeamName }}</th>
            <th [attr.colspan]="modelCount()" class="grp">{{ d.awayTeamName }}</th>
          </tr>
          <tr class="sub">
            <th>Metric</th>
            @if (hasLlm()) { <th>LLM</th> }
            @if (hasOpenAi()) { <th>OpenAI</th> }
            @if (hasActual()) { <th>Actual</th> }
            @if (hasLlm() && hasActual()) { <th>Δ</th> }
            @if (hasLlm()) { <th>LLM</th> }
            @if (hasOpenAi()) { <th>OpenAI</th> }
            @if (hasActual()) { <th>Actual</th> }
            @if (hasLlm() && hasActual()) { <th>Δ</th> }
          </tr>
        </thead>
        <tbody>
          @for (r of predRows(); track r.label) {
            <tr>
              <td class="metric">{{ r.label }}</td>
              @if (hasLlm()) { <td class="mono">{{ fmt(r.homeLlm) }}</td> }
              @if (hasOpenAi()) { <td class="mono openai">{{ fmt(r.homeOpenAi) }}</td> }
              @if (hasActual()) { <td class="mono actual">{{ fmt(r.homeActual) }}</td> }
              @if (hasLlm() && hasActual()) {
                <td [class]="'mono delta ' + deltaClass(r.homeActual, r.homeLlm)">{{ delta(r.homeActual, r.homeLlm) }}</td>
              }
              @if (hasLlm()) { <td class="mono">{{ fmt(r.awayLlm) }}</td> }
              @if (hasOpenAi()) { <td class="mono openai">{{ fmt(r.awayOpenAi) }}</td> }
              @if (hasActual()) { <td class="mono actual">{{ fmt(r.awayActual) }}</td> }
              @if (hasLlm() && hasActual()) {
                <td [class]="'mono delta ' + deltaClass(r.awayActual, r.awayLlm)">{{ delta(r.awayActual, r.awayLlm) }}</td>
              }
            </tr>
          }
        </tbody>
      </table>
    } @else if (d.hasScore) {
      <p class="muted pred-missing">No stored model prediction for this match.</p>
    }

    <!-- Team stats comparison -->
    <h3 class="section-title">Team statistics</h3>
    @if (hasStats()) {
      <div class="stats-compare">
        @for (row of statRows(); track row.label) {
          <div class="stat-line">
            <span class="stat-val mono">{{ row.home }}</span>
            <span class="stat-label">{{ row.label }}</span>
            <span class="stat-val mono">{{ row.away }}</span>
          </div>
          <div class="stat-bar">
            <div class="bar home" [style.width]="barWidth(row, 'home')"></div>
            <div class="bar away" [style.width]="barWidth(row, 'away')"></div>
          </div>
        }
      </div>
    } @else {
      <p class="muted">No per-team statistics recorded for this match.</p>
    }

    <!-- Goals -->
    <h3 class="section-title">Goals</h3>
    @if (d.goals.length) {
      <ul class="event-list">
        @for (g of d.goals; track $index) {
          <li [class.away-ev]="!g.isHome">
            <span class="ev-min mono">{{ minuteLabel(g.minute, g.addedTime) }}</span>
            <mat-icon class="ev-icon">sports_soccer</mat-icon>
            <span class="ev-text">
              <b>{{ g.scorerName }}</b>
              @if (g.assistName) { <span class="muted">(assist {{ g.assistName }})</span> }
              @if (g.goalType !== 'open_play') { <span class="tag">{{ g.goalType }}</span> }
            </span>
          </li>
        }
      </ul>
    } @else { <p class="muted">No goals recorded.</p> }

    <!-- Cards -->
    @if (d.cards.length) {
      <h3 class="section-title">Cards</h3>
      <ul class="event-list">
        @for (c of d.cards; track $index) {
          <li [class.away-ev]="!c.isHome">
            <span class="ev-min mono">{{ c.minute }}'</span>
            <span class="card-box" [class.red]="c.cardType === 'red'"></span>
            <span class="ev-text"><b>{{ c.playerName }}</b>
              @if (c.reason) { <span class="muted">— {{ c.reason }}</span> }
            </span>
          </li>
        }
      </ul>
    }

    <!-- Penalties -->
    @if (d.penalties.length) {
      <h3 class="section-title">Penalties</h3>
      <ul class="event-list">
        @for (p of d.penalties; track $index) {
          <li [class.away-ev]="!p.isHome">
            <span class="ev-min mono">{{ p.minute != null ? p.minute + "'" : '—' }}</span>
            <mat-icon class="ev-icon">adjust</mat-icon>
            <span class="ev-text">
              <b>{{ p.playerName ?? 'Unknown' }}</b>
              <span class="tag" [class.miss]="p.result !== 'scored'">{{ p.result }}</span>
            </span>
          </li>
        }
      </ul>
    }
  </mat-dialog-content>

  <mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>Close</button>
  </mat-dialog-actions>
}