@extends('layouts.dashboard')
@section('title', 'Tickets · '.$guild->name.' · TacForce Pro')

@php
  $unlimited = $maxCategories >= PHP_INT_MAX;
@endphp

@section('content')
<div
  x-data="{
    editing: null,
    form: { name:'', description:'', emoji:'', staff_role_id:'', parent_channel_id:'', log_channel_id:'', is_enabled:true },
    open(cat) {
      this.editing = cat.id;
      this.form = {
        name: cat.name ?? '', description: cat.description ?? '', emoji: cat.emoji ?? '',
        staff_role_id: cat.staff_role_id ?? '', parent_channel_id: cat.parent_channel_id ?? '',
        log_channel_id: cat.log_channel_id ?? '', is_enabled: !!cat.is_enabled
      };
      this.$refs.formCard.scrollIntoView({ behavior:'smooth', block:'center' });
    },
    reset() {
      this.editing = null;
      this.form = { name:'', description:'', emoji:'', staff_role_id:'', parent_channel_id:'', log_channel_id:'', is_enabled:true };
    }
  }"
  @if ($errors->any()) x-init="$refs.formCard.scrollIntoView({ block:'center' })" @endif
>

  <div class="mb-6 flex flex-wrap items-end justify-between gap-4">
    <div>
      <h1 class="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-white">Tickets</h1>
      <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
        Ticket-Kategorien verwalten.
        <span class="text-zinc-400 dark:text-zinc-500">
          {{ $categories->count() }} / {{ $unlimited ? '∞' : $maxCategories }} genutzt
        </span>
      </p>
    </div>
    <button type="button" @click="reset()" x-show="editing !== null"
      class="inline-flex items-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:bg-zinc-100 dark:hover:bg-zinc-800 px-4 py-2.5 text-sm font-medium text-zinc-700 dark:text-zinc-200 transition">
      <x-icon name="plus" class="h-4 w-4" /> Neue Kategorie
    </button>
  </div>

  @if ($atLimit)
    <div class="mb-6 flex items-start gap-3 rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-300">
      <x-icon name="alert" class="mt-0.5 h-4 w-4 shrink-0" />
      <span>Du hast das Kategorie-Limit deines Plans ({{ $maxCategories }}) erreicht. <a href="{{ route('dashboard.billing', $guild) }}" class="underline font-medium">Plan upgraden</a>, um weitere Kategorien anzulegen.</span>
    </div>
  @endif

  <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">

    {{-- LIST --}}
    <div class="xl:col-span-2">
      <section class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
        <div class="border-b border-zinc-200 dark:border-zinc-800 px-5 py-4">
          <h2 class="text-[15px] font-semibold text-zinc-900 dark:text-white">Kategorien</h2>
        </div>

        @if ($categories->isEmpty())
          <div class="px-5 py-12 text-center">
            <div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-400 dark:text-zinc-500"><x-icon name="ticket" class="h-5 w-5" /></div>
            <p class="mt-3 text-sm text-zinc-500 dark:text-zinc-400">Noch keine Kategorien. Lege rechts die erste an.</p>
          </div>
        @else
          <div class="overflow-x-auto">
            <table class="w-full min-w-[520px] text-left text-sm">
              <thead>
                <tr class="border-b border-zinc-200 dark:border-zinc-800 text-[11px] uppercase tracking-[0.06em] text-zinc-400 dark:text-zinc-500">
                  <th class="px-5 py-2.5 font-medium">Name</th>
                  <th class="px-5 py-2.5 font-medium">Status</th>
                  <th class="px-5 py-2.5 text-right font-medium">Aktionen</th>
                </tr>
              </thead>
              <tbody class="text-[13.5px]">
                @foreach ($categories as $cat)
                  <tr class="border-t border-zinc-100 dark:border-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-800/40 transition">
                    <td class="px-5 py-3.5">
                      <div class="flex items-center gap-2.5">
                        <span class="text-base">{{ $cat->emoji ?: '🎫' }}</span>
                        <div class="min-w-0">
                          <p class="font-medium text-zinc-900 dark:text-white">{{ $cat->name }}</p>
                          @if ($cat->description)<p class="truncate text-[12px] text-zinc-500 dark:text-zinc-400">{{ $cat->description }}</p>@endif
                        </div>
                      </div>
                    </td>
                    <td class="px-5 py-3.5">
                      @if ($cat->is_enabled)
                        <span class="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 px-2.5 py-0.5 text-xs font-medium text-emerald-600 dark:text-emerald-400 ring-1 ring-emerald-500/20">Aktiv</span>
                      @else
                        <span class="inline-flex items-center gap-1 rounded-full bg-zinc-500/10 px-2.5 py-0.5 text-xs font-medium text-zinc-500 ring-1 ring-zinc-500/20">Inaktiv</span>
                      @endif
                    </td>
                    <td class="px-5 py-3.5">
                      <div class="flex items-center justify-end gap-1.5">
                        {{-- Send panel --}}
                        <form method="POST" action="{{ route('dashboard.tickets.panel', [$guild, $cat]) }}">
                          @csrf
                          <button type="submit" title="Panel senden" class="flex h-8 w-8 items-center justify-center rounded-md text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-blue-600 dark:hover:text-blue-400 transition">
                            <x-icon name="send" class="h-4 w-4" stroke="1.7" />
                          </button>
                        </form>
                        {{-- Edit --}}
                        <button type="button" title="Bearbeiten" @click='open(@json($cat))' class="flex h-8 w-8 items-center justify-center rounded-md text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-white transition">
                          <x-icon name="pencil" class="h-4 w-4" stroke="1.7" />
                        </button>
                        {{-- Delete (confirm) --}}
                        <div x-data="{ confirm: false }" class="relative">
                          <button type="button" title="Löschen" @click="confirm = true" class="flex h-8 w-8 items-center justify-center rounded-md text-zinc-500 dark:text-zinc-400 hover:bg-red-500/10 hover:text-red-600 dark:hover:text-red-400 transition">
                            <x-icon name="trash" class="h-4 w-4" stroke="1.7" />
                          </button>
                          <div x-show="confirm" x-cloak @click.outside="confirm = false" x-transition
                            class="absolute right-0 top-full z-30 mt-2 w-64 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-3 text-left shadow-lg">
                            <p class="text-[13px] font-medium text-zinc-900 dark:text-white">Kategorie „{{ $cat->name }}" löschen?</p>
                            <p class="mt-1 text-[12px] text-zinc-500 dark:text-zinc-400">Dies kann nicht rückgängig gemacht werden.</p>
                            <div class="mt-3 flex justify-end gap-2">
                              <button type="button" @click="confirm = false" class="rounded-md border border-zinc-200 dark:border-zinc-800 px-2.5 py-1.5 text-[12px] font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800">Abbrechen</button>
                              <form method="POST" action="{{ route('dashboard.tickets.destroy', [$guild, $cat]) }}">
                                @csrf @method('DELETE')
                                <button type="submit" class="rounded-md bg-red-600 hover:bg-red-500 px-2.5 py-1.5 text-[12px] font-medium text-white">Löschen</button>
                              </form>
                            </div>
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        @endif
      </section>
    </div>

    {{-- CREATE / EDIT FORM --}}
    <div class="xl:col-span-1" x-ref="formCard">
      <form x-ref="theForm" method="POST"
        :action="editing ? '{{ route('dashboard.tickets', $guild) }}/' + editing : '{{ route('dashboard.tickets.store', $guild) }}'"
        x-data="{ submitting: false }" @submit="submitting = true"
        class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
        @csrf
        <template x-if="editing"><input type="hidden" name="_method" value="PUT"></template>

        <div class="border-b border-zinc-200 dark:border-zinc-800 px-5 py-4">
          <h2 class="text-[15px] font-semibold text-zinc-900 dark:text-white" x-text="editing ? 'Kategorie bearbeiten' : 'Neue Kategorie'"></h2>
        </div>

        <div class="space-y-4 p-5">
          <div>
            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Name</label>
            <input name="name" type="text" x-model="form.name" required maxlength="100" placeholder="z. B. Support"
              class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error('name') border-red-500 @enderror">
            @error('name') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
          </div>

          <div class="grid grid-cols-3 gap-3">
            <div class="col-span-2">
              <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Beschreibung</label>
              <input name="description" type="text" x-model="form.description" maxlength="255" placeholder="Kurzbeschreibung"
                class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error('description') border-red-500 @enderror">
              @error('description') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
            </div>
            <div>
              <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Emoji</label>
              <input name="emoji" type="text" x-model="form.emoji" maxlength="16" placeholder="🎫"
                class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm text-center placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none">
            </div>
          </div>

          <div>
            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Team-Rollen-ID</label>
            <input name="staff_role_id" type="text" inputmode="numeric" x-model="form.staff_role_id" placeholder="Rolle des zuständigen Teams"
              class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error('staff_role_id') border-red-500 @enderror">
            @error('staff_role_id') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
          </div>

          <div>
            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Kategorie-Channel-ID</label>
            <input name="parent_channel_id" type="text" inputmode="numeric" x-model="form.parent_channel_id" placeholder="Discord-Kategorie für Tickets"
              class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error('parent_channel_id') border-red-500 @enderror">
            @error('parent_channel_id') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
          </div>

          <div>
            <label class="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1.5">Log-Channel-ID</label>
            <input name="log_channel_id" type="text" inputmode="numeric" x-model="form.log_channel_id" placeholder="optional"
              class="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-3 py-2 text-sm placeholder:text-zinc-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 outline-none @error('log_channel_id') border-red-500 @enderror">
            @error('log_channel_id') <p class="mt-1.5 text-xs text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
          </div>

          <div class="flex items-center justify-between rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 px-3 py-2.5">
            <span class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Aktiv</span>
            <input type="hidden" name="is_enabled" :value="form.is_enabled ? 1 : 0">
            <button type="button" @click="form.is_enabled = !form.is_enabled" role="switch" :aria-checked="form.is_enabled ? 'true' : 'false'"
              :class="form.is_enabled ? 'bg-blue-600' : 'bg-zinc-300 dark:bg-zinc-700'"
              class="relative h-6 w-11 shrink-0 rounded-full transition">
              <span :class="form.is_enabled ? 'translate-x-5' : 'translate-x-0.5'" class="absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition"></span>
            </button>
          </div>
        </div>

        <div class="flex items-center justify-end gap-2 border-t border-zinc-200 dark:border-zinc-800 px-5 py-4">
          <button type="button" x-show="editing !== null" @click="reset()" class="rounded-lg border border-zinc-200 dark:border-zinc-800 px-3 py-2.5 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition">Abbrechen</button>
          <button type="submit" :disabled="submitting || {{ $atLimit ? 'true' : 'false' }} && editing === null"
            class="inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 px-4 py-2.5 text-sm font-medium text-white transition disabled:opacity-60 disabled:cursor-not-allowed">
            <span x-show="!submitting" x-text="editing ? 'Speichern' : 'Erstellen'"></span>
            <span x-show="submitting" x-cloak>Speichere…</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection