{% extends 'base.html' %}
{% block title %}Book a Ticket{% endblock %}
{% block topbar_title %}Book a Ticket{% endblock %}
{% block content %}
<h2 style="color:#2c3e50;">🎫 Book a ticket</h2>
<p style="color:#7f8c8d; margin:5px 0 20px;">Only admin-approved buses are shown here. Buses with a seat map let you pick your exact seat - live.</p>

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>Route</th>
                <th>Bus</th>
                <th>Operator</th>
                <th>Departure</th>
                <th>Fare</th>
                <th>Seats left</th>
                <th>Book</th>
            </tr>
        </thead>
        <tbody>
            {% for s in schedules %}
            <tr>
                <td>{{ s.route.source_city.city_name }} → {{ s.route.destination_city.city_name }}
                    {% if s.status == 'DELAYED' %}<span class="status-badge status-pending" title="{{ s.delay_note }}">DELAYED</span>{% endif %}
                </td>
                <td>{{ s.bus.bus_name }} ({{ s.bus.bus_type }})</td>
                <td>{{ s.bus.operator.company_name }}</td>
                <td>{{ s.departure_time|date:"Y-m-d H:i" }}</td>
                <td>Rs. {{ s.fare }}</td>
                <td>{{ s.available_seats }}</td>
                <td>
                    {% if s.available_seats > 0 %}
                        {% if s.bus.has_seat_map %}
                        <button type="button" class="btn" onclick="openSeatPicker({{ s.id }}, '{{ s.bus.bus_name|escapejs }}', '{{ s.fare }}')">
                            Choose seats
                        </button>
                        {% else %}
                        <form method="post" action="{% url 'book_ticket' %}">
                            {% csrf_token %}
                            <input type="hidden" name="schedule_id" value="{{ s.id }}">
                            <input type="number" name="seats" value="1" min="1" max="{{ s.available_seats }}"
                                style="width:70px; padding:8px; border:2px solid #dfe6e9; border-radius:8px;">
                            <button type="submit" class="btn">Book</button>
                        </form>
                        {% endif %}
                    {% else %}
                    <span class="status-badge status-inactive">FULL</span>
                    {% endif %}
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="7" style="text-align:center; color:#7f8c8d;">No approved trips available right now.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- ================= Seat picker modal ================= -->
<div id="seat-modal" style="display:none;position:fixed;inset:0;background:rgba(13,42,102,.55);z-index:60;align-items:center;justify-content:center;padding:1rem;">
  <div style="background:#fff;border-radius:16px;max-width:560px;width:100%;max-height:92vh;overflow:auto;padding:1.4rem;">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem;">
      <h3 id="sm-title" style="font-size:1.05rem;">Choose your seats</h3>
      <button onclick="closeSeatPicker()" style="border:none;background:none;font-size:1.4rem;cursor:pointer;color:#6B7280;">✕</button>
    </div>
    <p style="font-size:.78rem;color:#6B7280;margin-bottom:.9rem;">
      Selected seats are held for <b>10 minutes</b>. The map updates <b>live</b> when others pick seats.
    </p>
    <div style="display:flex;gap:.9rem;flex-wrap:wrap;font-size:.72rem;color:#374151;margin-bottom:.8rem;">
      <span><i class="sm-key" style="background:#fff;border:2px solid #CBD5E1;"></i> Available</span>
      <span><i class="sm-key" style="background:#2DD4BF;border:2px solid #14B8A6;"></i> Your pick</span>
      <span><i class="sm-key" style="background:#FDE68A;border:2px solid #F59E0B;"></i> Held by someone</span>
      <span><i class="sm-key" style="background:#E5E7EB;border:2px solid #D1D5DB;"></i> Booked</span>
      <span><i class="sm-key" style="background:#374151;border:2px solid #1F2937;"></i> Blocked</span>
    </div>
    <div id="sm-grid" style="display:grid;gap:.45rem;justify-content:center;margin-bottom:1rem;"></div>
    <div style="display:flex;justify-content:space-between;align-items:center;border-top:1px dashed #E5E7EB;padding-top:.9rem;gap:.8rem;flex-wrap:wrap;">
      <div style="font-size:.85rem;">
        <div>Seats: <b id="sm-picked">—</b></div>
        <div>Total: <b id="sm-total">Rs. 0</b></div>
      </div>
      <form method="post" action="{% url 'book_ticket' %}" id="sm-form">
        {% csrf_token %}
        <input type="hidden" name="schedule_id" id="sm-schedule">
        <input type="hidden" name="seat_numbers" id="sm-seatnums">
        <button type="submit" class="btn" id="sm-book" disabled>Continue to payment →</button>
      </form>
    </div>
    <p id="sm-msg" style="font-size:.78rem;color:#EF4444;margin-top:.5rem;"></p>
  </div>
</div>

