{% extends "layout.html" %}
{% block title %}Prompt to Video{% endblock %}
{% block content %}
  <style>
    .shell { background: linear-gradient(135deg, rgba(17,24,39,0.95), rgba(15,23,42,0.95)); border: 1px solid rgba(34, 211, 238, 0.25); border-radius: 20px; padding: 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(34,211,238,0.1) inset; backdrop-filter: blur(10px); }
    
    .header { margin-bottom: 32px; }
    h1 { margin: 0 0 8px; font-size: 32px; letter-spacing: -0.02em; font-weight: 800; background: linear-gradient(135deg, #22d3ee, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    p.lead { margin: 0; color: #94a3b8; font-size: 16px; line-height: 1.6; }
    
    .form-section { margin-bottom: 24px; }
    .section-label { font-size: 14px; font-weight: 700; color: #22d3ee; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
    
    textarea { min-height: 160px; resize: vertical; font-family: 'SF Mono', Consolas, monospace; line-height: 1.6; font-size: 14px; }
    textarea::placeholder { color: #475569; }
    
    .grid { display: grid; gap: 24px; }
    .controls-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
    
    .control-group { position: relative; }
    .control-icon { position: absolute; top: 38px; left: 12px; font-size: 16px; pointer-events: none; opacity: 0.5; }
    .control-group input,
    .control-group select { padding-left: 38px; }
    
    button[type="submit"] { position: relative; overflow: hidden; }
    button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }
    
    /* Loading spinner */
    .loading-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15,23,42,0.9); backdrop-filter: blur(8px); z-index: 9999; align-items: center; justify-content: center; }
    .loading-overlay.active { display: flex; }
    
    .loading-content { text-align: center; animation: fadeInUp 0.5s ease; }
    @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
    
    .spinner { width: 80px; height: 80px; margin: 0 auto 24px; position: relative; }
    .spinner-ring { position: absolute; width: 100%; height: 100%; border: 4px solid transparent; border-top-color: #22d3ee; border-radius: 50%; animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
    .spinner-ring:nth-child(1) { animation-delay: -0.45s; }
    .spinner-ring:nth-child(2) { animation-delay: -0.3s; border-top-color: #06b6d4; }
    .spinner-ring:nth-child(3) { animation-delay: -0.15s; border-top-color: #0891b2; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    
    .loading-text { font-size: 20px; font-weight: 700; color: #22d3ee; margin-bottom: 8px; }
    .loading-subtext { font-size: 14px; color: #94a3b8; }
    .loading-steps { margin-top: 16px; font-size: 13px; color: #64748b; }
    
    .status { margin-top: 24px; padding: 20px; border-radius: 12px; background: rgba(11,18,34,0.6); border: 1px solid rgba(255,255,255,0.08); animation: slideIn 0.3s ease; }
    @keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
    
    .error { border-color: #f43f5e; background: rgba(244,63,94,0.1); color: #fecdd3; }
    .success { border-color: #22d3ee; background: rgba(34,211,238,0.1); color: #a5f3fc; }
    
    .link { display: inline-flex; align-items: center; gap: 8px; color: #22d3ee; text-decoration: none; font-weight: 700; margin-top: 12px; padding: 12px 20px; background: rgba(34,211,238,0.1); border-radius: 8px; transition: all 0.2s ease; }
    .link:hover { background: rgba(34,211,238,0.2); transform: translateX(4px); }
    
    /* Quick presets */
    .presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
    .preset-btn { padding: 6px 12px; background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.2); border-radius: 6px; color: #22d3ee; font-size: 13px; cursor: pointer; transition: all 0.2s ease; }
    .preset-btn:hover { background: rgba(34,211,238,0.2); transform: translateY(-1px); }
  </style>

  <div class="loading-overlay" id="loadingOverlay">
    <div class="loading-content">
      <div class="spinner">
        <div class="spinner-ring"></div>
        <div class="spinner-ring"></div>
        <div class="spinner-ring"></div>
      </div>
      <div class="loading-text">🎬 Rendering Your Video</div>
      <div class="loading-subtext">This may take 2-3 minutes...</div>
      <div class="loading-steps">
        <div>Planning scenes with AI ✓</div>
        <div>Generating visuals ⏳</div>
        <div>Creating narration...</div>
        <div>Assembling final video...</div>
      </div>
    </div>
  </div>

  <div class="shell">
    <div class="header">
      <h1>✨ Prompt → Video</h1>
      <p class="lead">Transform your ideas into narrated, multi-scene videos with AI-powered generation and professional effects.</p>
    </div>

    <form method="POST" class="grid" id="renderForm">
      <div class="form-section">
        <div class="section-label">📝 Your Idea</div>
        <textarea id="prompt" name="prompt" rows="8" required placeholder="Describe your video idea... e.g., 'The history of space exploration from Sputnik to Mars rovers'">{{ prompt }}</textarea>
        <div class="presets">
          <button type="button" class="preset-btn" onclick="setPreset('The journey of a coffee bean from farm to cup')">☕ Coffee Journey</button>
          <button type="button" class="preset-btn" onclick="setPreset('How artificial intelligence is transforming healthcare')">🤖 AI Healthcare</button>
          <button type="button" class="preset-btn" onclick="setPreset('A day in the life of a deep sea creature')">🐠 Deep Sea</button>
        </div>
      </div>

      <div class="form-section">
        <div class="section-label">⚙️ Video Settings</div>
        <div class="controls-row">
          <div class="control-group">
            <label for="duration">Duration</label>
            <span class="control-icon">⏱️</span>
            <input id="duration" name="duration" type="number" min="10" max="600" value="{{ duration }}" placeholder="60">
          </div>
          <div class="control-group">
            <label for="scenes">Scenes</label>
            <span class="control-icon">🎞️</span>
            <input id="scenes" name="scenes" type="number" min="2" max="25" value="{{ scenes }}" placeholder="5">
          </div>
          <div class="control-group">
            <label for="aspect">Aspect Ratio</label>
            <span class="control-icon">📐</span>
            <select id="aspect" name="aspect">
              <option value="horizontal" {% if aspect == 'horizontal' %}selected{% endif %}>16:9 (YouTube)</option>
              <option value="vertical" {% if aspect == 'vertical' %}selected{% endif %}>9:16 (Shorts)</option>
            </select>
          </div>
          <div class="control-group">
            <label for="image_provider">Image Source</label>
            <span class="control-icon">🎨</span>
            <select id="image_provider" name="image_provider">
              <option value="gemini" {% if image_provider == 'gemini' %}selected{% endif %}>AI Generate</option>
              <option value="stock" {% if image_provider == 'stock' %}selected{% endif %}>Stock Photos</option>
            </select>
          </div>
        </div>
      </div>

      <button type="submit" id="submitBtn">🎬 Render Video</button>
    </form>

    {% if error %}
      <div class="status error">⚠️ {{ error }}</div>
    {% endif %}
    {% if video_path %}
      <div class="status success">
        <div>✅ Video ready!</div>
        <a class="link" href="{{ url_for('download', filename=video_path.name if video_path else '') }}">⬇️ Download Video</a>
      </div>
    {% endif %}
  </div>

  <script>
    function setPreset(text) {
      document.getElementById('prompt').value = text;
    }

    document.getElementById('renderForm').addEventListener('submit', async function(e) {
      e.preventDefault();
      const submitBtn = document.getElementById('submitBtn');
      const loadingOverlay = document.getElementById('loadingOverlay');
      const form = this;
      
      submitBtn.disabled = true;
      submitBtn.innerHTML = '⏳ Starting...';
      
      // Show submitting state
      loadingOverlay.classList.add('active');
      const loadingText = document.querySelector('.loading-text');
      const loadingSubtext = document.querySelector('.loading-subtext');
      const loadingSteps = document.querySelector('.loading-steps');
      
      const originalText = loadingText.textContent;
      const originalSubtext = loadingSubtext.textContent;
      const originalStepsDisplay = loadingSteps.style.display;

      loadingText.textContent = '🚀 Launching Job...';
      loadingSubtext.textContent = 'Queueing your video request...';
      loadingSteps.style.display = 'none';

      const formData = new FormData(form);
      const data = {
        prompt: formData.get('prompt'),
        duration: formData.get('duration'),
        scenes: formData.get('scenes'),
        aspect: formData.get('aspect'),
        image_provider: formData.get('image_provider')
      };

      try {
        const response = await fetch('/api/render', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data)
        });
        
        const result = await response.json();
        
        loadingOverlay.classList.remove('active');
        
        // Restore overlay text for next time (if we wanted to use it for something else)
        setTimeout(() => {
            loadingText.textContent = originalText;
            loadingSubtext.textContent = originalSubtext;
            loadingSteps.style.display = originalStepsDisplay;
        }, 500);

        if (response.ok) {
          // Remove old status messages
          document.querySelectorAll('.status').forEach(el => el.remove());

          // Show success message
          const statusDiv = document.createElement('div');
          statusDiv.className = 'status success';
          statusDiv.innerHTML = `
            <div style="font-weight: bold; font-size: 18px; margin-bottom: 8px;">✅ Job Started!</div>
            <div>Your video is being rendered in the background.</div>
            <div style="margin-top: 8px; font-size: 14px; opacity: 0.9;">
              Run ID: <code>${result.run_id}</code><br>
              You can submit another request now. Check <a href="/history" style="text-decoration: underline; font-weight: bold;">History</a> for progress.
            </div>
          `;
          form.parentNode.insertBefore(statusDiv, form.nextSibling);
          
          submitBtn.innerHTML = '🎬 Render Another Video';
        } else {
          throw new Error(result.error || 'Failed to start job');
        }
      } catch (err) {
        loadingOverlay.classList.remove('active');
        document.querySelectorAll('.status').forEach(el => el.remove());
        
        const statusDiv = document.createElement('div');
        statusDiv.className = 'status error';
        statusDiv.textContent = '⚠️ Error: ' + err.message;
        form.parentNode.insertBefore(statusDiv, form.nextSibling);
        
        submitBtn.innerHTML = '🎬 Render Video';
      } finally {
        submitBtn.disabled = false;
      }
    });
  </script>
{% endblock %}