<!DOCTYPE html>
<html>
<head>
    <title>Video Library</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <link href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/github.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/highlight.min.js"></script>
    <link href="https://cdn.jsdelivr.net/gh/sindresorhus/github-markdown-css@4.0.0/github-markdown.min.css" rel="stylesheet">
    <script src="{{ url_for('static', filename='script.js') }}" defer></script>
    
    <style>
        /* Video list scrolling */
        .video-list {
            height: calc(100vh - 10rem);
            overflow-y: auto;
            padding-right: 0.5rem;
        }

        .video-list::-webkit-scrollbar {
            width: 6px;
        }

        .video-list::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .video-list::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 3px;
        }

        /* Processing indicator styles */
        .processing-indicator {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* Chat window styles */
        .chat-window {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 50%;
            background: white;
            z-index: 50;
            display: none;
        }
        
        .chat-window.active {
            display: flex;
            flex-direction: column;
        }

        /* Tab styles */
        .tab-content {
            display: none;
            height: calc(100vh - 16rem);
            overflow-y: auto;
        }

        .tab-content.active {
            display: block;
        }

        .tab-button {
            padding: 0.5rem 1rem;
            border-bottom: 2px solid transparent;
        }

        .tab-button.active {
            border-bottom-color: #3b82f6;
            color: #3b82f6;
        }

        .chat-header {
            position: sticky;
            top: 0;
            background: white;
            z-index: 51;
        }

        .chat-input {
            position: sticky;
            bottom: 0;
            background: white;
            z-index: 51;
            border-top: 1px solid #e5e7eb;
            padding: 1rem;
        }

        /* Chat container styles */
        .chat-container {
            display: flex;
            flex-direction: column;
            height: calc(100vh - 10rem);
            position: sticky;
            top: 4rem;
        }

        .message-container {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
        }

        .input-container {
            padding: 1rem;
            border-top: 1px solid #e5e7eb;
            background: white;
        }

        /* Adjust main content when chat is open */
        .main-content {
            transition: width 0.3s ease;
            width: 100%;
        }

        .main-content.chat-active {
            width: 50%;
        }

        /* Video list container */
        .video-list-container {
            background: white;
            border-radius: 0.5rem;
            padding: 0rem 0rem 0rem 0rem;
            box-shadow: 0 1px 3px rgba(108, 74, 74, 0.1);
            height: calc(100vh - 10rem);
            display: flex;
            flex-direction: column;
        }

        .video-list-content {
            flex: 1;
            overflow-y: auto;
        }
        .markdown-body {
            box-sizing: border-box;
            min-width: 200px;
            padding: 1rem;
        }
        .video-selected {
            border: 2px solid #2563eb; /* blue-600 border */
        }
    </style>
</head>
<body class="bg-gray-900">
    <div class="container mx-auto px-4 py-8">
        <!-- Refresh Library and URL Input Row -->
        <div class="mb-8 bg-gray-900 flex items-center gap-4">
            <a href="/refresh-library" 
               class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600 flex items-center justify-center">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                          d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
            </a>
            <input type="text" 
                   id="youtube-url-input"
                   placeholder="Enter YouTube URL" 
                   class="flex-1 rounded border px-3 py-2 focus:outline-none focus:border-blue-500">
            <button onclick="processVideo()" 
                    class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600 flex items-center justify-center">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                          d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                          d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </button>
        </div>

        <!-- Main content wrapper -->
        <div class="flex bg-gray-900 gap-4">
            <!-- Left Section: Video Library -->
            <div class="flex-1">
                <div class="video-list-container bg-gray-900">
                    <!-- Flash Messages -->
                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            {% for category, message in messages %}
                                <div class="mb-4 p-4 rounded 
                                    {% if category == 'error' %}bg-red-100 text-red-700 border border-red-400
                                    {% elif category == 'warning' %}bg-yellow-100 text-yellow-700 border border-yellow-400
                                    {% else %}bg-green-100 text-green-700 border border-green-400{% endif %}">
                                    {{ message }}
                                </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}
                    
                    <!-- Sort Controls -->
                    <div class="flex justify-end bg-gray-900 mb-4">
                        <button id="config-button" 
                                class="bg-blue-500 text-white px-3 py-2 rounded mr-2 hover:bg-blue-600 flex items-center">
                            <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                      d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                            Config
                        </button>
                        <select id="sort-select" 
                                class="rounded border px-3 py-2 focus:outline-none focus:border-blue-500"
                                onchange="changeSort(this.value)">
                            <option value="process_date">Sort by Process Date</option>
                            <option value="upload_date">Sort by Upload Date</option>
                        </select>
                    </div>

                    <!-- Video List -->
                    <div class="video-list-content bg-gray-900 space-y-2">
                        {% for video in videos %}
                        <div class="bg-gray-200 rounded-lg shadow p-2 hover:bg-gray-200 cursor-pointer transition-colors" 
                            onclick="selectVideo('{{ video.video_id }}')"
                            data-video-id="{{ video.video_id }}">
                            <div class="flex flex-col gap-1">
                                <!-- First row: Title only -->
                                <div class="text-base font-semibold hover:text-blue-600">
                                    <a href="https://www.youtube.com/watch?v={{ video.video_id }}" 
                                       target="_blank">{{ video.title }}</a>
                                </div>
                                
                                <!-- Second row: Channel, Date -->
                                <div class="flex items-center text-sm text-gray-600">
                                    <div class="flex-1">
                                        {{ video.channel }} &nbsp;|&nbsp;
                                        {{ video.upload_date.strftime('%Y-%m-%d') if video.upload_date else 'N/A' }}
                                    </div>

                                    <!-- Delete button -->
                                    <button onclick="deleteVideo('{{ video.video_id }}', event)"
                                            class="text-red-500 hover:text-red-600 flex items-center ml-4">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Right Section: Chat Box -->
            <div class="flex-1">
                <div class="bg-white rounded-lg shadow chat-container">
                    <!-- Tabs Header -->
                    <div class="flex border-b">
                        <button onclick="switchTab('transcript')" 
                                class="tab-button" 
                                data-tab="transcript"
                                disabled>
                            Transcript
                        </button>
                        <button onclick="switchTab('summary')" 
                                class="tab-button" 
                                data-tab="summary"
                                disabled>
                            Summary
                        </button>
                        <button onclick="switchTab('chat')" 
                                class="tab-button" 
                                data-tab="chat"
                                disabled>
                            Chat
                        </button>
                        <button onclick="switchTab('notes')" 
                                class="tab-button" 
                                data-tab="notes"
                                disabled>
                            Notes
                        </button>
                    </div>

                    <!-- Chat Tab -->
                    <div id="chat-tab" class="tab-content active">
                        <div class="message-container" id="chat-messages">
                            <!-- Messages will be populated here -->
                        </div>
                    </div>

                    <!-- Transcript tab -->
                    <div id="transcript-tab" class="tab-content bg-gray-200 p-2">
                        <div id="transcript-content" class="markdown-body">
                            <!-- Transcript content will be loaded here -->
                        </div>
                    </div>
                    
                    <!-- Summary tab -->
                    <div id="summary-tab" class="tab-content bg-gray-200 p-2">
                        <div id="summary-content" class="markdown-body">
                            <!-- Summary content will be loaded here -->
                        </div>
                    </div>

                    <!-- Notes tab -->
                    <div id="notes-tab" class="tab-content bg-gray-200 p-2">
                        <div class="flex flex-col h-full">
                            <textarea id="notes-editor" 
                                    class="w-full h-full p-4 border rounded resize-none focus:outline-none focus:border-blue-500"
                                    placeholder="Enter your notes here..."></textarea>
                            <div class="mt-4 flex justify-end">
                                <button onclick="saveNotes()" 
                                        class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                                    Save Notes
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Input Container (always visible) -->
                    <div class="input-container">
                        <div class="flex gap-2">
                            <input type="text" 
                                   id="chat-input"
                                   placeholder="Chat function coming soon..." 
                                   class="flex-1 rounded border px-3 py-2 focus:outline-none focus:border-blue-500"
                                   disabled>
                            <button onclick="sendMessage()" 
                                    class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
                                    disabled>
                                Send
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Config Modal -->
    <div id="config-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-lg w-3/4 h-3/4 flex flex-col">
            <div class="p-4 border-b flex justify-between items-center">
                <h2 class="text-xl font-semibold">Edit Configuration</h2>
                <button id="close-config-modal" class="text-gray-500 hover:text-gray-700">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <div class="flex-1 p-4 overflow-hidden">
                <textarea id="config-editor" 
                          class="w-full h-full p-4 border rounded font-mono text-sm resize-none focus:outline-none focus:border-blue-500"
                          spellcheck="false"></textarea>
            </div>
            <div class="p-4 border-t flex justify-end">
                <button id="save-config-button" 
                        class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                    Save Configuration
                </button>
            </div>
        </div>
    </div>
</body>
</html>
