{% extends "base.html" %}

{% block title %}Edit: {{ title }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
{% endblock %}

{% block content %}
    <div class="editor-container">
        <!-- Header -->
        <div class="header">
            <!-- Concurrent editing warning banner -->
            <div id="concurrent-editing-warning" style="display: none; background: #dc3545; color: white; padding: 15px; border-radius: 5px; margin-bottom: 15px; font-weight: bold;">
                ⚠️ ACHTUNG: <span id="other-editor-name"></span> bearbeitet dieses Video gerade auch! 
                Koordiniert euch, um Konflikte zu vermeiden.
            </div>
            
            <div class="header-title-row">
                <h1>Editing: {{ title }}</h1>
                {% if corrected %}
                <span class="correction-hint">Untertitel bereits korrigiert</span>
                {% endif %}
            </div>
            <div class="header-actions">
                <a href="{{ url_for('index.index') }}" class="btn btn-secondary">Back to List</a>
                {% if issue_url %}
                <a href="{{ issue_url }}" target="_blank" class="btn btn-info">🔗 GitLab Issue</a>
                {% endif %}
                <button id="manual-edit-btn" class="btn btn-secondary">✏️ Manuell editieren</button>
                <button id="reset-btn" class="btn btn-danger">Edits zurücksetzen</button>
                <button id="export-btn" class="btn btn-primary">VTT herunterladen</button>
                <button id="push-to-git-btn" class="btn btn-success">📤 Veröffentlichen</button>
            </div>
        </div>

        <!-- Video Input -->
        <!-- Video is always auto-loaded from XML, no manual input needed -->

        <!-- Loading indicator -->
        <div id="loading" class="loading" style="display: none;">
            <div class="spinner"></div>
            <p>Loading video...</p>
        </div>

        <!-- Main content area -->
        <div class="content-wrapper">
            <!-- Left side: Subtitles comparison -->
            <div class="left-panel">
                <!-- Quality Legend -->
                <div class="timeline-legend">
                    <span class="legend-item"><span class="legend-color blue"></span> Perfect match</span>
                    <span class="legend-item"><span class="legend-color yellow"></span> Good (&gt;85%)</span>
                    <span class="legend-item"><span class="legend-color red"></span> Poor (≤85%)</span>
                </div>
                
                <div class="subtitle-column">
                    <h3>VTT (From Git)</h3>
                    <div id="srt-display" class="subtitle-display"></div>
                </div>
                <div class="subtitle-column">
                    <h3>SBV (YouTube Captions)</h3>
                    <div id="sbv-display" class="subtitle-display"></div>
                </div>
                
                <!-- Recalculate Diff Button -->
                <div class="recalc-section">
                    <button id="recalc-diff-btn" class="btn btn-secondary">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 8px;">
                            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
                        </svg>
                        Diff neu berechnen
                    </button>
                    <span id="recalc-status" class="recalc-status"></span>
                </div>
            </div>

            <!-- Right side: Video and Editor -->
            <div class="right-panel">
                <!-- Video Player -->
                <div class="video-section">
                    <div id="video-container" style="display: none;">
                        <video id="video-player" controls>
                            <source id="video-source" :src="videoUrl" type="video/mp4">
                            <track kind="subtitles" src="/api/subtitles/{{ comparison_name }}.vtt" srclang="de" label="Bearbeitete Untertitel" default>
                            Your browser does not support the video tag.
                        </video>
                        <div class="video-controls">
                            <span id="current-time">00:00:00</span>
                            <span> / </span>
                            <span id="duration">00:00:00</span>
                        </div>
                        
                        <!-- Playback controls -->
                        <div class="playback-controls">
                            <button id="rewind-btn" class="playback-btn" title="Rewind 10s (Left Arrow)" aria-label="Rewind 10 seconds">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M1 4v6h6"/>
                                    <path d="M3.51 15a9 9 0 102.13-9.36L1 10"/>
                                </svg>
                                <span style="font-size: 10px; position: absolute; margin-top: 4px;">10</span>
                            </button>
                            <button id="play-pause-btn" class="playback-btn" title="Play/Pause (Space)" aria-label="Play or Pause">
                                <svg id="play-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <polygon points="5 3 19 12 5 21 5 3"/>
                                </svg>
                                <svg id="pause-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: none;">
                                    <rect x="6" y="4" width="4" height="16"/>
                                    <rect x="14" y="4" width="4" height="16"/>
                                </svg>
                            </button>
                            <button id="stop-btn" class="playback-btn" title="Stop (S)" aria-label="Stop">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="5" y="5" width="14" height="14"/>
                                </svg>
                            </button>
                            <button id="forward-btn" class="playback-btn" title="Forward 10s (Right Arrow)" aria-label="Forward 10 seconds">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M23 4v6h-6"/>
                                    <path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/>
                                </svg>
                                <span style="font-size: 10px; position: absolute; margin-top: 4px;">10</span>
                            </button>
                        </div>
                        
                        <!-- Navigation controls -->
                        <div class="nav-controls">
                            <button id="prev-btn" class="nav-btn" title="Previous segment">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M19 12H5M12 19l-7-7 7-7"/>
                                </svg>
                            </button>
                            <button id="next-btn" class="nav-btn" title="Next segment">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M5 12h14M12 5l7 7-7 7"/>
                                </svg>
                            </button>
                            <button id="offset-minus-btn" class="nav-btn offset-btn" title="Previous segment offset">-0</button>
                            <button id="repeat-btn" class="nav-btn" title="Repeat current segment">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M17 1l4 4-4 4"/>
                                    <path d="M3 11V9a4 4 0 014-4h14"/>
                                    <path d="M7 23l-4-4 4-4"/>
                                    <path d="M21 13v2a4 4 0 01-4 4H3"/>
                                </svg>
                            </button>
                            <button id="offset-plus-btn" class="nav-btn offset-btn" title="Next segment offset">+0</button>
                            <button id="skip-match-btn" class="nav-btn" title="Skip to next issue">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M5 4l10 8-10 8V4z"/>
                                    <path d="M15 4l10 8-10 8V4z"/>
                                </svg>
                            </button>
                        </div>
                        
                        <!-- Quality timeline -->
                        <div class="quality-timeline-container">
                            <div class="quality-timeline" id="quality-timeline" title="Click to jump to position"></div>
                        </div>
                        
                        <!-- Auto-repeat on difference checkbox -->
                        <div style="margin-top: 10px; padding: 10px; background: #f8f9fa; border-radius: 5px;">
                            <label style="display: flex; align-items: center; cursor: pointer;">
                                <input type="checkbox" id="auto-repeat-diff-checkbox" style="margin-right: 8px;">
                                <span>🔁 Auto-repeat on difference (automatically loop problematic segments)</span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Editor section below video -->
                <div class="editor-section">
                    <h3>Edit Current Segment</h3>
                    <div class="editor-info">
                        <div class="time-display">
                            <span id="segment-time">--:--:--,--- → --:--:--,---</span>
                        </div>
                        <span id="segment-status" class="status-badge"></span>
                    </div>
                    <textarea id="text-editor" rows="4" placeholder="Select a segment to edit..."></textarea>
                    
                    <div class="editor-actions">
                        <button id="save-edit-btn" class="btn btn-primary" disabled>Save Edit</button>
                        <button id="revert-btn" class="btn btn-secondary" disabled>Revert to Original</button>
                        <button id="mark-correct-btn" class="btn btn-success" style="display: none;">✓ Mark as Correct</button>
                    </div>
                    
                    <!-- Word-level diff display -->
                    <div id="word-diff-display" style="display: none; margin-top: 10px; padding: 10px; background: #f8f9fa; border-radius: 5px; border-left: 4px solid #ffc107;">
                        <div style="font-weight: bold; margin-bottom: 5px;">📝 Comparison with YouTube:</div>
                        <div id="word-diff-content" style="font-family: monospace; line-height: 1.6;"></div>
                    </div>
                    <div id="edit-history" class="edit-history" style="display: none;"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Insert Segment Modal -->
    <div id="insert-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <h3>Insert New Segment</h3>
            <div class="form-group">
                <label for="insert-start-time">Start Time (HH:MM:SS,MS):</label>
                <input type="text" id="insert-start-time" placeholder="00:00:00,000">
            </div>
            <div class="form-group">
                <label for="insert-end-time">End Time (HH:MM:SS,MS):</label>
                <input type="text" id="insert-end-time" placeholder="00:00:00,000">
            </div>
            <div class="form-group">
                <label for="insert-text">Text:</label>
                <textarea id="insert-text" rows="4" placeholder="Enter subtitle text..."></textarea>
            </div>
            <div class="modal-actions">
                <button id="insert-save-btn" class="btn btn-primary">Insert</button>
                <button id="insert-cancel-btn" class="btn btn-secondary">Cancel</button>
            </div>
        </div>
    </div>

    <!-- Reset Confirmation Modal -->
    <div id="reset-modal" class="modal">
        <div class="modal-content">
            <h3>⚠️ Alle Edits zurücksetzen?</h3>
            <p>
                Dies wird die Working Copy löschen und alle deine Änderungen verwerfen.
                <br><br>
                Diese Aktion kann nicht rückgängig gemacht werden!
            </p>
            <div class="modal-actions">
                <button id="reset-confirm-btn" class="btn btn-danger">Ja, alle Edits löschen</button>
                <button id="reset-cancel-btn" class="btn btn-secondary">Abbrechen</button>
            </div>
        </div>
    </div>

    <!-- Manual Edit Warning Modal -->
    <div id="manual-edit-warning-modal" class="modal">
        <div class="modal-content">
            <h3 style="color: #dc3545;">⚠️ Danger Zone</h3>
            <div class="warning-message">
                <p><strong>Manuelles Editieren kann zu Inkonsistenzen führen.</strong></p>
                <p>Bitte vorsichtig nutzen und nur wenn notwendig.</p>
                <ul style="text-align: left; margin: 15px 0;">
                    <li>Änderungen an der Struktur können die Synchronisation stören</li>
                    <li>Fehlerhafte VTT-Syntax kann Probleme verursachen</li>
                    <li>Nutze wenn möglich die normalen Bearbeitungsfunktionen</li>
                </ul>
            </div>
            <div class="modal-actions">
                <button id="manual-edit-warning-proceed-btn" class="btn btn-danger">Trotzdem fortfahren</button>
                <button id="manual-edit-warning-cancel-btn" class="btn btn-secondary">Abbrechen</button>
            </div>
        </div>
    </div>

    <!-- Manual Edit Modal -->
    <div id="manual-edit-modal" class="modal">
        <div class="modal-content modal-large">
            <h3>✏️ Working Copy manuell editieren</h3>
            <p>Hier kannst du die VTT-Datei direkt als Text bearbeiten.</p>
            <textarea id="manual-edit-text" class="manual-edit-textarea" spellcheck="false"></textarea>
            <div class="modal-actions">
                <button id="manual-save-btn" class="btn btn-primary">Speichern</button>
                <button id="manual-cancel-btn" class="btn btn-secondary">Abbrechen</button>
            </div>
        </div>
    </div>

    <!-- GitLab Push Warning Modal -->
    <div id="gitlab-push-modal" class="modal">
        <div class="modal-content">
            <h3>📤 Zur Veröffentlichung vorschlagen</h3>
            <div class="warning-message">
                <p>Du bist dabei, deine Änderungen zur Veröffentlichung vorzuschlagen.</p>
                <ul style="text-align: left; margin: 15px 0;">
                    <li>Deine Änderungen werden <strong>zur Überprüfung vorgeschlagen</strong>.</li>
                    <li>Die Untertitel werden <strong>noch nicht live</strong> geschaltet.</li>
                    <li>Nach der Überprüfung können sie dann veröffentlicht werden.</li>
                    <li><strong>Deine Arbeit ist bereits in dieser App gespeichert.</strong> Du musst nicht vorschlagen, wenn die Arbeit noch nicht fertig ist.</li>
                </ul>
                
                <div style="margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 5px;">
                    <p style="margin-bottom: 10px;"><strong>Hast du die Untertitel vollständig korrigiert oder nur einige Verbesserungen gemacht?</strong></p>
                    <p style="font-size: 14px; color: #666;">Absolute Perfektion ist nicht nötig, aber hast du das Gefühl, das kann so guten Gewissens erstmal abgeschlossen werden?</p>
                </div>
            </div>
            <div class="modal-actions" style="flex-direction: column; gap: 10px;">
                <button id="gitlab-push-complete-btn" class="btn btn-success" style="width: 100%;">
                    ✓ Ja, das ist soweit fertig (Aufgabe wird geschlossen)
                </button>
                <button id="gitlab-push-partial-btn" class="btn btn-warning" style="width: 100%;">
                    📝 Ich schlage einen Zwischenstand vor, das ist nicht abgeschlossen
                </button>
                <button id="gitlab-push-cancel-btn" class="btn btn-secondary" style="width: 100%;">
                    Abbrechen
                </button>
            </div>
        </div>
    </div>

    <!-- Success Message -->
    <div id="success-message" class="success-banner" style="display: none;">
        <div class="success-content">
            <span class="success-icon">✓</span>
            <div class="success-text">
                <strong id="success-title">Erfolg!</strong>
                <p id="success-details"></p>
            </div>
            <button id="success-close" class="success-close">×</button>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/utilities.js') }}"></script>
    <script src="{{ url_for('static', filename='js/vtt-utils.js') }}"></script>
    <script src="{{ url_for('static', filename='js/timeline-renderer.js') }}"></script>
    <script src="{{ url_for('static', filename='js/subtitle-list-renderer.js') }}"></script>
    <script src="{{ url_for('static', filename='js/edit-history-renderer.js') }}"></script>
    <script src="{{ url_for('static', filename='js/video-controls.js') }}"></script>
    <script src="{{ url_for('static', filename='js/editor-actions.js') }}"></script>
    <script src="{{ url_for('static', filename='js/editor-insert-modal.js') }}"></script>
    <script src="{{ url_for('static', filename='js/editor-manual-edit-modal.js') }}"></script>
    <script src="{{ url_for('static', filename='js/editor-reset-modal.js') }}"></script>
    <script src="{{ url_for('static', filename='js/editor-gitlab-push-modal.js') }}"></script>
    <script src="{{ url_for('static', filename='js/editor.js') }}"></script>
    <script>
        // Initialize editor with data from template
        SubtitleEditor.init({
            comparisonName: "{{ comparison_name }}",
            videoUrl: {{ video_url|tojson if video_url else 'null' }}
        });
    </script>
{% endblock %}