<% content_for :title, "Rule ##{@rule.id} - #{@rule.action.upcase}" %>

<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 "Rules", rules_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">Rule #<%= @rule.id %></span>
              </div>
            </li>
          </ol>
        </nav>
        <div class="mt-2 flex items-center space-x-3">
          <h1 class="text-3xl font-bold text-gray-900">Rule #<%= @rule.id %></h1>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium <%=
            case @rule.action
            when 'allow' then 'bg-green-100 text-green-800'
            when 'deny' then 'bg-red-100 text-red-800'
            when 'rate_limit' then 'bg-yellow-100 text-yellow-800'
            when 'redirect' then 'bg-indigo-100 text-indigo-800'
            when 'log' then 'bg-gray-100 text-gray-800'
            else 'bg-gray-100 text-gray-800'
            end %>">
            <%= @rule.action.upcase %>
          </span>
        </div>
      </div>
      <div class="flex space-x-3">
        <%= link_to "Edit", edit_rule_path(@rule), 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" %>
        <% if @rule.enabled? %>
          <%= link_to "Disable", disable_rule_path(@rule),
              method: :post,
              data: { confirm: "Are you sure you want to disable this rule?" },
              class: "inline-flex items-center px-4 py-2 border border-yellow-300 rounded-md shadow-sm text-sm font-medium text-yellow-700 bg-yellow-50 hover:bg-yellow-100" %>
        <% else %>
          <%= link_to "Enable", enable_rule_path(@rule),
              method: :post,
              class: "inline-flex items-center px-4 py-2 border border-green-300 rounded-md shadow-sm text-sm font-medium text-green-700 bg-green-50 hover:bg-green-100" %>
        <% end %>
      </div>
    </div>
  </div>

  <!-- Rule Details -->
  <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">Rule Details</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">Rule Type</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= @rule.rule_type.humanize %></dd>
        </div>

        <div>
          <dt class="text-sm font-medium text-gray-500">Action</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= @rule.action.upcase %></dd>
        </div>

        <div>
          <dt class="text-sm font-medium text-gray-500">Status</dt>
          <dd class="mt-1">
            <% if @rule.enabled? && !@rule.expired? %>
              <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>
            <% elsif @rule.expired? %>
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Expired</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 %>
          </dd>
        </div>

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

        <div>
          <dt class="text-sm font-medium text-gray-500">Priority</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= @rule.priority %></dd>
        </div>

        <div>
          <dt class="text-sm font-medium text-gray-500">Created</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= @rule.created_at.strftime("%Y-%m-%d %H:%M:%S UTC") %></dd>
        </div>

        <% if @rule.expires_at.present? %>
          <div>
            <dt class="text-sm font-medium text-gray-500">Expires At</dt>
            <dd class="mt-1 text-sm text-gray-900"><%= @rule.expires_at.strftime("%Y-%m-%d %H:%M:%S UTC") %></dd>
          </div>
        <% end %>

        <div>
          <dt class="text-sm font-medium text-gray-500">Created By</dt>
          <dd class="mt-1 text-sm text-gray-900"><%= @rule.user&.email_address || 'System' %></dd>
        </div>

        <% if @rule.updated_at != @rule.created_at %>
          <div>
            <dt class="text-sm font-medium text-gray-500">Last Updated</dt>
            <dd class="mt-1 text-sm text-gray-900"><%= @rule.updated_at.strftime("%Y-%m-%d %H:%M:%S UTC") %></dd>
          </div>
        <% end %>
      </div>
    </div>
  </div>

  <!-- Target Information -->
  <% if @rule.network_rule? && @rule.network_range.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">Network Target</h3>
      </div>
      <div class="px-6 py-4">
        <div class="bg-gray-50 rounded-lg p-4">
          <div class="flex items-center justify-between">
            <div>
              <div class="text-lg font-medium text-gray-900">
                <%= link_to @rule.network_range.cidr, network_range_path(@rule.network_range), class: "text-blue-600 hover:text-blue-900" %>
              </div>
              <% if @rule.network_range.company.present? %>
                <div class="text-sm text-gray-600"><%= @rule.network_range.company %></div>
              <% end %>
              <% if @rule.network_range.asn.present? %>
                <div class="text-sm text-gray-500">
                  ASN <%= @rule.network_range.asn %><% if @rule.network_range.asn_org.present? %> (<%= @rule.network_range.asn_org %>)<% end %>
                </div>
              <% end %>
              <% if @rule.network_range.country.present? %>
                <div class="text-sm text-gray-500">Country: <%= @rule.network_range.country %></div>
              <% end %>
            </div>
            <div class="flex space-x-2">
              <% if @rule.network_range.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>
              <% end %>
              <% if @rule.network_range.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>
              <% end %>
              <% if @rule.network_range.is_proxy? %>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Proxy</span>
              <% end %>
            </div>
          </div>
        </div>
      </div>
    </div>
  <% end %>

  <!-- Conditions -->
  <% if @rule.conditions.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">Conditions</h3>
      </div>
      <div class="px-6 py-4">
        <pre class="bg-gray-50 p-4 rounded-md text-sm overflow-x-auto"><%= JSON.pretty_generate(JSON.parse(@rule.conditions)) rescue @rule.conditions %></pre>
      </div>
    </div>
  <% end %>

  <!-- Metadata -->
  <% if @rule.metadata.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">Metadata</h3>
      </div>
      <div class="px-6 py-4">
        <pre class="bg-gray-50 p-4 rounded-md text-sm overflow-x-auto"><%= JSON.pretty_generate(JSON.parse(@rule.metadata)) rescue @rule.metadata %></pre>
      </div>
    </div>
  <% end %>

  <!-- Rule Actions -->
  <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">Actions</h3>
    </div>
    <div class="px-6 py-4">
      <div class="flex space-x-4">
        <%= link_to "Edit Rule", edit_rule_path(@rule), 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" %>

        <% if @rule.enabled? %>
          <%= form_with(model: @rule, url: disable_rule_path(@rule), method: :post, class: "inline-flex") do |form| %>
            <%= form.submit "Disable Rule", class: "inline-flex items-center px-4 py-2 border border-yellow-300 rounded-md shadow-sm text-sm font-medium text-yellow-700 bg-yellow-50 hover:bg-yellow-100 cursor-pointer" %>
          <% end %>
        <% else %>
          <%= form_with(model: @rule, url: enable_rule_path(@rule), method: :post, class: "inline-flex") do |form| %>
            <%= form.submit "Enable Rule", class: "inline-flex items-center px-4 py-2 border border-green-300 rounded-md shadow-sm text-sm font-medium text-green-700 bg-green-50 hover:bg-green-100 cursor-pointer" %>
          <% end %>
        <% end %>

        <%= link_to "View All Rules", rules_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>
  </div>
</div>