<% content_for :title, "Send Invitation" %>

<div class="space-y-6">
  <div>
    <%= link_to "← Back to Invitations", admin_invitations_path, class: "text-sm font-medium text-blue-600 hover:text-blue-500" %>
  </div>

  <div>
    <h2 class="text-3xl font-bold text-gray-900">Send Invitation</h2>
    <p class="mt-1 text-sm text-gray-600">Invite a new user to join Sanasto Wiki</p>
  </div>

  <div class="bg-white shadow rounded-lg">
    <div class="px-4 py-5 sm:p-6">
      <%= form_with model: @invitation, url: admin_invitations_path, class: "space-y-6" do |f| %>
        <% if @invitation.errors.any? %>
          <div class="rounded-md bg-red-50 p-4">
            <div class="flex">
              <div class="ml-3">
                <h3 class="text-sm font-medium text-red-800">
                  <%= pluralize(@invitation.errors.count, "error") %> prohibited this invitation from being sent:
                </h3>
                <div class="mt-2 text-sm text-red-700">
                  <ul class="list-disc pl-5 space-y-1">
                    <% @invitation.errors.full_messages.each do |message| %>
                      <li><%= message %></li>
                    <% end %>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        <% end %>

        <div>
          <%= f.label :email, class: "block text-sm font-medium text-gray-700" %>
          <%= f.email_field :email, required: true, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm", placeholder: "user@example.com" %>
          <p class="mt-2 text-sm text-gray-500">The user will receive an invitation email with a link to register.</p>
        </div>

        <div>
          <%= f.label :name, "Name (optional)", class: "block text-sm font-medium text-gray-700" %>
          <%= f.text_field :name, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm", placeholder: "John Doe" %>
        </div>

        <div>
          <%= f.label :role, class: "block text-sm font-medium text-gray-700" %>
          <%= f.select :role, User.roles.keys.map { |r| [r.humanize, r] }, {}, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
          <p class="mt-2 text-sm text-gray-500">
            <strong>Contributor:</strong> Can create/edit entries and comments.<br>
            <strong>Reviewer:</strong> Can review suggestions and verify entries.<br>
            <strong>Admin:</strong> Full access to all features.
          </p>
        </div>

        <div>
          <%= f.label :primary_language, "Primary Language (optional)", class: "block text-sm font-medium text-gray-700" %>
          <%= f.select :primary_language, SupportedLanguage.pluck(:code, :native_name), { include_blank: "Select language" }, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
        </div>

        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
          <div class="flex">
            <div class="ml-3">
              <p class="text-sm text-yellow-700">
                <strong>Note:</strong> The invitation link will expire in 14 days. The user will need to accept the invitation before the expiration date.
              </p>
            </div>
          </div>
        </div>

        <div class="flex items-center justify-end space-x-4">
          <%= link_to "Cancel", admin_invitations_path, class: "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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
          <%= f.submit "Send Invitation", class: "inline-flex justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
        </div>
      <% end %>
    </div>
  </div>
</div>
