<% page_title @page_title  %>
<%= render 'pwb/shared/leaflet_assets' %>

<%# Canonical URL for SEO %>
<% content_for :head do %>
  <% if @canonical_url.present? %>
    <link rel="canonical" href="<%= @canonical_url %>">
  <% end %>
<% end %>

<!-- MAIN CONTENT -->
<div class="bg-gray-100 py-4">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center">
      <div class="w-full md:w-1/2">
        <h2 class="text-2xl font-bold text-gray-800">
          <%= I18n.t("searchForRentals", default: I18n.t("searchForProperties")) %>
        </h2>
      </div>
      <div class="w-full md:w-1/2">
        <nav class="flex" aria-label="Breadcrumb">
          <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
              <a href="/" class="text-gray-700 hover:text-blue-600">
                <%= I18n.t("webContentSections.home") %>
              </a>
            </li>
            <li>
              <div class="flex items-center">
                <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                <span class="ml-1 text-gray-500 md:ml-2">
                  <%= I18n.t("searchForRentals", default: I18n.t("searchForProperties")) %>
                </span>
              </div>
            </li>
          </ol>
        </nav>
      </div>
    </div>
  </div>
</div>

<%# Main search section with URL-based Stimulus controller %>
<section class="bg-white border-b border-gray-200" 
         data-controller="search"
         data-search-operation-value="rent"
         data-search-locale-value="<%= I18n.locale %>">
  <div class="py-8">
    <div class="container mx-auto px-4">
      <div class="search-layout flex flex-wrap -mx-4">
        
        <!-- Sidebar (Filters) -->
        <aside class="search-sidebar w-full lg:w-1/4 px-4 mb-6 lg:mb-0">
          <%# Mobile filter toggle button %>
          <div class="filter-toggle lg:hidden mb-4">
            <button type="button"
                    class="w-full bg-white border border-gray-300 text-gray-700 font-medium py-3 px-4 rounded-lg shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center justify-center"
                    data-action="click->search#toggleFilters"
                    data-search-target="filterToggle"
                    aria-expanded="false"
                    aria-controls="sidebar-filters">
              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
              </svg>
              <span><%= I18n.t("filter", default: "Filters") %></span>
              <% if @search_criteria_for_view.present? %>
                <% active_count = @search_criteria_for_view.reject { |k, v| v.blank? || k == :page }.size %>
                <% if active_count > 0 %>
                  <span class="ml-2 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-blue-600 rounded-full">
                    <%= active_count %>
                  </span>
                <% end %>
              <% end %>
            </button>
          </div>
          
          <%# Filter panel %>
          <div id="sidebar-filters" 
               class="filter-content hidden lg:block bg-white rounded-lg shadow-sm border border-gray-200 p-6"
               data-search-target="filterPanel">
            
            <div class="flex items-center justify-between mb-6">
              <h3 class="text-lg font-semibold text-gray-900">
                <%= I18n.t("search.filters", default: "Filters") %>
              </h3>
              <button type="button"
                      class="text-sm text-blue-600 hover:text-blue-800 font-medium"
                      data-action="click->search#clearFilters">
                <%= I18n.t("search.clear_all", default: "Clear all") %>
              </button>
            </div>
            
            <%= form_with url: rent_path, method: :get, local: true,
                          data: {
                            turbo_frame: "search-results",
                            action: "submit->search#handleSubmit",
                            search_target: "form"
                          },
                          class: "search-filter-form space-y-6" do |f| %>
              
              <%# Property Type %>
              <div class="filter-group">
                <label for="filter-type" class="block text-sm font-medium text-gray-700 mb-2">
                  <%= I18n.t("propertyTypes.label", default: "Property Type") %>
                </label>
                <select id="filter-type" 
                        name="type"
                        data-filter="type"
                        data-action="change->search#filterChanged"
                        class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500">
                  <option value=""><%= I18n.t("propertyTypes.all", default: "All Types") %></option>
                  <% Pwb::ListedProperty.distinct.pluck(:prop_type_key).compact.each do |type| %>
                    <% type_slug = type.to_s.split('.').last %>
                    <% is_selected = @search_criteria_for_view[:property_type].present? &&
                                     (type == @search_criteria_for_view[:property_type] ||
                                      type_slug == @search_criteria_for_view[:property_type]) %>
                    <option value="<%= type_slug %>" <%= 'selected' if is_selected %>>
                      <%= I18n.t("propertyTypes.#{type_slug}", default: type_slug.titleize) %>
                    </option>
                  <% end %>
                </select>
              </div>
              
              <%# Price Range (Monthly Rent) %>
              <div class="filter-group">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                  <%= I18n.t("search.monthly_rent", default: "Monthly Rent") %>
                </label>
                <div class="grid grid-cols-2 gap-2">
                  <div>
                    <label for="filter-price-min" class="sr-only"><%= I18n.t("search.min_rent", default: "Min Rent") %></label>
                    <select id="filter-price-min"
                            name="price_min"
                            data-filter="price_min"
                            data-action="change->search#filterChanged"
                            class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
                      <option value=""><%= I18n.t("search.min", default: "Min") %></option>
                      <% @prices_from_collection&.each do |price| %>
                        <option value="<%= price %>" <%= 'selected' if @search_criteria_for_view[:price_min].to_i == price.to_i %>>
                          <%= number_to_currency(price, precision: 0) %>/mo
                        </option>
                      <% end %>
                    </select>
                  </div>
                  <div>
                    <label for="filter-price-max" class="sr-only"><%= I18n.t("search.max_rent", default: "Max Rent") %></label>
                    <select id="filter-price-max"
                            name="price_max"
                            data-filter="price_max"
                            data-action="change->search#filterChanged"
                            class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
                      <option value=""><%= I18n.t("search.max", default: "Max") %></option>
                      <% @prices_till_collection&.each do |price| %>
                        <option value="<%= price %>" <%= 'selected' if @search_criteria_for_view[:price_max].to_i == price.to_i %>>
                          <%= number_to_currency(price, precision: 0) %>/mo
                        </option>
                      <% end %>
                    </select>
                  </div>
                </div>
              </div>
              
              <%# Bedrooms %>
              <div class="filter-group">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                  <%= I18n.t("amenities.bedrooms", default: "Bedrooms") %>
                </label>
                <div class="flex flex-wrap gap-2">
                  <% [nil, 1, 2, 3, 4, 5].each do |num| %>
                    <label class="bedroom-chip">
                      <input type="radio" 
                             name="bedrooms" 
                             value="<%= num %>"
                             data-filter="bedrooms"
                             data-action="change->search#filterChanged"
                             class="sr-only peer"
                             <%= 'checked' if @search_criteria_for_view[:bedrooms].to_i == num.to_i && (num.present? || @search_criteria_for_view[:bedrooms].blank?) %>>
                      <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium cursor-pointer border border-gray-300 bg-white text-gray-700 peer-checked:bg-blue-600 peer-checked:text-white peer-checked:border-blue-600 hover:bg-gray-50 peer-checked:hover:bg-blue-700 transition-colors">
                        <%= num.nil? ? I18n.t("search.any", default: "Any") : "#{num}+" %>
                      </span>
                    </label>
                  <% end %>
                </div>
              </div>
              
              <%# Bathrooms %>
              <div class="filter-group">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                  <%= I18n.t("amenities.bathrooms", default: "Bathrooms") %>
                </label>
                <div class="flex flex-wrap gap-2">
                  <% [nil, 1, 2, 3, 4].each do |num| %>
                    <label class="bathroom-chip">
                      <input type="radio" 
                             name="bathrooms" 
                             value="<%= num %>"
                             data-filter="bathrooms"
                             data-action="change->search#filterChanged"
                             class="sr-only peer"
                             <%= 'checked' if @search_criteria_for_view[:bathrooms].to_i == num.to_i && (num.present? || @search_criteria_for_view[:bathrooms].blank?) %>>
                      <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium cursor-pointer border border-gray-300 bg-white text-gray-700 peer-checked:bg-blue-600 peer-checked:text-white peer-checked:border-blue-600 hover:bg-gray-50 peer-checked:hover:bg-blue-700 transition-colors">
                        <%= num.nil? ? I18n.t("search.any", default: "Any") : "#{num}+" %>
                      </span>
                    </label>
                  <% end %>
                </div>
              </div>
              
              <%# Features %>
              <% if @feature_list.present? %>
                <div class="filter-group">
                  <label class="block text-sm font-medium text-gray-700 mb-2">
                    <%= I18n.t("search.features", default: "Features") %>
                  </label>
                  <div class="space-y-2 max-h-48 overflow-y-auto">
                    <% @feature_list.each do |feature| %>
                      <label class="flex items-center">
                        <input type="checkbox"
                               name="features[]"
                               value="<%= feature[:key] %>"
                               data-filter="feature"
                               data-action="change->search#filterChanged"
                               class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                               <%= 'checked' if @search_criteria_for_view[:features]&.include?(feature[:key]) %>>
                        <span class="ml-2 text-sm text-gray-700"><%= feature[:label] %></span>
                      </label>
                    <% end %>
                  </div>
                </div>
              <% end %>
              
              <%# Mobile: Apply filters button %>
              <div class="lg:hidden pt-4 border-t border-gray-200">
                <button type="submit"
                        class="w-full bg-blue-600 text-white font-medium py-3 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                        data-action="click->search#applyAndClose">
                  <%= I18n.t("search.show_results", default: "Show Results") %>
                </button>
              </div>
            <% end %>
          </div>
        </aside>

        <!-- Results -->
        <main class="search-results-main w-full lg:w-3/4 px-4 relative">
          <%= render 'pwb/search/search_results_frame' %>
        </main>
      </div>
    </div>
  </div>
</section>

<%# Map section %>
<% if @map_markers.present? && @map_markers.length > 0 %>
  <section class="w-full border-t border-gray-200" style="height: 500px;">
    <div id="search-map" 
         class="w-full h-full"
         data-controller="map"
         data-map-target="canvas"
         data-map-markers-value="<%= @map_markers.to_json %>"
         data-search-target="map">
    </div>
  </section>
<% end %>

<%# Mobile filter backdrop %>
<div class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden lg:hidden"
     data-search-target="backdrop"
     data-action="click->search#toggleFilters">
</div>
