<% geolite_data = network_range.network_data_for(:geolite) %>

<% if geolite_data.present? %>
  <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">MaxMind GeoLite2 Data</h3>
    </div>

    <div class="px-6 py-4">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- ASN Data -->
        <% if geolite_data['asn'].present? %>
          <div>
            <dt class="text-sm font-medium text-gray-500">ASN (MaxMind)</dt>
            <dd class="mt-1 text-sm text-gray-900">
              AS<%= geolite_data['asn']['autonomous_system_number'] %>
              <% if geolite_data['asn']['autonomous_system_organization'].present? %>
                <div class="text-xs text-gray-600"><%= geolite_data['asn']['autonomous_system_organization'] %></div>
              <% end %>
            </dd>
          </div>
        <% end %>

        <!-- Country Data -->
        <% if geolite_data['country'].present? %>
          <div>
            <dt class="text-sm font-medium text-gray-500">Country (MaxMind)</dt>
            <dd class="mt-1 text-sm text-gray-900">
              <%= geolite_data['country']['country_name'] || geolite_data['country']['country_iso_code'] %>
              <% if geolite_data['country']['country_iso_code'].present? %>
                <span class="ml-2 text-lg"><%= country_flag(geolite_data['country']['country_iso_code']) %></span>
              <% end %>
            </dd>
          </div>

          <% if geolite_data['country']['continent_name'].present? %>
            <div>
              <dt class="text-sm font-medium text-gray-500">Continent</dt>
              <dd class="mt-1 text-sm text-gray-900">
                <%= geolite_data['country']['continent_name'] %>
                <span class="text-xs text-gray-500">(<%= geolite_data['country']['continent_code'] %>)</span>
              </dd>
            </div>
          <% end %>

          <% if geolite_data['country']['geoname_id'].present? %>
            <div>
              <dt class="text-sm font-medium text-gray-500">GeoName ID</dt>
              <dd class="mt-1 text-sm text-gray-900 font-mono">
                <%= geolite_data['country']['geoname_id'] %>
              </dd>
            </div>
          <% end %>

          <!-- Flags -->
          <div class="md:col-span-2 lg:col-span-3">
            <dt class="text-sm font-medium text-gray-500 mb-2">MaxMind Flags</dt>
            <dd class="flex flex-wrap gap-2">
              <% if geolite_data['country']['is_anonymous_proxy'] %>
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">Anonymous Proxy</span>
              <% end %>
              <% if geolite_data['country']['is_satellite_provider'] %>
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">Satellite Provider</span>
              <% end %>
              <% if geolite_data['country']['is_anycast'] %>
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">Anycast</span>
              <% end %>
              <% if geolite_data['country']['is_in_european_union'] == "1" %>
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-600 text-white">🇪🇺 EU Member</span>
              <% end %>
            </dd>
          </div>
        <% end %>
      </div>

      <!-- Raw GeoLite Data (collapsible) -->
      <details class="mt-6 pt-6 border-t border-gray-200">
        <summary class="cursor-pointer text-sm font-medium text-gray-700 hover:text-gray-900">
          Show Raw MaxMind Data
        </summary>
        <div class="mt-3">
          <pre class="bg-gray-50 p-3 rounded-md text-xs overflow-x-auto"><%= JSON.pretty_generate(geolite_data) %></pre>
        </div>
      </details>
    </div>
  </div>
<% end %>
