<div class="max-w-2xl mx-auto">
  <div class="mb-6">
    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Add New Property</h1>
    <p class="mt-2 text-gray-600">Create a new property listing. You can add more details after creation.</p>
  </div>

  <div class="bg-white rounded-lg shadow p-6">
    <%= form_with model: @prop, url: site_admin_props_path, local: true do |f| %>
      <% if @prop.errors.any? %>
        <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
          <h3 class="text-red-800 font-medium">Please fix the following errors:</h3>
          <ul class="mt-2 list-disc list-inside text-red-700 text-sm">
            <% @prop.errors.full_messages.each do |message| %>
              <li><%= message %></li>
            <% end %>
          </ul>
        </div>
      <% end %>

      <div class="space-y-6">
        <!-- Reference -->
        <div>
          <%= f.label :reference, class: "block text-sm font-medium text-gray-700 mb-1" %>
          <%= f.text_field :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",
              placeholder: "e.g., PROP-001" %>
          <p class="mt-1 text-sm text-gray-500">A unique identifier for this property</p>
        </div>

        <!-- Property Type -->
        <div>
          <%= f.label :prop_type_key, "Property Type", class: "block text-sm font-medium text-gray-700 mb-1" %>
          <%= f.select :prop_type_key, 
              [
                ['Apartment', 'apartment'],
                ['House', 'house'],
                ['Villa', 'villa'],
                ['Penthouse', 'penthouse'],
                ['Studio', 'studio'],
                ['Townhouse', 'townhouse'],
                ['Land', 'land'],
                ['Commercial', 'commercial'],
                ['Office', 'office'],
                ['Other', 'other']
              ],
              { prompt: 'Select property type' },
              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>

        <!-- Basic Details -->
        <div class="grid grid-cols-2 gap-4">
          <div>
            <%= f.label :count_bedrooms, "Bedrooms", class: "block text-sm font-medium text-gray-700 mb-1" %>
            <%= f.number_field :count_bedrooms, 
                min: 0, 
                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>
          <div>
            <%= f.label :count_bathrooms, "Bathrooms", class: "block text-sm font-medium text-gray-700 mb-1" %>
            <%= f.number_field :count_bathrooms, 
                min: 0, 
                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>
        </div>

        <!-- Location -->
        <div class="border-t pt-6">
          <h3 class="text-lg font-medium text-gray-900 mb-4">Location</h3>
          
          <div class="space-y-4">
            <div>
              <%= f.label :street_address, "Street Address", class: "block text-sm font-medium text-gray-700 mb-1" %>
              <%= f.text_field :street_address, 
                  class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
                  placeholder: "123 Main Street" %>
            </div>

            <div class="grid grid-cols-2 gap-4">
              <div>
                <%= f.label :city, class: "block text-sm font-medium text-gray-700 mb-1" %>
                <%= f.text_field :city, 
                    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>
              <div>
                <%= f.label :postal_code, "Postal Code", class: "block text-sm font-medium text-gray-700 mb-1" %>
                <%= f.text_field :postal_code, 
                    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>
            </div>

            <div class="grid grid-cols-2 gap-4">
              <div>
                <%= f.label :region, "Region/State", class: "block text-sm font-medium text-gray-700 mb-1" %>
                <%= f.text_field :region, 
                    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>
              <div>
                <%= f.label :country, class: "block text-sm font-medium text-gray-700 mb-1" %>
                <%= f.text_field :country, 
                    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>
            </div>
          </div>
        </div>
      </div>

      <!-- Actions -->
      <div class="mt-8 pt-6 border-t flex justify-between items-center">
        <%= link_to "Cancel", site_admin_props_path, class: "text-gray-600 hover:text-gray-800" %>
        <%= f.submit "Create Property", class: "px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 cursor-pointer" %>
      </div>
    <% end %>
  </div>
</div>
