{% extends "base.html" %}

{% block content %}
<div class="min-h-screen bg-gray-50">
    <div class="bg-white border-b border-gray-200 py-10">
        <div class="max-w-5xl mx-auto px-8">
            <div class="flex items-center gap-4 mb-2">
                <div class="w-10 h-10 rounded-xl bg-blue-600 text-white flex items-center justify-center shadow-lg shadow-blue-100">
                    <i class="fas fa-robot"></i>
                </div>
                <div>
                    <h1 class="text-4xl font-black text-slate-900">Discovery Agent</h1>
                    <p class="text-slate-500">Autonomous Mixture of Experts Pattern Exploration</p>
                </div>
            </div>

            <form action="/agent" method="POST" class="mt-8 relative">
                <input type="text" name="topic_query" value="{{ query }}" required
                       placeholder="Specify research pattern (e.g., T cell exhaustion, CRISPR-Cas9)..."
                       class="w-full bg-white border-2 border-slate-200 rounded-2xl px-6 py-4 text-lg shadow-sm focus:border-blue-500 transition-all outline-none pr-32">
                <button type="submit" class="absolute right-2 top-2 bottom-2 bg-blue-600 text-white px-8 rounded-xl font-bold hover:bg-blue-700 transition">
                    Explore
                </button>
            </form>
        </div>
    </div>

    <div class="max-w-5xl mx-auto px-8 py-10">
        {% if experts %}
        <div class="bg-white rounded-3xl shadow-xl border border-slate-100 overflow-hidden">
            <div class="px-8 py-4 bg-slate-50 border-b border-slate-100 flex justify-between items-center">
                <span class="text-[10px] font-black uppercase text-slate-400 tracking-widest">OpenAlex Intelligence Corpus</span>
                <span class="text-[10px] font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded">Ranked by Citation Impact</span>
            </div>
            <table class="w-full text-left">
                <thead class="bg-slate-50/50 text-slate-400 text-[10px] uppercase tracking-widest">
                    <tr>
                        <th class="px-8 py-5">Expert Profile</th>
                        <th class="px-8 py-5">Institutional Affiliation</th>
                        <th class="px-8 py-5 text-center">H-Index</th>
                        <th class="px-8 py-5 text-center">Citations</th>
                        <th class="px-8 py-5 text-right">Profile</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    {% for expert in experts %}
                    <tr class="hover:bg-blue-50/30 transition-colors group">
                        <td class="px-8 py-6">
                            <div class="font-bold text-slate-900 group-hover:text-blue-600 transition-colors">{{ expert.name }}</div>
                            <div class="text-[10px] text-slate-400 font-mono italic">Expert Score: {{ expert.score }}</div>
                        </td>
                        <td class="px-8 py-6 text-sm text-slate-600">
                            {{ expert.institution }}
                        </td>
                        <td class="px-8 py-6 text-center">
                            <span class="px-2 py-1 bg-slate-100 rounded-md text-xs font-bold text-slate-700">{{ expert.h_index }}</span>
                        </td>
                        <td class="px-8 py-6 text-center font-black text-blue-600">
                            {{ "{:,}".format(expert.citations) }}
                        </td>
                        <td class="px-8 py-6 text-right">
                            <a href="https://openalex.org/{{ expert.id }}" target="_blank" class="text-slate-300 hover:text-blue-600 transition">
                                <i class="fas fa-external-link-alt"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% elif query %}
        <div class="text-center py-20 bg-white rounded-3xl border-2 border-dashed border-slate-200">
            <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-microscope text-slate-300 text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold text-slate-900">Pattern Isolation Failed</h3>
            <p class="text-slate-500">The Discovery Agent couldn't locate experts for "{{ query }}".</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}