<style>
.sm-key{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:4px;}
.sm-seat{width:44px;height:40px;border-radius:8px;border:2px solid #CBD5E1;background:#fff;font-weight:700;
  font-size:.7rem;cursor:pointer;font-family:inherit;color:#1F2937;}
.sm-seat.vip{border-color:#A78BFA;}
.sm-seat.mine{background:#2DD4BF;border-color:#14B8A6;color:#fff;}
.sm-seat.locked{background:#FDE68A;border-color:#F59E0B;cursor:not-allowed;}
.sm-seat.booked{background:#E5E7EB;border-color:#D1D5DB;color:#9CA3AF;cursor:not-allowed;}
.sm-seat.blocked{background:#374151;border-color:#1F2937;cursor:not-allowed;color:#374151;}
</style>
{% endblock %}

{% block scripts %}
<script>
function getCookie(name) {
  const v = document.cookie.split('; ').find(r => r.startsWith(name + '='));
  return v ? decodeURIComponent(v.split('=')[1]) : '';
}
let SM = { schedule: null, fare: 0, picked: new Set(), ws: null, seats: {} };

async function openSeatPicker(scheduleId, busName, fare) {
  SM = { schedule: scheduleId, fare: parseFloat(fare), picked: new Set(), ws: null, seats: {} };
  document.getElementById('sm-title').textContent = `Choose your seats — ${busName}`;
  document.getElementById('sm-schedule').value = scheduleId;
  document.getElementById('sm-modal-open') ;
  document.getElementById('seat-modal').style.display = 'flex';
  await refreshGrid();
  connectLive();
}

function closeSeatPicker() {
  document.getElementById('seat-modal').style.display = 'none';
  if (SM.ws) { try { SM.ws.close(); } catch(e){} }
  if (SM.picked.size) {
    fetch(`/seat-map/${SM.schedule}/release/`, { method:'POST',
      headers:{'X-CSRFToken': getCookie('csrftoken')} });
  }
}

async function refreshGrid() {
  const r = await fetch(`/seat-map/${SM.schedule}/`);
  const j = await r.json();
  if (!j.ok) { document.getElementById('sm-msg').textContent = j.error || 'Could not load seats.'; return; }
  const d = j.data;
  SM.seats = {};
  const grid = document.getElementById('sm-grid');
  grid.style.gridTemplateColumns = `repeat(${d.cols}, 44px)`;
  grid.innerHTML = '';
  d.seats.forEach(s => {
    SM.seats[s.seat_number] = s;
    if (s.status === 'LOCKED_BY_ME') SM.picked.add(s.seat_number);
    grid.appendChild(seatButton(s));
  });
  paintSummary();
}

function seatButton(s) {
  const b = document.createElement('button');
  b.type = 'button';
  b.textContent = s.seat_number;
  b.dataset.seat = s.seat_number;
  b.className = 'sm-seat' + (s.seat_type === 'VIP' ? ' vip' : '');
  applyStatus(b, s.status);
  b.onclick = () => toggleSeat(s.seat_number);
  return b;
}

function applyStatus(btn, status) {
  btn.classList.remove('mine', 'locked', 'booked', 'blocked');
  if (status === 'LOCKED_BY_ME') btn.classList.add('mine');
  else if (status === 'LOCKED') btn.classList.add('locked');
  else if (status === 'BOOKED') btn.classList.add('booked');
  else if (status === 'BLOCKED') btn.classList.add('blocked');
  btn.disabled = ['LOCKED', 'BOOKED', 'BLOCKED'].includes(status);
}

async function toggleSeat(num) {
  if (SM.picked.has(num)) SM.picked.delete(num); else SM.picked.add(num);
  const r = await fetch(`/seat-map/${SM.schedule}/lock/`, {
    method: 'POST',
    headers: {'Content-Type':'application/json','X-CSRFToken': getCookie('csrftoken')},
    body: JSON.stringify({ seat_numbers: [...SM.picked] }),
  });
  const j = await r.json();
  const msg = document.getElementById('sm-msg');
  msg.textContent = '';
  if (j.ok) {
    SM.picked = new Set(j.data.granted);
    if (j.data.rejected.length) {
      msg.textContent = j.data.rejected.map(x => `${x.seat_number}: ${x.reason}`).join('  ·  ');
    }
  } else { msg.textContent = j.error || 'Could not hold that seat.'; }
  await refreshGrid();
}

function paintSummary() {
  const picked = [...SM.picked].sort();
  document.getElementById('sm-picked').textContent = picked.length ? picked.join(', ') : '—';
  document.getElementById('sm-total').textContent = `Rs. ${(picked.length * SM.fare).toFixed(2)}`;
  document.getElementById('sm-seatnums').value = picked.join(',');
  document.getElementById('sm-book').disabled = picked.length === 0;
}

function connectLive() {
  try {
    const proto = location.protocol === 'https:' ? 'wss' : 'ws';
    SM.ws = new WebSocket(`${proto}://${location.host}/ws/seats/${SM.schedule}/`);
    SM.ws.onmessage = (e) => {
      const m = JSON.parse(e.data);
      if (m.event !== 'seat_update') return;
      m.seats.forEach(num => {
        const btn = document.querySelector(`#sm-grid [data-seat="${num}"]`);
        if (!btn) return;
        if (SM.picked.has(num) && m.status !== 'AVAILABLE') return; // my own action echoes back
        applyStatus(btn, m.status);
      });
    };
  } catch (e) { /* live updates are an enhancement; page still works without them */ }
}
</script>
{% endblock %}