<div class="max-w-2xl mx-auto">
  <!-- Header -->
  <div class="mb-6">
    <%= link_to site_admin_support_tickets_path, class: "inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-2" do %>
      <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
      </svg>
      Back to tickets
    <% end %>
    <h1 class="text-2xl font-bold text-gray-900">Create Support Ticket</h1>
    <p class="text-sm text-gray-500 mt-1">Describe your issue and we'll get back to you as soon as possible</p>
  </div>

  <!-- Form -->
  <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
    <%= form_with model: @ticket, url: site_admin_support_tickets_path, local: true, class: "space-y-6" do |f| %>
      <% if @ticket.errors.any? %>
        <div class="bg-red-50 border border-red-200 rounded-lg p-4">
          <div class="flex">
            <svg class="h-5 w-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <div class="ml-3">
              <h3 class="text-sm font-medium text-red-800">Please fix the following errors:</h3>
              <ul class="mt-2 text-sm text-red-700 list-disc list-inside">
                <% @ticket.errors.full_messages.each do |message| %>
                  <li><%= message %></li>
                <% end %>
              </ul>
            </div>
          </div>
        </div>
      <% end %>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Category -->
        <div>
          <%= f.label :category, class: "block text-sm font-medium text-gray-700 mb-1" %>
          <%= f.select :category,
              options_for_select(
                [["Select a category...", ""]] + Pwb::SupportTicket::CATEGORIES.map { |c| [c.humanize, c] },
                @ticket.category
              ),
              {},
              class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" %>
          <p class="mt-1 text-xs text-gray-500">Help us route your ticket to the right team</p>
        </div>

        <!-- Priority -->
        <div>
          <%= f.label :priority, class: "block text-sm font-medium text-gray-700 mb-1" %>
          <%= f.select :priority,
              options_for_select(
                Pwb::SupportTicket.priorities.keys.map { |p| [p.humanize, p] },
                @ticket.priority || "normal"
              ),
              {},
              class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" %>
          <p class="mt-1 text-xs text-gray-500">
            <span class="text-gray-600">Normal</span> - Standard response time |
            <span class="text-orange-600">High</span> - Business impact |
            <span class="text-red-600">Urgent</span> - Critical issue
          </p>
        </div>
      </div>

      <!-- Subject -->
      <div>
        <%= f.label :subject, class: "block text-sm font-medium text-gray-700 mb-1" %>
        <%= f.text_field :subject,
            class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
            placeholder: "Brief summary of your issue" %>
      </div>

      <!-- Description -->
      <div>
        <%= f.label :description, class: "block text-sm font-medium text-gray-700 mb-1" %>
        <%= f.text_area :description,
            rows: 8,
            class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
            placeholder: "Please describe your issue in detail. Include any error messages, steps to reproduce, or relevant context..." %>
        <p class="mt-1 text-xs text-gray-500">The more detail you provide, the faster we can help</p>
      </div>

      <!-- Submit -->
      <div class="flex items-center gap-3 pt-4 border-t border-gray-200">
        <%= f.submit "Submit Ticket",
            class: "px-6 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors cursor-pointer" %>
        <%= link_to "Cancel", site_admin_support_tickets_path,
            class: "px-4 py-2 text-gray-700 hover:text-gray-900" %>
      </div>
    <% end %>
  </div>
</div>
