<% content_for :title, "Block Countries" %>

<div class="space-y-6">
  <!-- Header -->
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-3xl font-bold text-gray-900">🌍 Block Countries</h1>
      <p class="mt-2 text-gray-600">Create country-based firewall policies to block or redirect traffic from specific countries</p>
    </div>
    <div class="flex space-x-3">
      <%= link_to "← Back to Policies", waf_policies_path,
          class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" %>
    </div>
  </div>

  <%= form_with(url: create_country_waf_policies_path, method: :post, local: true, class: "space-y-6") do |form| %>
    <!-- Display validation errors -->
    <% if defined?(@waf_policy) && @waf_policy&.errors&.any? %>
      <div class="rounded-md bg-red-50 p-4 border border-red-200">
        <div class="flex">
          <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
              <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>
          <div class="ml-3">
            <h3 class="text-sm font-medium text-red-800">
              <%= pluralize(@waf_policy.errors.count, "error") %> prohibited this policy from being saved:
            </h3>
            <div class="mt-2 text-sm text-red-700">
              <ul class="list-disc pl-5 space-y-1">
                <% @waf_policy.errors.full_messages.each do |message| %>
                  <li><%= message %></li>
                <% end %>
              </ul>
            </div>
          </div>
        </div>
      </div>
    <% end %>

    <!-- Popular Countries Quick Selection -->
    <div class="bg-white shadow rounded-lg">
      <div class="px-4 py-5 sm:p-6">
        <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">🚨 Popular Countries for Blocking</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <% CountryHelper.popular_for_blocking.each do |country| %>
            <label class="relative flex items-start p-3 border rounded-lg hover:bg-gray-50 cursor-pointer">
              <div class="flex items-center h-5">
                <%= check_box_tag "countries[]", country[:code], false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" %>
              </div>
              <div class="ml-3 text-sm">
                <div class="font-medium text-gray-900">
                  <%= country[:display] %>
                </div>
                <div class="text-gray-500">
                  <%= country[:reason] %>
                </div>
              </div>
            </label>
          <% end %>
        </div>
      </div>
    </div>

    <!-- Regional Selection -->
    <div class="bg-white shadow rounded-lg">
      <div class="px-4 py-5 sm:p-6">
        <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">🗺️ Select by Region</h3>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <% CountryHelper.by_region.each do |region_name, country_codes| %>
            <div>
              <h4 class="font-medium text-gray-900 mb-2"><%= region_name %></h4>
              <div class="grid grid-cols-2 gap-2">
                <% CountryHelper.countries_for_region(region_name).each do |country| %>
                  <label class="flex items-center text-sm">
                    <%= check_box_tag "countries[]", country[:code], false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mr-2" %>
                    <%= country[:display] %>
                  </label>
                <% end %>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    </div>

    <!-- Policy Settings -->
    <div class="bg-white shadow rounded-lg">
      <div class="px-4 py-5 sm:p-6 space-y-4">
        <h3 class="text-lg leading-6 font-medium text-gray-900">⚙️ Policy Settings</h3>

        <!-- Action Selection -->
        <div>
          <%= form.label :policy_action, "What should happen to traffic from selected countries?", class: "block text-sm font-medium text-gray-700" %>
          <div class="mt-2 space-y-2">
            <label class="flex items-center">
              <%= radio_button_tag "policy_action", "deny", true, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
              <span class="ml-2 text-sm text-gray-700">
                <span class="font-medium">🚫 Block (Deny)</span> - Show 403 Forbidden error
              </span>
            </label>
            <label class="flex items-center">
              <%= radio_button_tag "policy_action", "challenge", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
              <span class="ml-2 text-sm text-gray-700">
                <span class="font-medium">🛡️ Challenge</span> - Present CAPTCHA challenge
              </span>
            </label>
            <label class="flex items-center">
              <%= radio_button_tag "policy_action", "redirect", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
              <span class="ml-2 text-sm text-gray-700">
                <span class="font-medium">🔄 Redirect</span> - Redirect to compliance page
              </span>
            </label>
            <label class="flex items-center">
              <%= radio_button_tag "policy_action", "allow", false, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" %>
              <span class="ml-2 text-sm text-gray-700">
                <span class="font-medium">✅ Allow</span> - Explicitly allow traffic
              </span>
            </label>
          </div>
        </div>

        <!-- Redirect Settings (conditional) -->
        <div id="redirect-settings" class="hidden space-y-3">
          <%= form.label :redirect_url, "Redirect URL", class: "block text-sm font-medium text-gray-700" %>
          <%= text_field_tag "additional_data[redirect_url]", nil,
              placeholder: "https://example.com/compliance",
              class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" %>

          <%= form.label :redirect_status, "HTTP Status", class: "block text-sm font-medium text-gray-700 mt-2" %>
          <%= select_tag "additional_data[redirect_status]",
              options_for_select([["301 Moved Permanently", 301], ["302 Found", 302], ["307 Temporary Redirect", 307]], 302),
              { class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" } %>
        </div>

        <!-- Description -->
        <div>
          <%= form.label :description, "Description (optional)", class: "block text-sm font-medium text-gray-700" %>
          <%= text_area_tag "description", nil, rows: 3,
              placeholder: "e.g., Block countries with high scanner activity",
              class: "block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" %>
        </div>

        <!-- Preview -->
        <div id="policy-preview" class="border-t pt-4">
          <h4 class="text-sm font-medium text-gray-900 mb-2">📋 Policy Preview</h4>
          <div class="bg-gray-50 rounded-md p-3 text-sm text-gray-600">
            <span id="preview-text">Select countries above to see policy preview...</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Submit Buttons -->
    <div class="flex justify-end space-x-3">
      <%= link_to "Cancel", waf_policies_path,
          class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50" %>
      <%= submit_tag "Create Country Policy",
          class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
    </div>
  <% end %>
</div>

<script>
// Show/hide redirect settings based on policy action selection
document.addEventListener('DOMContentLoaded', function() {
  const actionRadios = document.querySelectorAll('input[name="policy_action"]');
  const redirectSettings = document.getElementById('redirect-settings');
  const previewText = document.getElementById('preview-text');

  function updateVisibility() {
    const selectedAction = document.querySelector('input[name="policy_action"]:checked')?.value;

    if (selectedAction === 'redirect') {
      redirectSettings.classList.remove('hidden');
    } else {
      redirectSettings.classList.add('hidden');
    }

    updatePreview();
  }

  function updatePreview() {
    const selectedCountries = document.querySelectorAll('input[name="countries[]"]:checked');
    const selectedAction = document.querySelector('input[name="policy_action"]:checked')?.value || 'deny';
    const actionText = {
      'deny': '🚫 Block',
      'challenge': '🛡️ Challenge',
      'redirect': '🔄 Redirect',
      'allow': '✅ Allow'
    }[selectedAction];

    if (selectedCountries.length > 0) {
      const countryNames = Array.from(selectedCountries).map(cb => {
        const label = cb.closest('label');
        const countryName = label.querySelector('.font-medium')?.textContent || cb.value;
        return countryName;
      }).join(', ');

      previewText.textContent = `${actionText} ${selectedCountries.length} countries: ${countryNames}`;
    } else {
      previewText.textContent = 'Select countries above to see policy preview...';
    }
  }

  // Add event listeners
  actionRadios.forEach(radio => {
    radio.addEventListener('change', updateVisibility);
  });

  document.querySelectorAll('input[name="countries[]"]').forEach(checkbox => {
    checkbox.addEventListener('change', updatePreview);
  });

  // Initial update
  updateVisibility();
});
</script>