{% extends "webapp/base.html" %}
{% block title %}{{ t('intro_video_title') }} — FIGHTSKILL{% endblock %}

{% block content %}
<div style="max-width:900px;margin:0 auto;padding:2rem 1rem">
  
  <!-- Back Button -->
  <button onclick="window.history.back()" class="btn btn-ghost btn-sm mb-3" style="display:inline-flex">
    ← {{ t('back') }}
  </button>
  
  <!-- Video Container -->
  <div class="card" style="padding:0;overflow:hidden;margin-bottom:1.5rem;position:relative">
    {% if video_url %}
    <video id="tutorialVideo" src="{{ video_url }}" controls autoplay style="width:100%;display:block;aspect-ratio:16/9;background:#000"></video>
    {% else %}
    <div style="width:100%;aspect-ratio:16/9;background:var(--bg2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem">
      <span style="font-size:4rem">🎬</span>
      <p style="color:var(--text-muted)">{{ t('no_video') | default('No tutorial video available for this language.') }}</p>
      <button onclick="skipTutorial()" class="btn btn-primary">{{ t('skip_tutorial') | default('Skip Tutorial') }}</button>
    </div>
    {% endif %}
    
    <!-- Skip Button (appears after 5 seconds) -->
    <button id="skipBtn" onclick="skipTutorial()" 
            style="position:absolute;top:1rem;right:1rem;background:rgba(0,0,0,0.7);border:1px solid var(--border);color:var(--text);padding:0.5rem 1rem;border-radius:50px;cursor:pointer;font-size:0.8rem;font-weight:600;display:none;backdrop-filter:blur(8px);transition:all 0.2s;z-index:10"
            onmouseenter="this.style.background='var(--neon)';this.style.color='#000'"
            onmouseleave="this.style.background='rgba(0,0,0,0.7)';this.style.color='var(--text)'">
      ✕ {{ t('skip') }}
    </button>
  </div>
  
  <!-- Instructions -->
  <div style="text-align:center">
    <h2 style="margin-bottom:0.5rem">{{ t('tutorial_title') | default('Welcome to FIGHTSKILL') }}</h2>
    <p style="color:var(--text-muted);font-size:0.9rem;margin-bottom:1.5rem">{{ t('tutorial_desc') | default('Watch this short tutorial to learn how to use the platform.') }}</p>
    
    <button onclick="skipTutorial()" class="btn btn-outline" style="min-width:200px">
      {{ t('skip_tutorial') }} →
    </button>
  </div>
  
</div>

<script>
// Show skip button after 5 seconds
setTimeout(() => {
  document.getElementById('skipBtn').style.display = 'block';
}, 5000);

// Auto-skip when video ends
const video = document.getElementById('tutorialVideo');
if (video) {
  video.addEventListener('ended', skipTutorial);
}

function skipTutorial() {
  // Mark as seen
  fetch('{{ url_for("web.intro_done") }}', { method: 'POST' })
    .then(() => {
      // Fade out
      document.body.style.opacity = '0';
      document.body.style.transition = 'opacity 0.3s';
      setTimeout(() => {
        window.location.href = '{{ url_for("web.home") }}';
      }, 300);
    });
}

// Keyboard shortcut
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' || e.key === ' ') {
    skipTutorial();
  }
});
</script>
{% endblock %}