{% extends "base.html" %}
{% block title %}Play — Solitaire Hockey{% endblock %}
{% block head %}
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: system-ui, sans-serif; background: #1a1f2e; color: #e8eaf0; min-height: 100vh; }

  .app { max-width: 960px; margin: 0 auto; padding: 1rem; }

  h1 { font-size: 1.5rem; font-weight: 700; color: #fff; text-align: center; padding: 1rem 0 0.25rem; letter-spacing: 0.05em; }
  .subtitle { text-align: center; color: #8892a4; font-size: 0.8rem; margin-bottom: 1.5rem; }

  .section { background: #232838; border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem; border: 1px solid #2e3650; }
  .section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #4e7bbd; margin-bottom: 1rem; }

  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .team-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
  .team-name { font-weight: 700; font-size: 1rem; color: #fff; }

  select, input[type="date"] { background: #1a1f2e; color: #e8eaf0; border: 1px solid #2e3650; border-radius: 6px; padding: 0.4rem 0.6rem; font-size: 0.85rem; width: 100%; }
  select:focus, input[type="date"]:focus { outline: 2px solid #4e7bbd; }
  input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); }

  button { cursor: pointer; border: none; border-radius: 6px; font-size: 0.85rem; font-weight: 600; padding: 0.5rem 1rem; transition: all 0.15s; }
  .btn-primary { background: #2563eb; color: #fff; }
  .btn-primary:hover { background: #1d4ed8; }
  .btn-primary:disabled { background: #2e3650; color: #4e5a6e; cursor: not-allowed; }
  .btn-secondary { background: #2e3650; color: #e8eaf0; }
  .btn-secondary:hover { background: #3a4460; }
  .btn-full { width: 100%; padding: 0.65rem; font-size: 0.95rem; }

  .stat-row { display: flex; gap: 0.5rem; margin-bottom: 0.4rem; align-items: center; }
  .stat-label { font-size: 0.75rem; color: #8892a4; flex: 1; }
  .stat-val { font-size: 0.85rem; font-weight: 600; color: #e8eaf0; min-width: 40px; text-align: right; }

  .scoreboard { display: flex; align-items: center; justify-content: center; gap: 2rem; padding: 1rem; }
  .score-team { text-align: center; }
  .score-team-name { font-size: 0.8rem; color: #8892a4; }
  .score-num { font-size: 3rem; font-weight: 800; color: #fff; line-height: 1; }
  .score-sep { font-size: 2rem; color: #4e5a6e; font-weight: 300; }

  .phase-indicator { text-align: center; font-size: 0.8rem; color: #4e7bbd; font-weight: 600; margin-top: 0.5rem; }

  .log { background: #14182a; border-radius: 8px; padding: 0.75rem; max-height: 280px; overflow-y: auto; font-size: 0.8rem; line-height: 1.8; }
  .log-entry { color: #c8d0de; }
  .log-entry.goal { color: #fbbf24; font-weight: 600; }
  .log-entry.pp { color: #34d399; }
  .log-entry.sh { color: #f87171; }
  .log-entry.penalty { color: #a78bfa; }
  .log-entry.header { color: #4e7bbd; font-weight: 700; border-top: 1px solid #2e3650; margin-top: 0.3rem; padding-top: 0.3rem; }
  .log-entry.info { color: #8892a4; font-style: italic; }

  .player-table { width: 100%; font-size: 0.75rem; border-collapse: collapse; }
  .player-table th { color: #4e7bbd; text-align: left; padding: 0.2rem 0.4rem; border-bottom: 1px solid #2e3650; font-weight: 600; }
  .player-table td { padding: 0.2rem 0.4rem; color: #c8d0de; border-bottom: 1px solid #1e2438; }
  .player-table tr:hover td { background: #2a3050; }

  .goalie-box { background: #1a1f2e; border-radius: 8px; padding: 0.75rem; margin-bottom: 0.75rem; }
  .goalie-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.25rem; color: #fff; }
  .goalie-stats { font-size: 0.75rem; color: #8892a4; }

  .result-banner { text-align: center; padding: 1.5rem; }
  .result-banner .winner { font-size: 1.4rem; font-weight: 800; color: #fbbf24; }
  .result-banner .final-score { font-size: 1rem; color: #c8d0de; margin-top: 0.25rem; }

  .tab-bar { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
  .tab { padding: 0.35rem 0.9rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600; cursor: pointer; background: #1a1f2e; color: #8892a4; border: 1px solid #2e3650; }
  .tab.active { background: #2563eb; color: #fff; border-color: #2563eb; }

  .tip { font-size: 0.72rem; color: #5a6070; margin-top: 0.4rem; }
  .shooters-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .shooter-card { background: #1a1f2e; border-radius: 8px; padding: 0.75rem; border: 1px solid #2e3650; }
  .shooter-card .player { font-weight: 600; font-size: 0.85rem; color: #fff; }
  .shooter-card .shots-count { font-size: 0.75rem; color: #8892a4; }

  .hidden { display: none !important; }
  .mt-05 { margin-top: 0.5rem; }
  .mt-1  { margin-top: 1rem; }
</style>
{% endblock %}
{% block content %}
<div class="app">
  <h1>🏒 SOLITAIRE HOCKEY</h1>
  <p class="subtitle">By Denis Quinn &bull; Web port</p>

  <!-- SETUP SCREEN -->
  <div id="screen-setup">
    <div class="section">
      <div class="section-title">Game Details</div>
      <div class="two-col" style="margin-bottom:0.75rem;">
        <div>
          <div class="team-header"><span class="team-name">Away Team</span></div>
          <select id="sel-away" onchange="updateTeamPreview('away')"></select>
          <div id="preview-away" class="mt-05"></div>
        </div>
        <div>
          <div class="team-header"><span class="team-name">Home Team</span></div>
          <select id="sel-home" onchange="updateTeamPreview('home')"></select>
          <div id="preview-home" class="mt-05"></div>
        </div>
      </div>
      <div>
        <div class="stat-label" style="margin-bottom:0.3rem;">Game Date</div>
        <input type="date" id="game-date" value="{{ today }}">
      </div>
    </div>

    <div class="section">
      <div class="section-title">Options</div>
      <label style="display:flex;align-items:center;gap:0.5rem;font-size:0.85rem;cursor:pointer;">
        <input type="checkbox" id="opt-playoff" onchange="updatePlayoffMode()"> Playoff game (manual goalie selection, sudden death OT)
      </label>
      <label style="display:flex;align-items:center;gap:0.5rem;font-size:0.85rem;cursor:pointer;margin-top:0.5rem;">
        <input type="checkbox" id="opt-shot-variance" checked> Optional shot variance rule (±1d12)
      </label>
      <label style="display:flex;align-items:center;gap:0.5rem;font-size:0.85rem;cursor:pointer;margin-top:0.5rem;">
        <input type="checkbox" id="opt-pen-variance"> Optional penalty variance rule (±1d6)
      </label>
      <label style="display:flex;align-items:center;gap:0.5rem;font-size:0.85rem;cursor:pointer;margin-top:0.5rem;">
        <input type="checkbox" id="opt-timing"> Include goal/penalty timing
      </label>
    </div>

    <div style="display:grid;grid-template-columns:1fr auto;gap:0.5rem;align-items:stretch;">
      <button class="btn-primary btn-full" onclick="startGame()">Start Game</button>
      <button class="btn-secondary" onclick="loadNextGame()" title="Load next unplayed scheduled game" style="white-space:nowrap;">Next Scheduled Game</button>
    </div>
    <div id="next-game-status" style="font-size:0.75rem;color:#8892a4;margin-top:0.4rem;display:none;"></div>
  </div>

  <!-- GAME SCREEN -->
  <div id="screen-game" class="hidden">

    <div class="section" style="padding:0.75rem 1.25rem;">
      <div class="scoreboard">
        <div class="score-team">
          <div class="score-team-name" id="score-home-name">HOME</div>
          <div class="score-num" id="score-home">0</div>
        </div>
        <div class="score-sep">–</div>
        <div class="score-team">
          <div class="score-team-name" id="score-away-name">AWAY</div>
          <div class="score-num" id="score-away">0</div>
        </div>
      </div>
      <div class="phase-indicator" id="phase-indicator">Select Goalies</div>
    </div>

    <div class="two-col">
      <!-- LEFT: Step controls -->
      <div>
        <div class="section" id="step-goalies">
          <div class="section-title">Step 1 — Starting Goalies</div>
          <div id="goalie-info"></div>
          <!-- Regular season: dice roll -->
          <div id="goalie-roll-ui">
            <button class="btn-primary btn-full mt-05" onclick="rollGoalies()">Roll 2d10 for each team</button>
          </div>
          <!-- Playoff: manual dropdowns, hidden by default -->
          <div id="goalie-select-ui" class="hidden mt-05">
            <div class="two-col" style="margin-bottom:0.5rem;">
              <div>
                <div class="stat-label" style="margin-bottom:0.3rem;">Away Goalie</div>
                <select id="sel-goalie-away"></select>
              </div>
              <div>
                <div class="stat-label" style="margin-bottom:0.3rem;">Home Goalie</div>
                <select id="sel-goalie-home"></select>
              </div>
            </div>
            <button class="btn-primary btn-full" onclick="selectGoalies()">Confirm Goalies</button>
          </div>
        </div>

        <div class="section hidden" id="step-shots">
          <div class="section-title">Step 2 — Shots on Goal</div>
          <div id="shots-info"></div>
          <button class="btn-primary btn-full mt-05" onclick="calcShots()">Calculate Shots</button>
        </div>

        <div class="section hidden" id="step-shooters">
          <div class="section-title">Step 3 — Determine Shooters</div>
          <div id="shooters-info"></div>
          <button class="btn-primary btn-full mt-05" onclick="rollShooters()">Roll for Shooters</button>
        </div>

        <div class="section hidden" id="step-goals">
          <div class="section-title">Step 4 — Resolve Shots</div>
          <div id="goals-info"></div>
          <button class="btn-primary btn-full mt-05" onclick="resolveGoals()">Resolve All Shots</button>
        </div>

        <div class="section hidden" id="step-assists">
          <div class="section-title">Step 5 — Assign Assists</div>
          <div id="assists-info"></div>
          <button class="btn-primary btn-full mt-05" onclick="resolveAssists()">Assign Assists</button>
        </div>

        <div class="section hidden" id="step-penalties">
          <div class="section-title">Step 6 — Penalties</div>
          <div id="penalties-info"></div>
          <button class="btn-primary btn-full mt-05" onclick="resolvePenalties()">Roll Penalties</button>
        </div>

        <div class="section hidden" id="step-pp">
          <div class="section-title">Step 7 — Power Plays</div>
          <div id="pp-info"></div>
          <button class="btn-primary btn-full mt-05" onclick="resolvePowerPlays()">Resolve Power Plays</button>
        </div>

        <div class="section hidden" id="step-gwg">
          <div class="section-title">Step 8 — Special Goals</div>
          <div id="gwg-info"></div>
          <button class="btn-primary btn-full mt-05" onclick="resolveSpecialGoals()">Assign GWG/GTG</button>
        </div>

        <div class="section hidden" id="step-ot">
          <div class="section-title">Overtime</div>
          <div id="ot-info"></div>
          <div id="ot-period-info" style="font-size:0.75rem;color:#4e7bbd;margin-top:0.4rem;"></div>
          <button class="btn-primary btn-full mt-05" onclick="runOTPeriod()">Run OT Period</button>
        </div>

        <div class="section hidden" id="step-final">
          <div class="section-title">Final Score</div>
          <div class="result-banner" id="final-result"></div>
          <button class="btn-secondary btn-full mt-05" onclick="newGame()">New Game</button>
        </div>
      </div>

      <!-- RIGHT: Log + box score -->
      <div>
        <div class="section">
          <div class="tab-bar">
            <div class="tab active" onclick="showTab('log')">Game Log</div>
            <div class="tab" onclick="showTab('stats')">Box Score</div>
          </div>
          <div id="tab-log">
            <div class="log" id="game-log"><span class="log-entry info">Game not started yet...</span></div>
          </div>
          <div id="tab-stats" class="hidden">
            <div class="two-col">
              <div>
                <div style="font-size:0.75rem;font-weight:700;color:#4e7bbd;margin-bottom:0.4rem;" id="bs-home-name">HOME</div>
                <div id="bs-home"></div>
              </div>
              <div>
                <div style="font-size:0.75rem;font-weight:700;color:#4e7bbd;margin-bottom:0.4rem;" id="bs-away-name">AWAY</div>
                <div id="bs-away"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- TEAMS data injected by Flask -->
<script>
const TEAMS = {{ teams_json | safe }};
</script>
<script src="{{ url_for('static', filename='game.js') }}"></script>
<script>
  // Set today's date as default
  document.getElementById('game-date').valueAsDate = new Date();
  populateTeamSelects();
</script>
{% endblock %}