{% extends "base.html" %}
{% block title %}{{ _('Tutorías · BackTestingMarket') }}{% endblock %}

{% block extra_head %}
  <script src="https://js.stripe.com/v3/"></script>
  <style>
    .tutor-card:hover { transform: translateY(-2px); transition: .2s ease; }
    .slot-badge { white-space: nowrap; }
  </style>
{% endblock %}

{% block content %}
<div class="container" data-aos="fade-up">
  <header class="mb-4 d-flex align-items-center justify-content-between">
    <div>
      <h1 class="h3 mb-1"><i class="bi bi-mortarboard me-2"></i>{{ _('Tutorías 1:1') }}</h1>
      <p class="text-muted mb-0">
        {{ _('Reserva una sesión personalizada con nuestros tutores. Elige tutor, servicio y horario disponible.') }}
      </p>
    </div>
    <div class="text-end small">
      <span class="badge bg-primary-subtle text-primary-emphasis border border-primary">{{ _('Zona horaria') }}: {{ timezone or 'Europe/Tirane' }}</span>
    </div>
  </header>

  <!-- Selector principal -->
  <section class="card p-4 mb-4">
    <div class="row g-3">
      <div class="col-md-4">
        <label class="form-label">{{ _('Tutor') }}</label>
        <select id="tutorSelect" class="form-select" aria-label="{{ _('Selecciona tutor') }}"></select>
        <div id="tutorBio" class="form-text mt-2"></div>
      </div>

      <div class="col-md-4">
        <label class="form-label">{{ _('Servicio') }}</label>
        <select id="serviceSelect" class="form-select" aria-label="{{ _('Selecciona servicio') }}"></select>
        <div id="serviceHelp" class="form-text mt-2"></div>
      </div>

      <div class="col-md-4">
        <label class="form-label">{{ _('Tu email') }}</label>
        <input id="emailInput" type="email" class="form-control" placeholder="you@example.com" required>
      </div>

      <div class="col-12">
        <label class="form-label">{{ _('Horarios disponibles') }}</label>
        <div id="slotsWrap" class="d-flex flex-wrap gap-2">
          <span class="text-muted" id="slotsEmpty">{{ _('Selecciona un tutor para ver horarios disponibles…') }}</span>
        </div>
      </div>

      <div class="col-12">
        <button id="payBtn" class="btn btn-success" disabled>
          <i class="bi bi-credit-card me-1"></i>{{ _('Pagar y reservar') }}
        </button>
        <span id="payHint" class="text-muted ms-2 small">{{ _('El pago se procesa de forma segura con Stripe.') }}</span>
      </div>
    </div>
  </section>

  <!-- Tarjetas de tutores (opcional, marketing) -->
  <section>
    <h2 class="h5 mb-3">{{ _('Conoce a los tutores') }}</h2>
    <div id="tutorCards" class="row g-3"></div>
  </section>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
