@extends('layouts.dashboard')
@section('title', 'Serverauswahl · TacForce Pro')

@section('content')
  <div class="mb-6">
    <h1 class="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-white">Deine Server</h1>
    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">Wähle einen Server, um ihn mit TacForce Pro zu verwalten.</p>
  </div>

  @if ($guilds->isEmpty())
    {{-- Empty state --}}
    <div class="rounded-xl border border-dashed border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 px-6 py-16 text-center">
      <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-400 dark:text-zinc-500">
        <x-icon name="server" class="h-6 w-6" />
      </div>
      <h2 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">Keine verwaltbaren Server gefunden</h2>
      <p class="mx-auto mt-1.5 max-w-md text-sm text-zinc-500 dark:text-zinc-400">
        Du benötigst die Berechtigung „Server verwalten" auf einem Discord-Server. Melde dich erneut an, nachdem du die Rechte erhalten hast, oder füge den Bot zu deinem Server hinzu.
      </p>
      <a href="https://discord.com/oauth2/authorize?client_id={{ config('services.discord.client_id') }}&scope=bot%20applications.commands&permissions=8"
        target="_blank" rel="noopener"
        class="mt-6 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">
        <x-icon name="plus" class="h-4 w-4" /> Bot hinzufügen
      </a>
    </div>
  @else
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
      @foreach ($guilds as $g)
        <div class="group flex flex-col rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-5 transition hover:border-zinc-300 dark:hover:border-zinc-700">
          <div class="flex items-start gap-3">
            @if ($g->icon_url)
              <img src="{{ $g->icon_url }}" alt="" class="h-12 w-12 rounded-xl object-cover">
            @else
              <span class="flex h-12 w-12 items-center justify-center rounded-xl bg-zinc-100 dark:bg-zinc-800 text-lg font-semibold text-zinc-600 dark:text-zinc-300">{{ strtoupper(mb_substr($g->name, 0, 1)) }}</span>
            @endif
            <div class="min-w-0 flex-1">
              <p class="truncate text-[15px] font-semibold text-zinc-900 dark:text-white">{{ $g->name }}</p>
              <span class="mt-1 inline-flex items-center rounded-md border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">{{ $g->plan }}</span>
            </div>
          </div>

          <div class="mt-4 flex items-center gap-2 text-[13px]">
            @if ($g->bot_joined)
              <span class="flex items-center gap-1.5 text-emerald-600 dark:text-emerald-400">
                <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span> Bot Online
              </span>
            @else
              <span class="flex items-center gap-1.5 text-zinc-400 dark:text-zinc-500">
                <span class="h-1.5 w-1.5 rounded-full bg-zinc-400 dark:bg-zinc-600"></span> Bot nicht hinzugefügt
              </span>
            @endif
          </div>

          <div class="mt-5">
            @if ($g->bot_joined)
              <a href="{{ route('dashboard.overview', $g) }}"
                class="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 px-4 py-2.5 text-sm font-medium text-white transition">
                Verwalten
              </a>
            @else
              <a href="https://discord.com/oauth2/authorize?client_id={{ config('services.discord.client_id') }}&scope=bot%20applications.commands&permissions=8&guild_id={{ $g->discord_guild_id }}"
                target="_blank" rel="noopener"
                class="flex w-full items-center justify-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" /> Bot hinzufügen
              </a>
            @endif
          </div>
        </div>
      @endforeach
    </div>
  @endif
@endsection