{{define "content"}}
<div class="mb-8">
  <a href="/admin/review-queue" class="text-indigo-600 hover:text-indigo-800 text-sm mb-2 inline-flex items-center">
    <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 Queue
  </a>
  <h1 class="text-2xl font-bold text-gray-900">Review: {{.App.Name}}</h1>
  <p class="text-gray-600 mt-1">Version {{.Version.VersionName}} ({{.Version.VersionCode}})</p>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
  <!-- Main Content -->
  <div class="lg:col-span-2 space-y-6">
    <!-- App Info -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">App Information</h2>
      <dl class="grid grid-cols-2 gap-4">
        <div>
          <dt class="text-sm text-gray-600">Package ID</dt>
          <dd class="text-sm font-medium text-gray-900">{{.App.PackageID}}</dd>
        </div>
        <div>
          <dt class="text-sm text-gray-600">Category</dt>
          <dd class="text-sm font-medium text-gray-900">{{if .App.Category}}{{.App.Category}}{{else}}Uncategorized{{end}}</dd>
        </div>
        <div>
          <dt class="text-sm text-gray-600">Developer</dt>
          <dd class="text-sm font-medium text-gray-900">{{.DeveloperName}}</dd>
        </div>
        <div>
          <dt class="text-sm text-gray-600">Developer Email</dt>
          <dd class="text-sm font-medium text-gray-900">{{.DeveloperEmail}}</dd>
        </div>
        <div class="col-span-2">
          <dt class="text-sm text-gray-600">Description</dt>
          <dd class="text-sm text-gray-900">{{if .App.Description}}{{.App.Description}}{{else}}<span class="text-gray-400">No description</span>{{end}}</dd>
        </div>
      </dl>
    </div>

    <!-- Version Info -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">Version Details</h2>
      <dl class="grid grid-cols-2 gap-4">
        <div>
          <dt class="text-sm text-gray-600">Version</dt>
          <dd class="text-sm font-medium text-gray-900">{{.Version.VersionName}}</dd>
        </div>
        <div>
          <dt class="text-sm text-gray-600">Version Code</dt>
          <dd class="text-sm font-medium text-gray-900">{{.Version.VersionCode}}</dd>
        </div>
        <div>
          <dt class="text-sm text-gray-600">Package Size</dt>
          <dd class="text-sm font-medium text-gray-900">{{printf "%.2f" (divFloat .Version.PackageSize 1048576)}} MB</dd>
        </div>
        <div>
          <dt class="text-sm text-gray-600">Submitted</dt>
          <dd class="text-sm font-medium text-gray-900">{{.Version.CreatedAt.Format "Jan 2, 2006 3:04 PM"}}</dd>
        </div>
        <div class="col-span-2">
          <dt class="text-sm text-gray-600">Release Notes</dt>
          <dd class="text-sm text-gray-900">{{if .Version.ReleaseNotes}}{{.Version.ReleaseNotes}}{{else}}<span class="text-gray-400">No release notes</span>{{end}}</dd>
        </div>
        {{if .Version.Permissions}}
        <div class="col-span-2">
          <dt class="text-sm text-gray-600 mb-2">Permissions</dt>
          <dd class="flex flex-wrap gap-2">
            {{range .Version.Permissions}}
            <span class="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded">{{.}}</span>
            {{end}}
          </dd>
        </div>
        {{end}}
      </dl>
    </div>

    <!-- Validation Results -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-semibold text-gray-900">Validation Results</h2>
        <button
          hx-get="/admin/review/{{.Version.ID}}/validate"
          hx-target="#validation-results"
          class="text-sm text-indigo-600 hover:text-indigo-800">
          Re-run Validation
        </button>
      </div>
      <div id="validation-results">
        {{if .Validation}}
          {{if .Validation.Valid}}
          <div class="flex items-center text-green-600 mb-4">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            Package is valid
          </div>
          {{else}}
          <div class="flex items-center text-red-600 mb-4">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            Package validation failed
          </div>
          {{end}}

          {{if .Validation.Flags}}
          <div class="space-y-3">
            {{range .Validation.Flags}}
            <div class="flex items-start p-3 rounded-lg {{if eq .Severity "critical"}}bg-red-50 border border-red-200{{else if eq .Severity "warning"}}bg-yellow-50 border border-yellow-200{{else}}bg-blue-50 border border-blue-200{{end}}">
              <span class="px-2 py-0.5 text-xs font-medium rounded {{if eq .Severity "critical"}}bg-red-100 text-red-800{{else if eq .Severity "warning"}}bg-yellow-100 text-yellow-800{{else}}bg-blue-100 text-blue-800{{end}}">
                {{.Severity}}
              </span>
              <div class="ml-3">
                <p class="text-sm font-medium text-gray-900">{{.Reason}}</p>
                {{if .File}}
                <p class="text-xs text-gray-500 mt-1">{{.File}}{{if .Line}}:{{.Line}}{{end}}</p>
                {{end}}
              </div>
            </div>
            {{end}}
          </div>
          {{else}}
          <p class="text-sm text-gray-500">No issues found.</p>
          {{end}}
        {{else}}
        <p class="text-sm text-gray-500">Validation not yet run. Click "Re-run Validation" to check the package.</p>
        {{end}}
      </div>
    </div>
  </div>

  <!-- Sidebar Actions -->
  <div class="space-y-6">
    <!-- Status -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">Status</h2>
      <div class="flex items-center">
        <span class="w-3 h-3 rounded-full {{if eq .Version.Status "in_review"}}bg-yellow-500{{else if eq .Version.Status "published"}}bg-green-500{{else if eq .Version.Status "rejected"}}bg-red-500{{else}}bg-gray-500{{end}}"></span>
        <span class="ml-2 text-sm font-medium text-gray-900 capitalize">{{.Version.Status}}</span>
      </div>
      {{if .Validation}}
      <div class="mt-4 pt-4 border-t border-gray-200">
        <p class="text-sm text-gray-600">
          {{if .Validation.AutoApprovable}}
          <span class="text-green-600">Auto-approvable</span>
          {{else}}
          <span class="text-yellow-600">Requires manual review</span>
          {{end}}
        </p>
      </div>
      {{end}}
    </div>

    <!-- Actions -->
    {{if eq .Version.Status "in_review"}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">Actions</h2>

      <!-- Approve -->
      <form hx-post="/admin/review/{{.Version.ID}}/approve" hx-swap="none" class="mb-4">
        <label class="block text-sm text-gray-600 mb-2">Approval Notes (optional)</label>
        <textarea name="notes" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm mb-3" placeholder="Any notes for the developer..."></textarea>
        <button type="submit" class="w-full px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition-colors">
          Approve & Publish
        </button>
      </form>

      <!-- Reject -->
      <form hx-post="/admin/review/{{.Version.ID}}/reject" hx-swap="none">
        <label class="block text-sm text-gray-600 mb-2">Rejection Reason *</label>
        <select name="reason" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm mb-3">
          <option value="">Select reason...</option>
          <option value="security">Security Issue</option>
          <option value="quality">Quality Standards</option>
          <option value="content">Content Policy Violation</option>
          <option value="functionality">Functionality Issues</option>
          <option value="metadata">Metadata Issues</option>
          <option value="other">Other</option>
        </select>
        <label class="block text-sm text-gray-600 mb-2">Additional Details</label>
        <textarea name="message" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm mb-3" placeholder="Specific feedback for the developer..."></textarea>
        <button type="submit" class="w-full px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 transition-colors">
          Reject
        </button>
      </form>
    </div>
    {{end}}

    <!-- Download Package -->
    {{if .Version.PackageURL}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">Package</h2>
      <a href="/downloads/{{.Version.PackageURL}}" class="inline-flex items-center text-sm text-indigo-600 hover:text-indigo-800">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
        </svg>
        Download Package
      </a>
    </div>
    {{end}}
  </div>
</div>
{{end}}