(function() {
  const tSel = document.getElementById('tutorSelect');
  const sSel = document.getElementById('serviceSelect');
  const emailInput = document.getElementById('emailInput');
  const slotsWrap = document.getElementById('slotsWrap');
  const slotsEmpty = document.getElementById('slotsEmpty');
  const payBtn = document.getElementById('payBtn');
  const tutorBio = document.getElementById('tutorBio');
  const serviceHelp = document.getElementById('serviceHelp');
  const tutorCards = document.getElementById('tutorCards');

  let STATE = {
    tutors: [],
    services: [],
    slots: [],
    selectedSlotId: null,
  };

  const fmt = (iso) => {
    try {
      return new Date(iso).toLocaleString(undefined, { dateStyle:'medium', timeStyle:'short' });
    } catch(e) { return iso; }
  };

  async function loadTutores() {
    const r = await fetch('/api/tutores');
    const data = await r.json();
    STATE.tutors = data;
    tSel.innerHTML = data.map(t => `<option value="${t.id}">${t.nombre}</option>`).join('');
    renderTutorBio();
    renderTutorCards();
  }

  async function loadServicios() {
    const r = await fetch('/api/servicios');
    const data = await r.json();
    STATE.services = data;
    sSel.innerHTML = data.map(s => `
      <option value="${s.id}" data-precio="${s.precio_cent}" data-moneda="${s.moneda}" data-duracion="${s.duracion_min}">
        ${s.titulo} · ${s.duracion_min}m
      </option>
    `).join('');
    renderServiceHelp();
  }

  async function loadSlots() {
    slotsWrap.innerHTML = `<div class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></div>{{ _('Cargando…') }}`;
    const tutorId = tSel.value;
    const r = await fetch(`/api/slots/${tutorId}`);
    const data = await r.json();
    STATE.slots = data;
    renderSlots();
  }

  function renderTutorBio() {
    const t = STATE.tutors.find(x => String(x.id) === String(tSel.value));
    tutorBio.textContent = t && t.bio ? t.bio : '';
  }

  function renderServiceHelp() {
    const s = STATE.services.find(x => String(x.id) === String(sSel.value));
    if (!s) { serviceHelp.textContent = ''; return; }
    const price = (s.precio_cent/100).toFixed(2);
    serviceHelp.textContent = `${price} ${s.moneda.toUpperCase()} · ${s.duracion_min} {{ _('minutos') }}`;
  }

  function renderSlots() {
    STATE.selectedSlotId = null;
    payBtn.disabled = true;
    if (!STATE.slots.length) {
      slotsWrap.innerHTML = '';
      slotsWrap.appendChild(slotsEmpty);
      slotsEmpty.textContent = "{{ _('No hay horarios disponibles para este tutor en los próximos días.') }}";
      return;
    }
    slotsWrap.innerHTML = '';
    STATE.slots.forEach(s => {
      const btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'btn btn-outline-primary btn-sm slot-badge';
      btn.textContent = fmt(s.inicio_utc);
      btn.dataset.slotId = s.id;
      btn.addEventListener('click', () => {
        // deselecciona otros
        slotsWrap.querySelectorAll('button').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        STATE.selectedSlotId = s.id;
        payBtn.disabled = !canPay();
      });
      slotsWrap.appendChild(btn);
    });
  }

  function renderTutorCards() {
    tutorCards.innerHTML = STATE.tutors.map(t => `
      <div class="col-md-4">
        <div class="card tutor-card h-100">
          <div class="card-body">
            <h3 class="h6 mb-1">${t.nombre}</h3>
            <p class="text-muted small mb-3">${t.bio || ''}</p>
            <button class="btn btn-outline-secondary btn-sm" onclick="document.getElementById('tutorSelect').value='${t.id}'; tSel.dispatchEvent(new Event('change')); window.scrollTo({top:0, behavior:'smooth'});">
              {{ _('Reservar con') }} ${t.nombre}
            </button>
          </div>
        </div>
      </div>
    `).join('');
  }

  function canPay() {
    return !!(tSel.value && sSel.value && STATE.selectedSlotId && emailInput.value);
  }

  async function goPay() {
    if (!canPay()) return;
    payBtn.disabled = true;
    payBtn.innerHTML = `<span class="spinner-border spinner-border-sm me-2"></span>{{ _('Redirigiendo…') }}`;

    try {
      const body = {
        tutor_id: tSel.value,
        service_id: sSel.value,
        slot_id: STATE.selectedSlotId,
        email: emailInput.value
      };
      const r = await fetch('/api/create-checkout-session', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          // Si usas CSRF en JSON, añade aquí el token: 'X-CSRFToken': '{{ csrf_token() }}'
        },
        body: JSON.stringify(body)
      });
      const { id, publicKey, error } = await r.json();
      if (error) throw new Error(error);
      const stripe = Stripe(publicKey);
      await stripe.redirectToCheckout({ sessionId: id });
    } catch (err) {
      payBtn.disabled = false;
      payBtn.innerHTML = `<i class="bi bi-credit-card me-1"></i>{{ _('Pagar y reservar') }}`;
      if (window.showFlashMessage) {
        showFlashMessage(err.message || 'Error', 'danger');
      } else {
        alert(err.message || 'Error');
      }
    }
  }

  // events
  tSel.addEventListener('change', () => { renderTutorBio(); loadSlots(); });
  sSel.addEventListener('change', renderServiceHelp);
  emailInput.addEventListener('input', () => payBtn.disabled = !canPay());
  payBtn.addEventListener('click', goPay);

  // init
  (async () => {
    await loadTutores();
    await loadServicios();
    await loadSlots();
  })();
})();
</script>
{% endblock %}