<div class="max-w-7xl mx-auto">
  <div class="mb-6 flex justify-between items-center">
    <div>
      <h1 class="text-3xl font-bold text-gray-900"><%= @category_label || @category.titleize %></h1>
      <p class="mt-2 text-gray-600"><%= @category_description || "Manage #{@category.humanize.downcase} for your properties" %></p>
    </div>
    <button
      onclick="document.getElementById('new-entry-modal').classList.remove('hidden')"
      class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center">
      <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 New Entry
    </button>
  </div>

  <!-- Tab Navigation -->
  <%= render 'tab_navigation', current_category: @category %>

  <!-- Card Grid Layout -->
  <% if @field_keys.any? %>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <% @field_keys.each do |field_key| %>
        <div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden"
             id="card-<%= field_key.global_key.parameterize %>">
          <!-- Card Header -->
          <%
            # Always use English for the header title (using Mobility)
            english_title = Mobility.with_locale(:en) { field_key.label.presence } || field_key.global_key.split('.').last.titleize
          %>
          <div class="px-4 py-3 border-b border-gray-100 flex justify-between items-center">
            <button
              onclick="confirmDelete('<%= field_key.global_key %>', '<%= english_title %>')"
              class="text-red-500 hover:text-red-700"
              title="Delete">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
              </svg>
            </button>
            <h3 class="text-lg font-semibold text-gray-900">
              <%= english_title %>
            </h3>
            <div class="w-5"></div><!-- Spacer for centering -->
          </div>

          <!-- Card Body - Editable Fields -->
          <%= form_with url: "/site_admin/properties/settings/#{@category}/#{ERB::Util.url_encode(field_key.global_key)}",
                        method: :patch,
                        local: true,
                        class: "p-4 space-y-3",
                        data: { field_key: field_key.global_key } do |f| %>

            <% @website_locales.each do |locale_info| %>
              <div class="flex items-center space-x-3">
                <label class="w-20 text-sm text-gray-600 text-right flex-shrink-0">
                  <%= locale_info[:label] %>:
                </label>
                <input type="text"
                       name="field_key[translations][<%= locale_info[:locale] %>]"
                       value="<%= Mobility.with_locale(locale_info[:locale].to_sym) { field_key.label } %>"
                       placeholder="<%= locale_info[:label] %> translation"
                       class="flex-1 px-3 py-1.5 border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 focus:border-blue-500 text-sm"
                       onchange="markCardChanged(this)">
              </div>
            <% end %>

            <!-- Save Button (hidden until changes made) -->
            <div class="save-button hidden pt-2">
              <%= f.submit "Save",
                  class: "w-full px-3 py-1.5 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 cursor-pointer" %>
            </div>
          <% end %>
        </div>
      <% end %>
    </div>
  <% else %>
    <!-- Empty State -->
    <div class="bg-white rounded-lg shadow p-12 text-center">
      <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
      </svg>
      <p class="text-gray-500 text-lg mb-2">No <%= @category.humanize.downcase %> yet</p>
      <p class="text-gray-400">Click "Add New Entry" to create one</p>
    </div>
  <% end %>
</div>

<!-- New Entry Modal -->
<div id="new-entry-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
  <div class="relative top-20 mx-auto p-5 border w-full max-w-md shadow-lg rounded-lg bg-white">
    <div class="flex justify-between items-center mb-4">
      <h3 class="text-lg font-semibold text-gray-900">Add New <%= @category.titleize.singularize %></h3>
      <button onclick="document.getElementById('new-entry-modal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <%= form_with url: site_admin_properties_settings_category_path(@category),
                  method: :post,
                  local: true,
                  class: "space-y-4" do |f| %>

      <% @website_locales.each_with_index do |locale_info, index| %>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">
            <%= locale_info[:label] %> <%= '*' if index == 0 %>
          </label>
          <input type="text"
                 name="field_key[translations][<%= locale_info[:locale] %>]"
                 placeholder="Name in <%= locale_info[:label] %>"
                 <%= 'required' if index == 0 %>
                 class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        </div>
      <% end %>

      <div class="flex justify-end space-x-3 pt-4 border-t border-gray-200">
        <button type="button"
                onclick="document.getElementById('new-entry-modal').classList.add('hidden')"
                class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50">
          Cancel
        </button>
        <%= f.submit "Create",
            class: "px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 cursor-pointer" %>
      </div>
    <% end %>
  </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="delete-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
  <div class="relative top-20 mx-auto p-5 border w-full max-w-sm shadow-lg rounded-lg bg-white">
    <div class="text-center">
      <svg class="mx-auto h-12 w-12 text-red-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
      </svg>
      <h3 class="text-lg font-semibold text-gray-900 mb-2">Delete Entry</h3>
      <p class="text-sm text-gray-600 mb-4">
        Are you sure you want to delete "<span id="delete-entry-name" class="font-medium"></span>"?
        This will affect all properties using this setting.
      </p>
      <div class="flex justify-center space-x-3">
        <button type="button"
                onclick="document.getElementById('delete-modal').classList.add('hidden')"
                class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50">
          Cancel
        </button>
        <form id="delete-form" method="post" class="inline">
          <input type="hidden" name="_method" value="delete">
          <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
          <button type="submit"
                  class="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700">
            Delete
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
  function markCardChanged(input) {
    const form = input.closest('form');
    const saveButton = form.querySelector('.save-button');
    if (saveButton) {
      saveButton.classList.remove('hidden');
    }
    // Also highlight the card border
    const card = input.closest('[id^="card-"]');
    if (card) {
      card.classList.add('ring-2', 'ring-blue-500');
    }
  }

  function confirmDelete(globalKey, entryName) {
    const modal = document.getElementById('delete-modal');
    const nameSpan = document.getElementById('delete-entry-name');
    const form = document.getElementById('delete-form');

    nameSpan.textContent = entryName;
    form.action = '/site_admin/properties/settings/<%= @category %>/' + encodeURIComponent(globalKey);

    modal.classList.remove('hidden');
  }

  // Close modals when clicking outside
  document.addEventListener('click', function(e) {
    const newModal = document.getElementById('new-entry-modal');
    const deleteModal = document.getElementById('delete-modal');

    if (e.target === newModal) {
      newModal.classList.add('hidden');
    }
    if (e.target === deleteModal) {
      deleteModal.classList.add('hidden');
    }
  });
</script>
