<div class="container mx-auto px-4 py-8 max-w-4xl">
  <div class="mb-8">
    <h1 class="text-2xl font-bold text-gray-900">My Saved Searches</h1>
    <p class="mt-1 text-gray-600">
      Manage your property alerts for <strong><%= @email %></strong>
    </p>
  </div>

  <div class="space-y-4">
    <% @saved_searches.each do |search| %>
      <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
        <div class="flex items-start justify-between">
          <div class="flex-1">
            <h3 class="text-lg font-semibold text-gray-900">
              <%= search.name %>
            </h3>
            <p class="mt-1 text-sm text-gray-500">
              <%= search.criteria_summary %>
            </p>

            <div class="mt-3 flex items-center gap-4 text-sm">
              <% if search.enabled? && search.alert_frequency != "none" %>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                  <%= search.alert_frequency.titleize %> alerts
                </span>
              <% else %>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
                  Alerts off
                </span>
              <% end %>

              <% if search.last_run_at %>
                <span class="text-gray-500">
                  Last checked: <%= time_ago_in_words(search.last_run_at) %> ago
                </span>
              <% end %>

              <% if search.last_result_count && search.last_result_count > 0 %>
                <span class="text-gray-500">
                  <%= search.last_result_count %> matching properties
                </span>
              <% end %>
            </div>
          </div>

          <div class="flex items-center gap-2 ml-4">
            <%= link_to my_saved_search_path(id: search.id, token: params[:token]),
                class: "inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50" do %>
              Edit
            <% end %>

            <%= link_to external_listings_path(search.search_criteria_hash),
                class: "inline-flex items-center px-3 py-1.5 border border-blue-300 text-sm font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50",
                target: "_blank" do %>
              View Results
            <% end %>
          </div>
        </div>
      </div>
    <% end %>
  </div>

  <div class="mt-8 pt-8 border-t border-gray-200">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Create New Search</h2>
    <p class="text-gray-600 mb-4">
      To create a new saved search, go to the
      <%= link_to "property search page", external_listings_path, class: "text-blue-600 hover:underline" %>,
      set your search criteria, and click "Save This Search".
    </p>
  </div>
</div>
