<% content_for :title, "Network Analytics - Baffle Hub" %>

<div class="space-y-6">
  <!-- Header -->
  <div>
    <h1 class="text-3xl font-bold text-gray-900">Network Analytics</h1>
    <p class="mt-2 text-gray-600">Detailed traffic analysis and network intelligence insights</p>
  </div>

  <!-- Time Period Selector -->
  <div class="bg-white shadow rounded-lg">
    <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">Time Period</h3>
        <div class="flex space-x-2">
          <% [:hour, :day, :week, :month].each do |period| %>
            <%= link_to period.to_s.humanize, analytics_networks_path(period: period),
                class: "px-3 py-1 rounded-md text-sm font-medium #{ @time_period == period ? 'bg-blue-100 text-blue-800' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100' }" %>
          <% end %>
        </div>
      </div>
    </div>
  </div>

  <!-- Network Type Overview -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    <div class="bg-white shadow rounded-lg">
      <div class="p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-8 w-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">Standard Networks</p>
            <p class="text-2xl font-bold text-gray-900">
              <%= number_with_delimiter(@network_breakdown.dig('standard', :networks) || 0) %>
            </p>
            <p class="text-xs text-gray-500">
              <%= number_with_delimiter(@network_breakdown.dig('standard', :events) || 0) %> events
              (<%= @network_breakdown.dig('standard', :percentage) || 0 %>%)
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white shadow rounded-lg">
      <div class="p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-8 w-8 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
            </svg>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">Datacenter Networks</p>
            <p class="text-2xl font-bold text-gray-900">
              <%= number_with_delimiter(@network_breakdown.dig('datacenter', :networks) || 0) %>
            </p>
            <p class="text-xs text-gray-500">
              <%= number_with_delimiter(@network_breakdown.dig('datacenter', :events) || 0) %> events
              (<%= @network_breakdown.dig('datacenter', :percentage) || 0 %>%)
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white shadow rounded-lg">
      <div class="p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-8 w-8 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
            </svg>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">VPN Networks</p>
            <p class="text-2xl font-bold text-gray-900">
              <%= number_with_delimiter(@network_breakdown.dig('vpn', :networks) || 0) %>
            </p>
            <p class="text-xs text-gray-500">
              <%= number_with_delimiter(@network_breakdown.dig('vpn', :events) || 0) %> events
              (<%= @network_breakdown.dig('vpn', :percentage) || 0 %>%)
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white shadow rounded-lg">
      <div class="p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-8 w-8 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
          </div>
          <div class="ml-4">
            <p class="text-sm font-medium text-gray-500">Proxy Networks</p>
            <p class="text-2xl font-bold text-gray-900">
              <%= number_with_delimiter(@network_breakdown.dig('proxy', :networks) || 0) %>
            </p>
            <p class="text-xs text-gray-500">
              <%= number_with_delimiter(@network_breakdown.dig('proxy', :events) || 0) %> events
              (<%= @network_breakdown.dig('proxy', :percentage) || 0 %>%)
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Top Networks by Traffic -->
  <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">Top Networks by Traffic Volume</h3>
      <p class="text-sm text-gray-500">Networks with the most requests in the selected time period</p>
    </div>
    <div class="overflow-x-auto">
      <% if @top_networks.any? %>
        <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">Network</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Events</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Unique IPs</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            <% @top_networks.each do |network| %>
              <tr class="hover:bg-gray-50">
                <td class="px-6 py-4 whitespace-nowrap text-sm">
                  <div>
                    <%= link_to network.cidr, network_range_path(network),
                        class: "text-blue-600 hover:text-blue-800 hover:underline font-mono font-medium" %>
                  </div>
                  <div class="text-xs text-gray-500">
                    <% if network.country.present? %>
                      🏳️ <%= network.country %>
                    <% end %>
                    <% if network.asn.present? %>
                      • ASN <%= network.asn %>
                    <% end %>
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  <%= network.company || 'Unknown' %>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm">
                  <% if network.is_datacenter? %>
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">Datacenter</span>
                  <% elsif network.is_vpn? %>
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">VPN</span>
                  <% elsif network.is_proxy? %>
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Proxy</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">Standard</span>
                  <% end %>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  <%= number_with_delimiter(network.event_count) %>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  <%= number_with_delimiter(network.unique_ips) %>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm">
                  <%= link_to "View Events", events_path(network_cidr: network.cidr),
                      class: "text-blue-600 hover:text-blue-800 text-sm" %>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
      <% else %>
        <div class="px-6 py-12 text-center">
          <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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
          </svg>
          <h3 class="mt-2 text-sm font-medium text-gray-900">No network traffic</h3>
          <p class="mt-1 text-sm text-gray-500">No network activity found in the selected time period.</p>
        </div>
      <% end %>
    </div>
  </div>

  <!-- Additional Analytics Sections -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Top Companies -->
    <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">Top Companies by Traffic</h3>
        <p class="text-sm text-gray-500">Companies generating the most traffic</p>
      </div>
      <div class="p-6">
        <% if @top_companies.any? %>
          <div class="space-y-4">
            <% @top_companies.each do |company| %>
              <div class="flex items-center justify-between">
                <div class="flex-1">
                  <div class="flex items-center">
                    <div class="font-medium text-gray-900"><%= company.company %></div>
                    <div class="ml-2 text-sm text-gray-500">
                      <%= number_with_delimiter(company.network_count) %> networks
                    </div>
                  </div>
                  <div class="mt-1">
                    <div class="flex items-center text-sm text-gray-600">
                      <span><%= number_with_delimiter(company.event_count) %> events</span>
                      <span class="mx-2">•</span>
                      <span><%= number_with_delimiter(company.unique_ips) %> unique IPs</span>
                    </div>
                  </div>
                </div>
                <div class="ml-4">
                  <%= link_to "Filter Events", events_path(company: company.company),
                      class: "text-blue-600 hover:text-blue-800 text-sm font-medium" %>
                </div>
              </div>
            <% end %>
          </div>
        <% else %>
          <p class="text-sm text-gray-500">No company data available for this time period.</p>
        <% end %>
      </div>
    </div>

    <!-- Top ASNs -->
    <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">Top Autonomous Systems</h3>
        <p class="text-sm text-gray-500">ASNs with the most traffic</p>
      </div>
      <div class="p-6">
        <% if @top_asns.any? %>
          <div class="space-y-4">
            <% @top_asns.each do |asn| %>
              <div class="flex items-center justify-between">
                <div class="flex-1">
                  <div class="font-medium text-gray-900">
                    ASN <%= asn.asn %>
                    <% if asn.asn_org.present? %>
                      <span class="ml-2 text-gray-600">• <%= asn.asn_org.truncate(30) %></span>
                    <% end %>
                  </div>
                  <div class="mt-1 text-sm text-gray-600">
                    <span><%= number_with_delimiter(asn.event_count) %> events</span>
                    <span class="mx-2">•</span>
                    <span><%= number_with_delimiter(asn.unique_ips) %> unique IPs</span>
                    <span class="mx-2">•</span>
                    <span><%= number_with_delimiter(asn.network_count) %> networks</span>
                  </div>
                </div>
                <div class="ml-4">
                  <%= link_to "Filter Events", events_path(asn: asn.asn),
                      class: "text-blue-600 hover:text-blue-800 text-sm font-medium" %>
                </div>
              </div>
            <% end %>
          </div>
        <% else %>
          <p class="text-sm text-gray-500">No ASN data available for this time period.</p>
        <% end %>
      </div>
    </div>
  </div>

  <!-- Navigation -->
  <div class="flex items-center justify-between">
    <div>
      <%= link_to "← Back to Dashboard", analytics_path,
          class: "text-blue-600 hover:text-blue-800 font-medium" %>
    </div>
    <div class="text-sm text-gray-500">
      Showing network analytics for the <%= @time_period.to_s.humanize.downcase %>
    </div>
  </div>
</div>