{{template "base" .}}

{{define "content"}}
<div class="space-y-8">
    <!-- Header -->
    <div class="text-center max-w-2xl mx-auto">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Search Documents</h1>
        <p class="text-gray-500 dark:text-gray-400">Find documents by content, title, vendor, or notes</p>
    </div>

    <!-- Search Form -->
    <div class="max-w-2xl mx-auto">
        <form action="/search" method="GET" class="relative">
            <input type="search" name="q" value="{{.Query}}" placeholder="Search for anything..." 
                   class="w-full pl-12 pr-4 py-4 text-lg rounded-2xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm focus:ring-2 focus:ring-brand-500 focus:border-transparent transition-all"
                   autofocus>
            <svg class="absolute left-4 top-4.5 h-6 w-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
            <button type="submit" class="absolute right-3 top-3 px-4 py-2 bg-brand-600 hover:bg-brand-700 text-white text-sm font-medium rounded-xl transition-colors">
                Search
            </button>
        </form>
        
        <!-- Quick filters -->
        <div class="flex flex-wrap gap-2 mt-4 justify-center">
            <span class="text-sm text-gray-500 dark:text-gray-400">Try:</span>
            <a href="/search?q=duke+energy" class="text-sm text-brand-600 dark:text-brand-400 hover:underline">duke energy</a>
            <a href="/search?q=insurance" class="text-sm text-brand-600 dark:text-brand-400 hover:underline">insurance</a>
            <a href="/search?q=2026" class="text-sm text-brand-600 dark:text-brand-400 hover:underline">2026</a>
        </div>
    </div>

    <!-- Results -->
    {{if .Query}}
    <div class="max-w-4xl mx-auto">
        {{if .Documents}}
        <div class="flex items-center justify-between mb-4">
            <p class="text-gray-600 dark:text-gray-400">
                Found <span class="font-semibold text-gray-900 dark:text-white">{{len .Documents}}</span> result{{if ne (len .Documents) 1}}s{{end}} for "{{.Query}}"
            </p>
            <a href="/api/export?q={{.Query}}" class="text-sm text-brand-600 dark:text-brand-400 hover:underline">Export results →</a>
        </div>

        <div class="space-y-4">
            {{range .Documents}}
            <a href="/document/{{.ID}}" class="block bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 hover:border-brand-300 dark:hover:border-brand-600 transition-all card-hover group">
                <div class="flex items-start justify-between">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center space-x-2 mb-2">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300">
                                {{categoryIcon .Category}} {{title .Category}}
                            </span>
                            {{if .Type}}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
                                {{title .Type}}
                            </span>
                            {{end}}
                            {{if .Date}}
                            <span class="text-xs text-gray-500 dark:text-gray-400">{{formatDate .Date}}</span>
                            {{end}}
                            {{if .Score}}
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300">
                                🧠 {{printf "%.0f" (multiply .Score 100)}}% match
                            </span>
                            {{end}}
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors mb-1">{{.Title}}</h3>
                        <p class="text-gray-600 dark:text-gray-400 text-sm line-clamp-2">{{truncate .Summary 200}}</p>
                        {{if .Vendor}}
                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Vendor: {{.Vendor}}</p>
                        {{end}}
                    </div>
                    {{if .Amount}}
                    <div class="ml-4 text-right">
                        <span class="text-lg font-semibold text-gray-900 dark:text-white">{{.Amount}}</span>
                    </div>
                    {{end}}
                </div>
            </a>
            {{end}}
        </div>
        {{else}}
        <div class="text-center py-12">
            <svg class="w-16 h-16 mx-auto text-gray-300 dark:text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-1">No results found</h3>
            <p class="text-gray-500 dark:text-gray-400">Try different keywords or check your spelling</p>
        </div>
        {{end}}
    </div>
    {{else}}
    <!-- Empty state -->
    <div class="max-w-2xl mx-auto text-center py-12">
        <svg class="w-24 h-24 mx-auto text-gray-200 dark:text-gray-700 mb-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
        <h3 class="text-xl font-medium text-gray-900 dark:text-white mb-2">Search your documents</h3>
        <p class="text-gray-500 dark:text-gray-400">Enter a search term above to find documents by content, title, vendor, or notes.</p>
    </div>
    {{end}}
</div>
{{end}}