<% content_for :title, "#{@network_range.cidr} - Network Range Details" %>

<% if @network_range.persisted? %>
  <%= turbo_stream_from "network_range_#{@network_range.id}" %>
<% end %>

<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
  <!-- Header -->
  <div class="mb-8">
    <div class="flex items-center justify-between">
      <div>
        <nav class="flex" aria-label="Breadcrumb">
          <ol class="flex items-center space-x-4">
            <li>
              <%= link_to "Network Ranges", network_ranges_path, class: "text-gray-500 hover:text-gray-700" %>
            </li>
            <li>
              <div class="flex items-center">
                <svg class="flex-shrink-0 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                  <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                </svg>
                <span class="ml-4 text-gray-700 font-medium"><%= @network_range.cidr %></span>
              </div>
            </li>
          </ol>
        </nav>
        <div class="mt-2 flex items-center space-x-3">
          <h1 class="text-3xl font-bold text-gray-900"><%= @network_range.cidr %></h1>
          <% if @network_range.virtual? %>
            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
              </svg>
              Virtual
            </span>
          <% end %>
          <% if @network_range.ipv4? %>
            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">IPv4</span>
          <% else %>
            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">IPv6</span>
          <% end %>
        </div>
      </div>
      <div class="flex space-x-3">
        <% if @network_range.virtual? %>
          <%= link_to "Create Network", new_network_range_path(network: @network_range.cidr), class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700" %>
        <% else %>
          <%= link_to "Edit", edit_network_range_path(@network_range), 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" %>
          <%= link_to "Create Rule", new_rule_path(network_range_id: @network_range.id), class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700" %>
        <% end %>
      </div>
    </div>
  </div>

  <!-- IPAPI Enrichment Data -->
  <% if @network_range.persisted? %>
    <%= render partial: "network_ranges/ipapi_data", locals: {
      ipapi_data: @ipapi_data,
      network_range: @network_range,
      parent_with_ipapi: @parent_with_ipapi,
      ipapi_loading: @ipapi_loading || false
    } %>
  <% end %>

  <!-- MaxMind GeoLite2 Data -->
  <% if @network_range.persisted? %>
    <%= render partial: "network_ranges/geolite_data", locals: {
      network_range: @network_range
    } %>
  <% end %>

  <!-- Network Intelligence Card -->
  <div class="bg-white shadow rounded-lg mb-6">
    <div class="px-6 py-4 border-b border-gray-200">
      <h3 class="text-lg font-medium text-gray-900">Network Intelligence</h3>
    </div>
    <div class="px-6 py-4">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div>
          <dt class="text-sm font-medium text-gray-500">Network Address</dt>
          <dd class="mt-1 text-sm text-gray-900 font-mono"><%= @network_range.network_address %></dd>
        </div>
        <div>
          <dt class="text-sm font-medium text-gray-500">Prefix Length</dt>
          <dd class="mt-1 text-sm text-gray-900">/<%= @network_range.prefix_length %></dd>
        </div>
        <div>
          <dt class="text-sm font-medium text-gray-500">Family</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= @network_range.ipv4? ? "IPv4" : "IPv6" %></dd>
        </div>

        <!-- Supernet display -->
        <% parent_with_intelligence = @network_range.parent_with_intelligence %>
        <% if parent_with_intelligence && parent_with_intelligence.cidr != @network_range.cidr %>
          <div>
            <dt class="text-sm font-medium text-gray-500">Supernet</dt>
            <dd class="mt-1 text-sm text-gray-900">
              <%= link_to parent_with_intelligence.cidr, network_range_path(parent_with_intelligence),
                  class: "text-blue-600 hover:text-blue-800 hover:underline font-mono" %>
              <% if parent_with_intelligence.company.present? %>
                <span class="ml-2 text-xs text-gray-500">(<%= parent_with_intelligence.company %>)</span>
              <% end %>
            </dd>
          </div>
        <% end %>

        <% if @network_range.asn.present? %>
          <div>
            <dt class="text-sm font-medium text-gray-500">ASN</dt>
            <dd class="mt-1 text-sm text-gray-900">
              <%= link_to "#{@network_range.asn} (#{@network_range.asn_org})", network_ranges_path(asn: @network_range.asn),
                  class: "text-blue-600 hover:text-blue-900 hover:underline" %>
            </dd>
          </div>
        <% end %>

        <% if @network_range.company.present? %>
          <div>
            <dt class="text-sm font-medium text-gray-500">Company</dt>
            <dd class="mt-1 text-sm text-gray-900">
              <%= link_to @network_range.company, network_ranges_path(company: @network_range.company),
                  class: "text-blue-600 hover:text-blue-900 hover:underline" %>
            </dd>
          </div>
        <% end %>

        <% if @network_range.country.present? %>
          <div>
            <dt class="text-sm font-medium text-gray-500">Country</dt>
            <dd class="mt-1 text-sm text-gray-900">
              <%= link_to @network_range.country, network_ranges_path(country: @network_range.country),
                  class: "text-blue-600 hover:text-blue-900 hover:underline" %>
            </dd>
          </div>
        <% end %>

        <% if @network_range.persisted? %>
          <div>
            <dt class="text-sm font-medium text-gray-500">Source</dt>
            <dd class="mt-1 text-sm text-gray-900"><%= @network_range.source %></dd>
          </div>

          <div>
            <dt class="text-sm font-medium text-gray-500">Created</dt>
            <dd class="mt-1 text-sm text-gray-900"><%= time_ago_in_words(@network_range.created_at) %> ago</dd>
          </div>

          <div>
            <dt class="text-sm font-medium text-gray-500">Updated</dt>
            <dd class="mt-1 text-sm text-gray-900"><%= time_ago_in_words(@network_range.updated_at) %> ago</dd>
          </div>
        <% else %>
          <div>
            <dt class="text-sm font-medium text-gray-500">Status</dt>
            <dd class="mt-1 text-sm text-gray-900">Virtual Network</dd>
          </div>

          <div>
            <dt class="text-sm font-medium text-gray-500">Events Found</dt>
            <dd class="mt-1 text-sm text-gray-900"><%= @traffic_stats[:total_requests] %> requests</dd>
          </div>
        <% end %>

        <!-- Classification Flags -->
        <div class="md:col-span-2 lg:col-span-3">
          <dt class="text-sm font-medium text-gray-500 mb-2">Classification</dt>
          <dd class="flex flex-wrap gap-2">
            <% if @network_range.is_datacenter? %>
              <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
                </svg>
                Datacenter
              </span>
            <% end %>
            <% if @network_range.is_vpn? %>
              <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
                </svg>
                VPN
              </span>
            <% end %>
            <% if @network_range.is_proxy? %>
              <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2h-2.22l.123.489.804.804A1 1 0 0113 18H7a1 1 0 01-.894-.553l.804-.804L7.22 15H5a2 2 0 01-2-2V5zm5.771 7H5V5h10v7H8.771z" clip-rule="evenodd" />
                </svg>
                Proxy
              </span>
            <% end %>
            <% if @network_range.abuser_scores_hash.any? %>
              <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                </svg>
                Abuser Score: <%= @network_range.abuser_scores_hash['score'] || 'Unknown' %>
              </span>
            <% end %>
          </dd>
        </div>
      </div>

      <% if @network_range.additional_data_hash.any? %>
        <div class="mt-6 pt-6 border-t border-gray-200">
          <dt class="text-sm font-medium text-gray-500 mb-2">Additional Data</dt>
          <dd class="mt-1">
            <pre class="bg-gray-50 p-3 rounded-md text-xs overflow-x-auto"><%= JSON.pretty_generate(@network_range.additional_data_hash) %></pre>
          </dd>
        </div>
      <% end %>
    </div>
  </div>

  <!-- Traffic Statistics -->
  <% if @traffic_stats[:total_requests] > 0 %>
    <div class="bg-white shadow rounded-lg mb-6">
      <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">Traffic Statistics</h3>
      </div>
      <div class="p-6">
        <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-6">
          <div class="text-center min-w-0">
            <div class="text-2xl font-bold text-gray-900 break-words"><%= number_with_delimiter(@traffic_stats[:total_requests]) %></div>
            <div class="text-sm text-gray-500 whitespace-normal">Total Requests</div>
          </div>
          <div class="text-center min-w-0">
            <div class="text-2xl font-bold text-gray-900 break-words"><%= number_with_delimiter(@traffic_stats[:unique_ips]) %></div>
            <div class="text-sm text-gray-500 whitespace-normal">Unique IPs</div>
          </div>
          <div class="text-center min-w-0">
            <div class="text-2xl font-bold text-green-600 break-words"><%= number_with_delimiter(@traffic_stats[:allowed_requests]) %></div>
            <div class="text-sm text-gray-500 whitespace-normal">Allowed</div>
          </div>
          <div class="text-center min-w-0">
            <div class="text-2xl font-bold text-red-600 break-words"><%= number_with_delimiter(@traffic_stats[:blocked_requests]) %></div>
            <div class="text-sm text-gray-500 whitespace-normal">Blocked</div>
          </div>
        </div>

        <% if @traffic_stats[:top_paths].any? %>
          <div class="border-t border-gray-200 pt-4">
            <h4 class="text-sm font-medium text-gray-900 mb-2">Top Paths</h4>
            <div class="space-y-1">
              <% @traffic_stats[:top_paths].first(5).each do |path, count| %>
                <div class="flex justify-between text-sm">
                  <span class="text-gray-600 truncate"><%= path %></span>
                  <span class="font-medium"><%= count %></span>
                </div>
              <% end %>
            </div>
          </div>
        <% end %>

        <% if @network_range.persisted? && @network_range.agent_tally.any? %>
          <div class="border-t border-gray-200 pt-4">
            <h4 class="text-sm font-medium text-gray-900 mb-2">Top User Agents</h4>
            <div class="space-y-1">
              <% @network_range.agent_tally.sort_by { |ua, count| -count }.first(5).each do |user_agent, count| %>
                <div class="flex justify-between text-sm">
                  <span class="text-gray-600 truncate" title="<%= user_agent %>">
                    <% if user_agent.present? %>
                      <% ua = parse_user_agent(user_agent) %>
                      <% if ua[:name].present? %>
                        <%= ua[:name] %>
                        <% if ua[:version].present? %>
                          <span class="text-gray-400">(<%= ua[:version] %>)</span>
                        <% end %>
                        <% if ua[:bot] %>
                          <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-orange-100 text-orange-800 ml-1">
                            🤖 <%= ua[:bot_name] || 'Bot' %>
                          </span>
                        <% end %>
                      <% else %>
                        <%= truncate(user_agent, length: 50) %>
                      <% end %>
                    <% else %>
                      <em class="text-gray-400">Unknown</em>
                    <% end %>
                  </span>
                  <span class="font-medium"><%= count %></span>
                </div>
              <% end %>
            </div>
          </div>
        <% end %>
      </div>
    </div>
  <% end %>

  <!-- Associated Rules -->
  <div class="bg-white shadow rounded-lg mb-6" data-controller="quick-create-rule">
    <div class="px-6 py-4 border-b border-gray-200">
      <div class="flex items-center justify-between">
        <h3 class="text-lg font-medium text-gray-900">Associated Rules (<%= @associated_rules.count %>)</h3>
        <% if @network_range.persisted? %>
          <button type="button" data-action="click->quick-create-rule#toggle" data-quick-create-rule-target="toggle" class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            <svg class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
            Quick Create Rule
          </button>
        <% else %>
          <span class="text-sm text-gray-500">Create this network to add rules</span>
        <% end %>
      </div>
    </div>

    <!-- Quick Create Rule Form -->
    <% if @network_range.persisted? %>
      <div id="quick_create_rule" data-quick-create-rule-target="form" class="hidden border-b border-gray-200">
      <div class="px-6 py-4 bg-blue-50">
        <%= form_with(model: Rule.new, url: rules_path, local: true,
            class: "space-y-4",
            data: { turbo: false }) do |form| %>

          <!-- Hidden network range ID -->
          <%= form.hidden_field :network_range_id, value: @network_range.id %>

          <!-- Network Context Display -->
          <div class="mb-4 p-3 bg-blue-100 border border-blue-200 rounded-md">
            <div class="flex items-center">
              <svg class="w-5 h-5 text-blue-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
              </svg>
              <div class="text-sm text-blue-800">
                <strong>Creating rule for:</strong> <%= @network_range.cidr %>
                <% if @network_range.company.present? %>
                  - <%= @network_range.company %>
                <% end %>
                <% if @network_range.asn_org.present? %>
                  (ASN: <%= @network_range.asn_org %>)
                <% end %>
                <% if @network_range.is_datacenter? || @network_range.is_vpn? || @network_range.is_proxy? %>
                  <span class="ml-2">
                    <% if @network_range.is_datacenter? %><span class="bg-orange-200 px-2 py-0.5 rounded text-xs">Datacenter</span><% end %>
                    <% if @network_range.is_vpn? %><span class="bg-purple-200 px-2 py-0.5 rounded text-xs">VPN</span><% end %>
                    <% if @network_range.is_proxy? %><span class="bg-red-200 px-2 py-0.5 rounded text-xs">Proxy</span><% end %>
                  </span>
                <% end %>
              </div>
            </div>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- Rule Type -->
            <div>
              <%= form.label :waf_rule_type, "Rule Type", class: "block text-sm font-medium text-gray-700" %>
              <%= form.select :waf_rule_type,
                  options_for_select([
                    ['Network - IP/CIDR based blocking', 'network'],
                    ['Rate Limit - Request rate limiting', 'rate_limit'],
                    ['Path Pattern - URL path filtering', 'path_pattern']
                  ], 'network'),
                  { },
                  {
                    class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm",
                    id: "quick_rule_type_select",
                    data: { quick_create_rule_target: "ruleTypeSelect", action: "change->quick-create-rule#updateRuleTypeFields" }
                  } %>
              <p class="mt-1 text-xs text-gray-500">Select the type of rule to create</p>
            </div>

            <!-- Action -->
            <div>
              <%= form.label :waf_action, "Action", class: "block text-sm font-medium text-gray-700" %>
              <%= form.select :waf_action,
                  options_for_select([
                    ['Deny - Block requests', 'deny'],
                    ['Allow - Whitelist requests', 'allow'],
                    ['Rate Limit - Throttle requests', 'rate_limit'],
                    ['Redirect - Redirect to URL', 'redirect'],
                    ['Challenge - Present CAPTCHA', 'challenge'],
                    ['Log - Log but allow', 'log']
                  ], 'deny'),
                  { },
                  {
                    class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm",
                    data: { quick_create_rule_target: "actionSelect", action: "change->quick-create-rule#updateRuleTypeFields" }
                  } %>
              <p class="mt-1 text-xs text-gray-500">Action to take when rule matches</p>
            </div>
          </div>

          <!-- Expires At -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <%= form.label :expires_at, "Expires At (Optional)", class: "block text-sm font-medium text-gray-700" %>
              <%= form.text_field :expires_at,
                  placeholder: "YYYY-MM-DD HH:MM (24-hour format, optional)",
                  class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm",
                  data: { quick_create_rule_target: "expiresAtField" },
                  autocomplete: "off" %>
              <p class="mt-1 text-xs text-gray-500">Leave blank for permanent rule. Format: YYYY-MM-DD HH:MM (e.g., 2024-12-31 23:59)</p>
            </div>

            <div class="text-sm text-gray-600 flex items-center pt-6">
              <svg class="w-4 h-4 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
              </svg>
              Priority will be calculated automatically based on rule type
            </div>
          </div>

          <!-- Pattern-based Rule Fields -->
          <div id="pattern_fields" data-quick-create-rule-target="patternFields" class="hidden space-y-4">
            <div>
              <%= form.label :conditions, "Pattern/Conditions", class: "block text-sm font-medium text-gray-700" %>
              <%= form.text_area :conditions, rows: 3,
                  class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm",
                  placeholder: "Enter pattern or JSON conditions...",
                  id: "quick_conditions_field",
                  data: { quick_create_rule_target: "conditionsField" } %>
              <p class="mt-1 text-xs text-gray-500" id="pattern_help_text" data-quick-create-rule-target="helpText">Pattern will be used for matching</p>
            </div>
          </div>

          <!-- Rate Limit Fields -->
          <div id="rate_limit_fields" data-quick-create-rule-target="rateLimitFields" class="hidden space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <%= label_tag :rate_limit, "Request Limit", class: "block text-sm font-medium text-gray-700" %>
                <%= number_field_tag :rate_limit, 10,
                    min: 1,
                    class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
                <p class="mt-1 text-xs text-gray-500">Maximum requests per time window</p>
              </div>
              <div>
                <%= label_tag :rate_window, "Time Window (seconds)", class: "block text-sm font-medium text-gray-700" %>
                <%= number_field_tag :rate_window, 60,
                    min: 1,
                    class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
                <p class="mt-1 text-xs text-gray-500">Time window in seconds</p>
              </div>
            </div>
          </div>

          <!-- Redirect Fields -->
          <div id="redirect_fields" data-quick-create-rule-target="redirectFields" class="hidden space-y-4">
            <div>
              <%= label_tag :redirect_url, "Redirect URL", class: "block text-sm font-medium text-gray-700" %>
              <%= text_field_tag :redirect_url,
                  "https://example.com/blocked",
                  class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
              <p class="mt-1 text-xs text-gray-500">URL to redirect to when rule matches</p>
            </div>
          </div>

          <!-- Metadata -->
          <div>
            <%= form.label :metadata, "Reason/Description", class: "block text-sm font-medium text-gray-700" %>
            <%= form.text_field :metadata,
                placeholder: "e.g., Block malicious traffic from this range",
                class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
            <p class="mt-1 text-xs text-gray-500">Human-readable description of why this rule exists</p>
          </div>

          <!-- Source -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <%= form.label :source, "Source", class: "block text-sm font-medium text-gray-700" %>
              <%= form.select :source,
                  options_for_select([
                    ['Manual', 'manual'],
                    ['Auto-detected', 'auto'],
                    ['Hub Sync', 'hub'],
                    ['Imported', 'imported']
                  ], 'manual'),
                  { },
                  { class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" } %>
            </div>

            <div class="flex items-center pt-6">
              <%= form.check_box :enabled, checked: true, class: "h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" %>
              <%= form.label :enabled, "Enable immediately", class: "ml-2 block text-sm text-gray-900" %>
            </div>
          </div>

          <!-- Form Actions -->
          <div class="flex justify-end space-x-3 pt-4 border-t border-blue-200">
            <button type="button" data-action="click->quick-create-rule#toggle" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
              Cancel
            </button>
            <%= form.submit "Create Rule", class: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700" %>
          </div>
        <% end %>
      </div>
    </div>
    <% end %>

    <!-- Rules List -->
    <% if @associated_rules.any? %>
      <div class="divide-y divide-gray-200">
        <% @associated_rules.each do |rule| %>
          <div class="px-6 py-4">
            <div class="flex items-center justify-between">
              <div class="flex items-center space-x-4">
                <div>
                  <div class="flex items-center space-x-2">
                    <span class="text-sm font-medium text-gray-900">
                      <%= rule.waf_action.upcase %> <%= rule.cidr %>
                    </span>
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                      Priority: <%= rule.priority %>
                    </span>
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                      <%= rule.waf_rule_type.humanize %>
                    </span>
                    <% if rule.source.include?('surgical') %>
                      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                        Surgical
                      </span>
                    <% end %>
                  </div>
                  <div class="mt-1 text-sm text-gray-500">
                    Created <%= time_ago_in_words(rule.created_at) %> ago by <%= rule.user&.email_address || 'System' %>
                  </div>
                  <% if rule.metadata_hash['reason'].present? %>
                    <div class="mt-1 text-sm text-gray-600">
                      Reason: <%= rule.metadata_hash['reason'] %>
                    </div>
                  <% end %>
                </div>
              </div>
              <div class="flex items-center space-x-2">
                <% if rule.enabled? %>
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
                <% else %>
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Disabled</span>
                <% end %>
                <%= link_to "View", rule_path(rule), class: "text-blue-600 hover:text-blue-900 text-sm font-medium" %>
              </div>
            </div>
          </div>
        <% end %>
      </div>
    <% else %>
      <div 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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
        <% if @network_range.virtual? %>
          <h3 class="mt-2 text-sm font-medium text-gray-900">Virtual Network</h3>
          <p class="mt-1 text-sm text-gray-500">Create this network range to add rules and manage it permanently.</p>
        <% else %>
          <h3 class="mt-2 text-sm font-medium text-gray-900">No rules yet</h3>
          <p class="mt-1 text-sm text-gray-500">Get started by creating a rule for this network range.</p>
        <% end %>
      </div>
    <% end %>
  </div>

  <!-- Network Relationships -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <!-- Parent Ranges -->
    <% if @parent_ranges.any? || @supernet_rules.any? %>
      <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
          <h3 class="text-lg font-medium text-gray-900">
            Supernet Ranges
            <% if @supernet_rules.any? %>
              <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                <%= @supernet_rules.count %> <%= 'rule'.pluralize(@supernet_rules.count) %>
              </span>
            <% end %>
          </h3>
          <p class="mt-1 text-sm text-gray-500">Broader networks that contain this range</p>
        </div>
        <div class="divide-y divide-gray-200">
          <% @parent_ranges.each do |parent| %>
            <div class="px-6 py-3">
              <div class="flex items-center justify-between">
                <div class="min-w-0 flex-1">
                  <%= link_to parent.cidr, network_range_path(parent), class: "text-sm font-medium text-gray-900 hover:text-blue-600" %>
                  <div class="text-sm text-gray-500">
                    Prefix: /<%= parent.prefix_length %> |
                    <% if parent.company.present? %><%= parent.company %> | <% end %>
                    <%= parent.source %>
                  </div>
                  <%# Show rules for this parent %>
                  <% parent_rules = @supernet_rules.select { |r| r.network_range_id == parent.id } %>
                  <% if parent_rules.any? %>
                    <div class="mt-2 pl-3 border-l-2 border-blue-200 space-y-1">
                      <% parent_rules.each do |rule| %>
                        <%= render 'rules/compact_rule', rule: rule %>
                      <% end %>
                    </div>
                  <% end %>
                </div>
              </div>
            </div>
          <% end %>
          <%# Show supernet rules that don't have a parent range loaded %>
          <% orphan_supernet_rules = @supernet_rules.reject { |r| @parent_ranges.map(&:id).include?(r.network_range_id) } %>
          <% if orphan_supernet_rules.any? %>
            <div class="px-6 py-3 bg-gray-50">
              <div class="text-sm font-medium text-gray-700 mb-2">Additional Supernet Rules</div>
              <div class="space-y-1">
                <% orphan_supernet_rules.each do |rule| %>
                  <%= render 'rules/compact_rule', rule: rule %>
                <% end %>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    <% end %>

    <!-- Child Ranges -->
    <% if @child_ranges.any? || @subnet_rules.any? %>
      <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
          <h3 class="text-lg font-medium text-gray-900">
            Subnet Ranges
            <% if @subnet_rules.any? %>
              <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                <%= @subnet_rules.count %> <%= 'rule'.pluralize(@subnet_rules.count) %>
              </span>
            <% end %>
          </h3>
          <p class="mt-1 text-sm text-gray-500">More specific networks within this range</p>
        </div>
        <div class="divide-y divide-gray-200">
          <% @child_ranges.each do |child| %>
            <div class="px-6 py-3">
              <div class="flex items-center justify-between">
                <div class="min-w-0 flex-1">
                  <%= link_to child.cidr, network_range_path(child), class: "text-sm font-medium text-gray-900 hover:text-blue-600" %>
                  <div class="text-sm text-gray-500">
                    Prefix: /<%= child.prefix_length %> |
                    <% if child.company.present? %><%= child.company %> | <% end %>
                    <%= child.source %>
                  </div>
                  <%# Show rules for this child %>
                  <% child_rules = @subnet_rules.select { |r| r.network_range_id == child.id } %>
                  <% if child_rules.any? %>
                    <div class="mt-2 pl-3 border-l-2 border-green-200 space-y-1">
                      <% child_rules.each do |rule| %>
                        <%= render 'rules/compact_rule', rule: rule %>
                      <% end %>
                    </div>
                  <% end %>
                </div>
              </div>
            </div>
          <% end %>
          <%# Show subnet rules that don't have a child range loaded %>
          <% orphan_subnet_rules = @subnet_rules.reject { |r| @child_ranges.map(&:id).include?(r.network_range_id) } %>
          <% if orphan_subnet_rules.any? %>
            <div class="px-6 py-3 bg-gray-50">
              <div class="text-sm font-medium text-gray-700 mb-2">Additional Subnet Rules</div>
              <div class="space-y-1">
                <% orphan_subnet_rules.each do |rule| %>
                  <%= render 'rules/compact_rule', rule: rule %>
                <% end %>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    <% end %>
  </div>

  <!-- Recent Events -->
  <% if @related_events.any? %>
    <div class="bg-white shadow rounded-lg" data-controller="timeline" data-timeline-mode-value="events">
      <div class="px-6 py-4 border-b border-gray-200">
        <div class="flex items-center justify-between">
          <h3 class="text-lg font-medium text-gray-900">Recent Events (<%= number_with_delimiter(@events_pagy.count) %>)</h3>
          <% if @events_pagy.pages > 1 %>
            <span class="text-sm text-gray-500">
              Page <%= @events_pagy.page %> of <%= @events_pagy.pages %>
            </span>
          <% end %>
        </div>
        <!-- Top Pagination -->
        <% if @events_pagy.pages > 1 %>
          <div class="mt-4">
            <%= pagy_nav_tailwind(@events_pagy, pagy_id: 'network_events_top') %>
          </div>
        <% end %>
      </div>
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Path</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User Agent</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <% @related_events.each do |event| %>
              <tr class="hover:bg-gray-50 cursor-pointer" onclick="window.location='<%= event_path(event) %>'">
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  <div class="text-gray-900" data-timeline-target="timestamp" data-iso="<%= event.timestamp.iso8601 %>">
                    <%= event.timestamp.strftime("%H:%M:%S") %>
                  </div>
                  <div class="text-xs text-gray-500" data-timeline-target="date" data-iso="<%= event.timestamp.iso8601 %>">
                    <%= event.timestamp.strftime("%Y-%m-%d") %>
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900">
                  <%= event.ip_address %>
                </td>
                <td class="px-6 py-4 text-sm text-gray-900">
                  <div class="max-w-md break-all">
                    <%= event.request_path || "-" %>
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <% action_classes = case event.waf_action
                                      when 'deny' then 'bg-red-100 text-red-800'
                                      when 'allow' then 'bg-green-100 text-green-800'
                                      when 'redirect' then 'bg-blue-100 text-blue-800'
                                      when 'challenge' then 'bg-yellow-100 text-yellow-800'
                                      when 'log' then 'bg-gray-100 text-gray-800'
                                      else 'bg-gray-100 text-gray-800'
                                      end %>
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium <%= action_classes %>">
                    <%= event.waf_action %>
                  </span>
                </td>
                <td class="px-6 py-4 text-sm text-gray-900">
                  <% if event.user_agent.present? %>
                    <% ua = parse_user_agent(event.user_agent) %>
                    <div class="space-y-0.5" title="<%= ua[:raw] %>">
                      <div class="font-medium text-gray-900">
                        <%= ua[:name] if ua[:name].present? %>
                        <% if ua[:version].present? && ua[:name].present? %>
                          <span class="text-gray-500 font-normal"><%= ua[:version] %></span>
                        <% end %>
                      </div>
                      <% if ua[:os_name].present? %>
                        <div class="text-xs text-gray-500">
                          <%= ua[:os_name] %>
                          <% if ua[:os_version].present? %>
                            <%= ua[:os_version] %>
                          <% end %>
                        </div>
                      <% end %>
                      <% if ua[:bot] %>
                        <div class="text-xs">
                          <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-orange-100 text-orange-800">
                            🤖 <%= ua[:bot_name] || 'Bot' %>
                          </span>
                        </div>
                      <% end %>
                    </div>
                  <% else %>
                    <span class="text-gray-400">-</span>
                  <% end %>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
      </div>

        <!-- Bottom Pagination -->
        <% if @events_pagy.pages > 1 %>
          <%= pagy_nav_tailwind(@events_pagy, pagy_id: 'network_events_bottom') %>
        <% end %>
    </div>
  <% end %>
</div>

