<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900">Entry Request Details</h1>
  </div>

  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <div class="border-b border-gray-200 px-6 py-4 bg-gray-50">
      <div class="flex items-center justify-between">
        <h2 class="text-xl font-bold text-gray-900">Entry Information</h2>
        <%= content_tag(:span, @entry.status.titleize, class: "px-3 py-1 text-sm font-semibold rounded-full #{@entry.requested? ? 'bg-yellow-100 text-yellow-800' : 'bg-blue-100 text-blue-800'}") %>
      </div>
    </div>

    <div class="px-6 py-6 space-y-6">
      <div>
        <h3 class="text-sm font-semibold text-gray-700 mb-2">Category</h3>
        <span class="px-3 py-1 text-sm font-semibold rounded-full bg-indigo-100 text-indigo-800">
          <%= @entry.category.humanize %>
        </span>
      </div>

      <div class="border-t border-gray-200 pt-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Translations</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="bg-gray-50 rounded-lg p-4">
            <div class="text-sm font-medium text-gray-700 mb-1">🇫🇮 Finnish</div>
            <div class="text-gray-900"><%= @entry.fi.presence || "—" %></div>
          </div>

          <div class="bg-gray-50 rounded-lg p-4">
            <div class="text-sm font-medium text-gray-700 mb-1">🇬🇧 English</div>
            <div class="text-gray-900"><%= @entry.en.presence || "—" %></div>
          </div>

          <div class="bg-gray-50 rounded-lg p-4">
            <div class="text-sm font-medium text-gray-700 mb-1">🇸🇪 Swedish</div>
            <div class="text-gray-900"><%= @entry.sv.presence || "—" %></div>
          </div>

          <div class="bg-gray-50 rounded-lg p-4">
            <div class="text-sm font-medium text-gray-700 mb-1">🇳🇴 Norwegian</div>
            <div class="text-gray-900"><%= @entry.no.presence || "—" %></div>
          </div>

          <div class="bg-gray-50 rounded-lg p-4">
            <div class="text-sm font-medium text-gray-700 mb-1">🇷🇺 Russian</div>
            <div class="text-gray-900"><%= @entry.ru.presence || "—" %></div>
          </div>

          <div class="bg-gray-50 rounded-lg p-4">
            <div class="text-sm font-medium text-gray-700 mb-1">🇩🇪 German</div>
            <div class="text-gray-900"><%= @entry.de.presence || "—" %></div>
          </div>
        </div>
      </div>

      <% if @entry.notes.present? %>
        <div class="border-t border-gray-200 pt-6">
          <h3 class="text-sm font-semibold text-gray-700 mb-2">Notes</h3>
          <div class="bg-gray-50 rounded-lg p-4 text-gray-900 whitespace-pre-wrap">
            <%= @entry.notes %>
          </div>
        </div>
      <% end %>

      <div class="border-t border-gray-200 pt-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Requester Information</h3>
        <div class="bg-gray-50 rounded-lg p-4 space-y-2">
          <div>
            <span class="text-sm font-medium text-gray-700">Name:</span>
            <span class="text-gray-900 ml-2"><%= @entry.requested_by&.name %></span>
          </div>
          <div>
            <span class="text-sm font-medium text-gray-700">Email:</span>
            <span class="text-gray-900 ml-2"><%= @entry.requested_by&.email %></span>
          </div>
          <div>
            <span class="text-sm font-medium text-gray-700">Submitted:</span>
            <span class="text-gray-900 ml-2"><%= @entry.created_at.strftime("%B %d, %Y at %I:%M %p") %></span>
          </div>
        </div>
      </div>
    </div>

    <div class="border-t border-gray-200 px-6 py-4 bg-gray-50 flex flex-wrap gap-3">
      <%= link_to "← Back to Requests", admin_requests_path, class: "px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold rounded-lg transition" %>

      <% if @entry.requested? %>
        <%= link_to "Edit", edit_admin_request_path(@entry), class: "px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition" %>
        <%= button_to "Approve & Send Invitation", approve_admin_request_path(@entry), method: :post, class: "px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition", form: { data: { turbo_confirm: "Send invitation to #{@entry.requested_by&.email}?" } } %>
      <% end %>

      <%= button_to "Reject", reject_admin_request_path(@entry), method: :delete, class: "px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition ml-auto", form: { data: { turbo_confirm: "Are you sure you want to delete this request?" } } %>
    </div>
  </div>
</div>
