<% content_for :title, "Request a New Entry" %>

<div class="min-h-screen flex flex-col">
  <%= render "shared/header", show_request_button: false %>

  <%= render "shared/notifications" %>

  <div class="flex-1 bg-gradient-to-br from-indigo-50 via-white to-purple-50 flex items-center justify-center px-4 py-12">
    <div class="max-w-2xl w-full">
      <div class="bg-white rounded-2xl shadow-xl p-8">
        <div class="text-center mb-8">
          <h1 class="text-3xl font-bold text-gray-900 mb-2">Request a New Entry</h1>
          <p class="text-gray-600">Is there a word you would like to see in this glossary?</p>
        </div>


      <% if @pending_count && @pending_count > 0 %>
        <div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg text-blue-800">
          You have <%= @pending_count %> pending <%= "request".pluralize(@pending_count) %> being reviewed.
        </div>
      <% end %>

      <%= form_with model: @entry, url: requests_path, class: "space-y-6", data: { turbo: false } do |f| %>
        <% if @entry.errors.any? %>
          <div class="p-4 bg-red-50 border border-red-200 rounded-lg">
            <h3 class="font-semibold text-red-800 mb-2">Please fix the following errors:</h3>
            <ul class="list-disc list-inside text-red-700 text-sm space-y-1">
              <% @entry.errors.full_messages.each do |message| %>
                <li><%= message %></li>
              <% end %>
            </ul>
          </div>
        <% end %>

        <div class="space-y-4">
          <% if current_user %>
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
              <p class="text-sm text-blue-900">
                <span class="font-semibold">Submitting as:</span> <%= current_user.name %> (<%= current_user.email %>)
              </p>
            </div>
          <% else %>
            <div>
              <%= f.label :name, "Your Name", class: "block text-sm font-semibold text-gray-700 mb-2" %>
              <%= f.text_field :name, required: true, class: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition" %>
            </div>

            <div>
              <%= f.label :email, "Your Email", class: "block text-sm font-semibold text-gray-700 mb-2" %>
              <%= f.email_field :email, required: true, class: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition" %>
            </div>
          <% end %>
        </div>

        <%= render 'entries/form_fields', f: f %>

        <div class="flex flex-col sm:flex-row gap-4 pt-4">
          <%= f.submit "Submit Request", class: "flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-6 rounded-lg transition shadow-md hover:shadow-lg" %>
          <%= link_to "Cancel", root_path, class: "flex-1 text-center bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-3 px-6 rounded-lg transition" %>
        </div>
      <% end %>

        <% unless current_user %>
          <div class="mt-6 text-center text-sm text-gray-600">
            Already have an account? <%= link_to "Sign in", login_path, class: "text-indigo-600 hover:text-indigo-800 font-semibold" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>
