<div class="max-w-4xl mx-auto">
  <%= form_with(model: screen, class: "space-y-4") do |form| %>
    <% if screen.errors.any? %>
      <div class="bg-red-50 border border-red-200 rounded-lg p-3">
        <div class="flex items-start">
          <svg class="w-5 h-5 text-red-400 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
          </svg>
          <div class="flex-1">
            <h3 class="text-sm font-semibold text-red-800 mb-2">
              <%= pluralize(screen.errors.count, "error") %> prohibited this screen from being saved:
            </h3>
            <ul class="text-sm text-red-700 space-y-1">
              <% screen.errors.each do |error| %>
                <li><%= error.full_message %></li>
              <% end %>
            </ul>
          </div>
        </div>
      </div>
    <% end %>

    <!-- Form Content Card -->
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
      <div class="px-4 py-3 border-b border-gray-200">
        <h2 class="text-lg font-semibold text-gray-900">Screen Configuration</h2>
        <p class="text-sm text-gray-600 mt-1">Configure a screen to display content from feeds</p>
      </div>
      
      <div class="p-4 space-y-4">
        <!-- Screen Name -->
        <div>
          <%= form.label :name, "Screen Name", class: "block text-sm font-medium text-gray-700 mb-2" %>
          <%= form.text_field :name,
              class: "block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm",
              placeholder: "Enter a descriptive name for this screen" %>
          <p class="text-xs text-gray-500 mt-1">A name to identify this screen</p>
        </div>

        <!-- Template Selection -->
        <div>
          <%= form.label :template_id, "Template", class: "block text-sm font-medium text-gray-700 mb-3" %>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <% @templates.each do |template| %>
              <div class="relative">
                <%= form.radio_button :template_id, template.id,
                    class: "sr-only peer",
                    id: "template_#{template.id}" %>
                <label for="template_<%= template.id %>"
                    class="block cursor-pointer rounded-lg border-2 border-gray-200 p-3 hover:border-gray-300 peer-checked:border-blue-500 peer-checked:ring-2 peer-checked:ring-blue-200 transition-all duration-200">
                  
                  <!-- Template Preview -->
                  <div class="bg-gray-100 rounded-md mb-3 overflow-hidden">
                    <% if template.image.attached? %>
                      <%= image_tag template.image,
                          class: "w-full h-full object-cover",
                          alt: "#{template.name} preview" %>
                    <% else %>
                      <div class="w-full h-full flex items-center justify-center text-gray-400">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                  
                  <!-- Template Info -->
                  <div class="text-center">
                    <h4 class="font-medium text-gray-900 text-sm"><%= template.name %></h4>
                    <% if template.author.present? %>
                      <p class="text-xs text-gray-500 mt-1">by <%= template.author %></p>
                    <% end %>
                  </div>
                  
                  <!-- Selected Indicator -->
                  <div class="absolute top-2 right-2 opacity-0 peer-checked:opacity-100 transition-opacity duration-200">
                    <div class="bg-blue-500 text-white rounded-full p-1">
                      <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                      </svg>
                    </div>
                  </div>
                </label>
              </div>
            <% end %>
          </div>
          <p class="text-xs text-gray-500 mt-3">Choose the layout template for this screen</p>
        </div>

        <!-- Group Selection -->
        <div>
          <%= form.label :group_id, "Managers", class: "block text-sm font-medium text-gray-700 mb-2" %>
          <% can_edit_group = policy(screen).can_edit_group? %>
          <%= form.collection_select :group_id, @groups, :id, :name,
              { prompt: "Select a group" },
              {
                class: "block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm text-sm #{'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500' if can_edit_group}#{'bg-gray-100 text-gray-500 cursor-not-allowed' unless can_edit_group}",
                disabled: !can_edit_group
              } %>
          <% unless can_edit_group %>
            <%= form.hidden_field :group_id %>
          <% end %>
          <p class="text-xs text-gray-500 mt-1">
            <%= can_edit_group ? "Choose which group manages this screen" : "You don't have permission to change the group for this screen" %>
          </p>
        </div>

      </div>
    </div>

    <!-- Field Configurations (Advanced Settings) -->
    <% if screen.persisted? && screen.template %>
      <details class="bg-white rounded-lg border border-gray-200 shadow-sm">
        <summary class="px-4 py-3 border-b border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
          <h2 class="text-lg font-semibold text-gray-900 inline">Advanced Field Settings</h2>
          <p class="text-sm text-gray-600 mt-1">Configure pinned content and content ordering for specific fields (optional)</p>
        </summary>

        <div class="p-4 space-y-4">
          <p class="text-sm text-gray-600 mb-4">
            Pin specific content to always display on a field, or configure how content from multiple feeds is ordered and prioritized.
          </p>

          <% screen.template.positions.includes(:field).each do |position| %>
            <% field = position.field %>
            <% field_config = @field_configs_by_field&.fetch(field.id, nil) || screen.field_configs.build(field_id: field.id) %>

            <%= form.fields_for :field_configs, field_config do |fc| %>
              <%= fc.hidden_field :field_id %>

              <div class="p-3 bg-gray-50 rounded-lg">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                  <%= field.name.titleize %> Field
                </label>

                <!-- Pinned Content -->
                <%= fc.collection_select :pinned_content_id,
                    @active_content,
                    :id,
                    :name,
                    { include_blank: "No pinned content" },
                    { class: "block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" } %>
                <p class="text-xs text-gray-500 mt-1">Select content to pin, or "No pinned content" to clear</p>

                <!-- Content Ordering Strategy -->
                <div class="mt-3">
                  <%= fc.label :ordering_strategy, "Content Ordering", class: "block text-sm font-medium text-gray-700 mb-2" %>
                  <%= fc.select :ordering_strategy,
                      options_for_select(
                        ContentOrderers::STRATEGIES.keys.map do |strategy|
                          label = strategy.titleize
                          label += " (Default)" if strategy == "weighted"
                          [label, strategy]
                        end,
                        field_config.ordering_strategy.presence || "weighted"
                      ),
                      {},
                      { class: "block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" } %>
                  <p class="text-xs text-gray-500 mt-1">
                    <strong>Random:</strong> Shuffles all content equally.
                    <strong>Weighted:</strong> High-priority feeds appear more often.
                    <strong>Strict Priority:</strong> Only shows highest-priority feed.
                  </p>
                </div>
              </div>
            <% end %>
          <% end %>
        </div>
      </details>
    <% end %>

    <!-- Form Actions -->
    <div class="flex items-center justify-between pt-2">
      <div class="flex space-x-3">
        <%= link_to "Cancel", (screen.persisted? ? screen : screens_path), class: "btn-secondary" %>
      </div>
      <div class="flex space-x-3">
        <%= form.submit "Save Screen", class: "btn-primary" %>
      </div>
    </div>
  <% end %>
</div>
