<!DOCTYPE html>
<html lang="de">
<head>
    <%- include('partials/head') %>
    <style>
        #chatLog::-webkit-scrollbar { width: 8px; }
        #chatLog::-webkit-scrollbar-thumb { background: rgba(120,120,120,.4); border-radius: 4px; }
        /* Typing indicator: three dots with a staggered bounce. */
        .typing-dot {
            width: 7px; height: 7px; border-radius: 9999px;
            background: currentColor; display: inline-block;
            opacity: 0.35;
            animation: chat-typing 1.2s infinite ease-in-out both;
        }
        .typing-dot:nth-child(2) { animation-delay: 0.18s; }
        .typing-dot:nth-child(3) { animation-delay: 0.36s; }
        @keyframes chat-typing {
            0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
            40% { transform: translateY(-5px); opacity: 1; }
        }
        @media (prefers-reduced-motion: reduce) {
            .typing-dot { animation: none; opacity: 0.6; }
        }
        /* Thread rename/delete rely on hover/focus to appear — neither exists on a
           touchscreen, so the controls would be unreachable. Show them on small
           (likely touch) screens. */
        @media (max-width: 768px) {
            .threadRename, .threadDelete { opacity: 1 !important; }
        }
        /* Markdown rendering inside assistant bubbles */
        .chat-md { line-height: 1.5; }
        .chat-md > *:first-child { margin-top: 0; }
        .chat-md > *:last-child { margin-bottom: 0; }
        .chat-md p { margin: 0 0 0.5rem 0; }
        .chat-md h1, .chat-md h2, .chat-md h3 { font-weight: 600; margin: 0.6rem 0 0.3rem 0; line-height: 1.25; }
        .chat-md h1 { font-size: 1.05rem; }
        .chat-md h2 { font-size: 1rem; }
        .chat-md h3 { font-size: 0.95rem; }
        .chat-md ul, .chat-md ol { margin: 0 0 0.5rem 0; padding-left: 1.25rem; }
        .chat-md li { margin: 0.15rem 0; }
        .chat-md code { background: rgba(0,0,0,0.08); padding: 0.1rem 0.3rem; border-radius: 4px; font-size: 0.85em; }
        .dark .chat-md code { background: rgba(255,255,255,0.12); }
        .chat-md pre { background: rgba(0,0,0,0.08); padding: 0.6rem; border-radius: 6px; overflow-x: auto; margin: 0 0 0.5rem 0; }
        .dark .chat-md pre { background: rgba(0,0,0,0.35); }
        .chat-md pre code { background: none; padding: 0; }
        .chat-md a { text-decoration: underline; }
        .chat-md hr { border: 0; border-top: 1px solid rgba(0,0,0,0.12); margin: 0.7rem 0; }
        .dark .chat-md hr { border-top-color: rgba(255,255,255,0.15); }
        /* Tabellen (z. B. Anforderung/Erfahrung-Vergleiche). Der Wrapper scrollt,
           damit eine breite Tabelle nicht die Chat-Blase auseinanderzieht. */
        .chat-md-table { overflow-x: auto; margin: 0 0 0.5rem 0; }
        .chat-md table { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
        .chat-md th, .chat-md td { border: 1px solid rgba(0,0,0,0.12); padding: 0.35rem 0.55rem; text-align: left; vertical-align: top; }
        .chat-md th { background: rgba(0,0,0,0.04); font-weight: 600; }
        .dark .chat-md th, .dark .chat-md td { border-color: rgba(255,255,255,0.15); }
        .dark .chat-md th { background: rgba(255,255,255,0.06); }
    </style>
</head>
<body class="min-h-screen flex flex-col transition-colors duration-300 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100" id="body">
    <%- include('partials/header', { hideSettings: true }) %>

    <main class="container mx-auto px-4 py-4">
        <div class="flex items-center justify-between mb-3">
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">KI-Bewerbungs-Assistent</h2>
            <button id="newThreadBtn"
                class="px-3 py-1.5 rounded-md bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium">
                + Neuer Chat
            </button>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-[240px_1fr] gap-3 min-h-[360px] md:h-[calc(100vh-180px)]">
            <!-- Thread sidebar -->
            <aside class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 overflow-hidden flex flex-col max-h-48 md:max-h-none">
                <div class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">Verläufe</div>
                <ul id="threadList" class="overflow-y-auto flex-1 divide-y divide-gray-100 dark:divide-gray-700">
                    <% threads.forEach(function(t) { %>
                        <li data-thread-li="<%= t.id %>">
                            <div class="flex items-center group <%= (t.id === activeId) ? 'bg-blue-50 dark:bg-gray-700' : '' %>">
                                <a href="/chat?thread=<%= t.id %>"
                                   data-thread="<%= t.id %>"
                                   class="threadLink flex-1 min-w-0 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700/40">
                                    <div class="truncate font-medium"><%= t.titel || '(ohne Titel)' %></div>
                                    <div class="text-[11px] text-gray-400"><%= new Date(t.updated_at).toLocaleDateString('de-DE') %></div>
                                </a>
                                <button type="button" data-rename-thread="<%= t.id %>"
                                    class="threadRename shrink-0 p-1.5 rounded text-gray-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/30 opacity-0 group-hover:opacity-100 focus:opacity-100"
                                    title="Namen ändern" aria-label="Namen ändern">
                                    <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                    </svg>
                                </button>
                                <button type="button" data-delete-thread="<%= t.id %>"
                                    class="threadDelete shrink-0 mr-2 p-1.5 rounded text-gray-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 opacity-0 group-hover:opacity-100 focus:opacity-100"
                                    title="Verlauf löschen" aria-label="Verlauf löschen">
                                    <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 7h22M9 7V4a1 1 0 011-1h4a1 1 0 011 1v3"></path>
                                    </svg>
                                </button>
                            </div>
                        </li>
                    <% }); %>
                    <% if (!threads.length) { %>
                        <li class="px-3 py-4 text-sm text-gray-400 text-center">Noch keine Verläufe.</li>
                    <% } %>
                </ul>
            </aside>

            <!-- Message area -->
            <section class="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 flex flex-col overflow-hidden h-[60vh] md:h-auto">
                <div id="chatLog" class="flex-1 overflow-y-auto p-4 space-y-3 text-gray-800 dark:text-gray-100">
                    <% if (!messages.length) { %>
                        <div class="h-full flex items-center justify-center text-gray-400 text-sm px-6">
                            Stelle eine Frage zu deinen Bewerbungen.
                        </div>
                    <% } %>
                </div>

                <form id="chatForm" class="border-t border-gray-200 dark:border-gray-700 p-3 flex gap-2">
                    <textarea id="chatInput" rows="1" autocomplete="off"
                        class="flex-1 resize-none rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-800 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
                        placeholder="Frage stellen … (Enter zum Senden, Shift+Enter = Zeilenumbruch)"></textarea>
                    <button type="submit"
                        class="px-4 py-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium disabled:opacity-50"
                        id="sendBtn">Senden</button>
                </form>
            </section>
        </div>
    </main>

    <script id="initialMessages" type="application/json"><%- JSON.stringify(messages.map(function(m){ return { role: m.role, content: m.content }; })).replace(/</g, '\\u003c') %></script>
    <input type="hidden" id="activeThread" value="<%= activeId || '' %>">

    <script>
        window.__CHAT_BOOT__ = {
            activeId: <%= activeId ? JSON.stringify(activeId) : 'null' %>,
            needsThread: <%= activeId ? 'false' : 'true' %>
        };
    </script>
    <script src="/js/chat.js"></script>
</body>
</html>