{% extends "base.html" %}

{% block title %}Browser History - Search{% endblock %}

{% block content %}
<div class="bg-dark-800 shadow sm:rounded-lg p-6 border border-dark-700">
  <form id="search-form" class="space-y-6">
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
      <div>
        <label for="search-term" class="block text-sm font-medium text-gray-300">Search Term</label>
        <input type="text" name="search-term" id="search-term"
          class="mt-1 block w-full rounded-md border-dark-600 bg-dark-700 text-gray-100 shadow-sm focus:border-primary focus:ring-primary">
      </div>
      <div>
        <label for="domain" class="block text-sm font-medium text-gray-300">Domain</label>
        <input type="text" name="domain" id="domain"
          class="mt-1 block w-full rounded-md border-dark-600 bg-dark-700 text-gray-100 shadow-sm focus:border-primary focus:ring-primary">
      </div>
      <div>
        <label for="start-date" class="block text-sm font-medium text-gray-300">Start Date</label>
        <input type="date" name="start-date" id="start-date"
          class="mt-1 block w-full rounded-md border-dark-600 bg-dark-700 text-gray-100 shadow-sm focus:border-primary focus:ring-primary">
      </div>
      <div>
        <label for="end-date" class="block text-sm font-medium text-gray-300">End Date</label>
        <input type="date" name="end-date" id="end-date"
          class="mt-1 block w-full rounded-md border-dark-600 bg-dark-700 text-gray-100 shadow-sm focus:border-primary focus:ring-primary">
      </div>
    </div>
    <div class="flex justify-end">
      <button type="submit"
        class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
        Search
      </button>
    </div>
  </form>

  <div id="results" class="mt-8">
    <div class="border-t border-dark-700 mt-4">
      <ul class="divide-y divide-gray-200" id="search-results">
        <!-- Results will be populated here -->
      </ul>
    </div>
  </div>
</div>

<script>
  document.getElementById('search-form').addEventListener('submit', async (e) => {
    e.preventDefault();

    const searchTerm = document.getElementById('search-term').value;
    const domain = document.getElementById('domain').value;
    const startDate = document.getElementById('start-date').value;
    const endDate = document.getElementById('end-date').value;

    const params = new URLSearchParams();
    if (searchTerm) params.append('search_term', searchTerm);
    if (domain) params.append('domain', domain);
    if (startDate) params.append('start_date', startDate);
    if (endDate) params.append('end_date', endDate);

    const response = await fetch(`/history/search?${params.toString()}`);
    const results = await response.json();

    const resultsContainer = document.getElementById('search-results');
    resultsContainer.innerHTML = results.map(entry => `
        <li class="px-4 py-4">
            <div class="flex items-center justify-between">
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-primary truncate">
                        <a href="${entry.url}" target="_blank">${entry.title}</a>
                    </p>
                    <p class="text-sm text-gray-500">
                        ${entry.domain} • ${new Date(entry.visit_time).toLocaleString()}
                    </p>
                </div>
            </div>
        </li>
    `).join('');
  });
</script>
{% endblock %}