<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eternity MCP</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
        href="https://fonts.googleapis.com/css2?family=Clash+Display:wght@400;500;600;700&family=Outfit:wght@300;400;500;600&display=swap"
        rel="stylesheet">
    <style>
        body {
            font-family: 'Outfit', sans-serif;
        }

        h1,
        h2,
        h3 {
            font-family: 'Clash Display', sans-serif;
        }
    </style>
</head>

<body class="bg-slate-50 text-slate-900 min-h-screen flex flex-col items-center py-12 px-4">

    <div class="w-full max-w-2xl">
        <header class="mb-10 text-center">
            <h1
                class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-violet-600 mb-2">
                Eternity MCP</h1>
            <p class="text-slate-500">Your eternal second brain.</p>
        </header>

        <!-- Add Memory Form -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-8 border border-indigo-50">
            <h2 class="text-xl font-semibold mb-6 flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="text-indigo-600">
                    <path d="M12 20h9" />
                    <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
                </svg>
                Add Memory
            </h2>
            <form action="/add" method="post" enctype="multipart/form-data" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Content</label>
                    <textarea name="content" rows="3"
                        class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all outline-none"
                        placeholder="What do you want to remember?"></textarea>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Tags (comma separated)</label>
                        <input type="text" name="tags"
                            class="w-full px-4 py-3 rounded-lg border border-slate-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all outline-none"
                            placeholder="work, ideas, links">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700 mb-1">Attachment</label>
                        <input type="file" name="file"
                            class="w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 transition-all">
                    </div>
                </div>

                <div class="pt-2">
                    <button type="submit"
                        class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 rounded-xl shadow-lg shadow-indigo-200 transition-all transform active:scale-[0.98]">
                        Save Memory
                    </button>
                </div>
            </form>
            {% if error %}
            <div class="mt-4 p-3 bg-red-50 text-red-600 rounded-lg text-sm text-center">
                {{ error }}
            </div>
            {% endif %}
        </div>

        <!-- Search Section -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-8 border border-indigo-50">
            <h2 class="text-xl font-semibold mb-6 flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="text-indigo-600">
                    <circle cx="11" cy="11" r="8" />
                    <line x1="21" y1="21" x2="16.65" y2="16.65" />
                </svg>
                Search
            </h2>
            <form action="/search_ui" method="get" class="flex gap-2">
                <input type="text" name="q" value="{{ query if query else '' }}"
                    class="flex-1 px-4 py-3 rounded-lg border border-slate-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all outline-none"
                    placeholder="Search your second brain...">
                <button type="submit"
                    class="bg-slate-800 hover:bg-slate-900 text-white px-6 rounded-lg font-medium transition-colors">Search</button>
            </form>

            {% if search_results %}
            <div class="mt-6 space-y-4">
                <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider">Top Results</h3>
                {% for result in search_results %}
                <div class="p-4 rounded-xl bg-indigo-50 border border-indigo-100 transition-all">
                    <p class="text-slate-800 mb-2">{{ result.content[:300] }}{{ '...' if result.content|length > 300
                        else '' }}</p>
                    <div class="flex flex-wrap gap-2 items-center justify-between text-xs">
                        <div class="flex gap-2">
                            {% for tag in result.tags %}
                            <span
                                class="px-2 py-1 rounded-md bg-white text-indigo-600 font-medium border border-indigo-100">#{{
                                tag }}</span>
                            {% endfor %}
                        </div>
                        <span class="text-indigo-400 font-medium">Score: {{ "%.2f"|format(result.distance) }}</span>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>

        <!-- Recent Memories -->
        {% if not search_results %}
        <div class="space-y-4">
            <h3 class="text-lg font-semibold text-slate-700 px-2">Recent Memories</h3>
            {% for memory in memories %}
            <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
                <div class="mb-3 prose prose-slate max-w-none text-slate-600">
                    {{ memory.content[:200] }}{{ '...' if memory.content|length > 200 else '' }}
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex gap-2 flex-wrap">
                        {% for tag in memory.tags %}
                        <span class="px-2 py-1 rounded-full bg-slate-100 text-slate-500 text-xs font-medium">#{{ tag
                            }}</span>
                        {% endfor %}
                        {% if memory.file_path %}
                        <span
                            class="px-2 py-1 rounded-full bg-orange-50 text-orange-600 text-xs font-medium border border-orange-100 flex items-center gap-1">
                            📎 {{ memory.file_type.split('/')[-1] if memory.file_type else 'File' }}
                        </span>
                        {% endif %}
                    </div>
                    <span class="text-xs text-slate-400">{{ memory.created_at[:10] }}</span>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}

    </div>
</body>

</html>