<div class="max-w-7xl mx-auto">
  <div class="mb-4 md:mb-6 flex justify-between items-center">
    <div>
      <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Properties</h1>
      <p class="mt-1 md:mt-2 text-sm md:text-base text-gray-600"><%= @pagy.count %> properties for <%= current_website.subdomain %></p>
    </div>
    <div class="flex gap-2">
      <%= link_to site_admin_property_url_import_path, class: "inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors", title: "Import from URL" do %>
        <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="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
        </svg>
        Import URL
      <% end %>
      <%= link_to new_site_admin_prop_path, class: "inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors" do %>
        <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="M12 4v16m8-8H4"></path>
        </svg>
        Add Property
      <% end %>
    </div>
  </div>

  <!-- Search Form -->
  <div class="mb-4 md:mb-6 bg-white rounded-lg shadow p-3 md:p-4">
    <%= form_with url: site_admin_props_path, method: :get, local: true, class: "flex flex-col sm:flex-row gap-2 sm:gap-4" do |f| %>
      <div class="flex-1">
        <%= f.text_field :search, value: params[:search], placeholder: "Search by reference...", class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" %>
      </div>
      <%= f.submit "Search", class: "px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 cursor-pointer" %>
    <% end %>
  </div>

  <!-- Properties Table -->
  <div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Property</th>
            <th class="hidden sm:table-cell px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Active Listings</th>
            <th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
            <th class="hidden lg:table-cell px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
            <th class="px-4 md:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
          </tr>
        </thead>
      <tbody class="bg-white divide-y divide-gray-200">
        <% if @props.any? %>
          <% @props.each do |prop| %>
            <tr class="hover:bg-gray-50">
              <td class="px-4 md:px-6 py-2">
                <div class="flex items-center">
                  <%# Property Thumbnail %>
                  <% primary_photo = prop.ordered_photo(1) %>
                  <% if primary_photo&.has_image? %>
                    <div class="flex-shrink-0 mr-3">
                      <%= image_tag primary_photo.thumbnail_url(size: [48, 48]),
                          class: 'w-12 h-12 rounded-lg object-cover',
                          alt: prop.reference,
                          loading: 'lazy' %>
                    </div>
                  <% else %>
                    <div class="flex-shrink-0 mr-3 w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center">
                      <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                      </svg>
                    </div>
                  <% end %>
                  <div>
                    <div class="text-sm font-medium text-gray-900">
                      <%= prop.reference %>
                    </div>
                    <div class="text-sm text-gray-500 truncate max-w-[150px] md:max-w-xs">
                      <%= prop.title.presence || prop.location.presence || 'No title' %>
                    </div>
                  </div>
                </div>
              </td>
              <td class="hidden sm:table-cell px-4 md:px-6 py-2 whitespace-nowrap">
                <div class="flex flex-col gap-1">
                  <% if prop.for_sale && prop.sale_listing_id.present? %>
                    <%= link_to edit_site_admin_prop_sale_listing_path(prop, prop.sale_listing_id),
                        class: 'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 hover:bg-green-200' do %>
                      <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                      </svg>
                      Sale (Active)
                    <% end %>
                  <% elsif prop.sale_listing_id.present? %>
                    <%= link_to edit_site_admin_prop_sale_listing_path(prop, prop.sale_listing_id),
                        class: 'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600 hover:bg-gray-200' do %>
                      Sale (Hidden)
                    <% end %>
                  <% end %>
                  <% if prop.for_rent && prop.rental_listing_id.present? %>
                    <%= link_to edit_site_admin_prop_rental_listing_path(prop, prop.rental_listing_id),
                        class: 'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800 hover:bg-purple-200' do %>
                      <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                      </svg>
                      Rent (Active)
                    <% end %>
                  <% elsif prop.rental_listing_id.present? %>
                    <%= link_to edit_site_admin_prop_rental_listing_path(prop, prop.rental_listing_id),
                        class: 'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600 hover:bg-gray-200' do %>
                      Rent (Hidden)
                    <% end %>
                  <% end %>
                  <% unless prop.sale_listing_id.present? || prop.rental_listing_id.present? %>
                    <span class="text-xs text-gray-400 italic">No active listings</span>
                  <% end %>
                </div>
              </td>
              <td class="px-4 md:px-6 py-2 whitespace-nowrap text-sm text-gray-500">
                <% if prop.for_sale && prop.price_sale_current_cents.to_i > 0 %>
                  <%= number_to_currency(prop.price_sale_current_cents / 100.0, unit: prop.price_sale_current_currency || 'EUR', precision: 0) %>
                <% elsif prop.for_rent && prop.price_rental_monthly_current_cents.to_i > 0 %>
                  <%= number_to_currency(prop.price_rental_monthly_current_cents / 100.0, unit: prop.price_rental_monthly_current_currency || 'EUR', precision: 0) %>/mo
                <% else %>
                  -
                <% end %>
              </td>
              <td class="hidden lg:table-cell px-4 md:px-6 py-2 whitespace-nowrap text-sm text-gray-500">
                <%= format_date(prop.created_at) %>
              </td>
              <td class="px-4 md:px-6 py-2 whitespace-nowrap text-sm">
                <%= link_to 'View', site_admin_prop_path(prop), class: 'text-blue-600 hover:text-blue-800 mr-2 md:mr-3' %>
                <%= link_to 'Edit', edit_site_admin_prop_path(prop), class: 'text-green-600 hover:text-green-800 mr-2 md:mr-3' %>
                <span class="hidden sm:inline">
                  <%= link_to 'Listings', edit_sale_rental_site_admin_prop_path(prop), class: 'text-purple-600 hover:text-purple-800' %>
                </span>
              </td>
            </tr>
          <% end %>
        <% else %>
          <tr>
            <td colspan="5" class="px-6 py-8 text-center text-gray-500">
              <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
              </svg>
              <p class="mt-2">No properties found</p>
              <% if params[:search].present? %>
                <p class="mt-1 text-sm">Try adjusting your search terms</p>
              <% end %>
            </td>
          </tr>
        <% end %>
        </tbody>
      </table>
    </div>
  </div>

  <%# Pagination %>
  <%= render 'shared/pagination', pagy: @pagy %>
</div>
