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

@php
  // Status badge recipes (mockup 04 + light-mode variants).
  $statusBadge = function (?string $status) {
      return match ($status) {
          'open' => ['Offen', 'border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400'],
          'in_progress' => ['In Bearbeitung', 'border-amber-500/25 bg-amber-500/10 text-amber-600 dark:text-amber-400'],
          'closed' => ['Geschlossen', 'border-zinc-300 dark:border-zinc-700 bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400'],
          default => ['Unbekannt', 'border-zinc-300 dark:border-zinc-700 bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400'],
      };
  };

  // Which module icon + accent to show in the activity feed per audit-log type.
  $activityStyle = function (string $type) {
      return match (true) {
          str_contains($type, 'ticket_created') => ['plus', 'text-zinc-500 dark:text-zinc-400'],
          str_contains($type, 'ticket_closed') => ['x', 'text-zinc-400 dark:text-zinc-500'],
          str_contains($type, 'accepted') => ['check', 'text-emerald-600 dark:text-emerald-400'],
          str_contains($type, 'rejected') => ['x', 'text-red-600 dark:text-red-400'],
          str_contains($type, 'member_join') => ['user-plus', 'text-zinc-500 dark:text-zinc-400'],
          str_contains($type, 'member_leave') => ['users', 'text-zinc-400 dark:text-zinc-500'],
          str_contains($type, 'message_delete') => ['trash', 'text-zinc-500 dark:text-zinc-400'],
          str_contains($type, 'warn') => ['alert', 'text-amber-600 dark:text-amber-400'],
          default => ['list', 'text-zinc-500 dark:text-zinc-400'],
      };
  };

  $moduleMeta = [
      'tickets'      => ['Tickets', 'ticket'],
      'applications' => ['Bewerbungen', 'file-text'],
      'welcome'      => ['Welcome', 'message'],
      'logs'         => ['Logs', 'list'],
  ];
  $soonMeta = [
      'guard'   => ['Guard', 'shield'],
      'level'   => ['Level', 'star'],
      'partner' => ['Partner', 'link'],
  ];
  $activeCount = collect($moduleMeta)->keys()->filter(fn ($k) => data_get($modules, $k, false))->count();
@endphp

@section('content')

  {{-- HEADING --}}
  <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">Übersicht</h1>
      <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">Willkommen zurück — hier ist der Status deines Servers.</p>
    </div>
    <a href="{{ route('dashboard.tickets', $guild) }}"
      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 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500">
      <x-icon name="send" class="h-4 w-4" stroke="1.9" /> Panel senden
    </a>
  </div>

  {{-- STAT CARDS --}}
  <section class="mb-6 grid grid-cols-2 gap-4 xl:grid-cols-4">
    {{-- Offene Tickets --}}
    <div class="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-center justify-between">
        <p class="text-[13px] font-medium text-zinc-500 dark:text-zinc-400">Offene Tickets</p>
        <x-icon name="ticket" class="h-[17px] w-[17px] text-zinc-400 dark:text-zinc-500" stroke="1.6" />
      </div>
      <p class="mt-3 text-3xl font-semibold leading-none tracking-tight text-blue-600 dark:text-blue-400">{{ number_format($openTickets, 0, ',', '.') }}</p>
      <p class="mt-2 flex items-center gap-1 text-[12.5px] text-zinc-500 dark:text-zinc-400">
        @if ($ticketsToday > 0)
          <x-icon name="arrow-up" class="h-[13px] w-[13px] text-emerald-500" stroke="2.2" /> +{{ $ticketsToday }} heute
        @else
          Keine neuen heute
        @endif
      </p>
    </div>

    {{-- Bewerbungen --}}
    <div class="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-center justify-between">
        <p class="text-[13px] font-medium text-zinc-500 dark:text-zinc-400">Bewerbungen</p>
        <x-icon name="file-text" class="h-[17px] w-[17px] text-zinc-400 dark:text-zinc-500" stroke="1.6" />
      </div>
      <p class="mt-3 text-3xl font-semibold leading-none tracking-tight text-zinc-900 dark:text-white">{{ number_format($applications, 0, ',', '.') }}</p>
      <p class="mt-2 text-[12.5px] text-zinc-500 dark:text-zinc-400">{{ $openApplications }} offen</p>
    </div>

    {{-- Mitglieder --}}
    <div class="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-center justify-between">
        <p class="text-[13px] font-medium text-zinc-500 dark:text-zinc-400">Mitglieder</p>
        <x-icon name="users" class="h-[17px] w-[17px] text-zinc-400 dark:text-zinc-500" stroke="1.6" />
      </div>
      <p class="mt-3 text-3xl font-semibold leading-none tracking-tight text-zinc-900 dark:text-white">{{ $memberCount !== null ? number_format($memberCount, 0, ',', '.') : '—' }}</p>
      <p class="mt-2 flex items-center gap-1 text-[12.5px] text-zinc-500 dark:text-zinc-400">
        @if ($memberCount !== null)
          <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span> Live vom Discord-Server
        @else
          <span class="h-1.5 w-1.5 rounded-full bg-amber-500"></span> Bald – wird beim Scan synchronisiert
        @endif
      </p>
    </div>

    {{-- Plan --}}
    <div class="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-center justify-between">
        <p class="text-[13px] font-medium text-zinc-500 dark:text-zinc-400">Plan</p>
        <x-icon name="star" class="h-[17px] w-[17px] text-zinc-400 dark:text-zinc-500" stroke="1.6" />
      </div>
      <p class="mt-3 text-3xl font-semibold uppercase leading-none tracking-tight text-zinc-900 dark:text-white">{{ $guild->plan }}</p>
      <a href="{{ route('dashboard.billing', $guild) }}" class="mt-2 inline-flex items-center gap-1 text-[12.5px] font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 transition">verwalten →</a>
    </div>
  </section>

  {{-- MODULES — echte Schalter, speichern per Button --}}
  <form method="POST" action="{{ route('dashboard.settings.modules', $guild) }}"
        x-data="{ submitting: false }" @submit="submitting = true"
        class="mb-6 overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
    @csrf
    @method('PUT')
    <div class="flex items-center justify-between gap-3 border-b border-zinc-200 dark:border-zinc-800 px-5 py-4">
      <div>
        <h2 class="text-[15px] font-semibold text-zinc-900 dark:text-white">Module</h2>
        <p class="mt-0.5 text-[12.5px] text-zinc-500 dark:text-zinc-400">Funktionen an-/ausschalten, dann <strong>Speichern</strong>.</p>
      </div>
      <div class="flex items-center gap-3">
        <span class="hidden sm:inline text-[12px] text-zinc-400 dark:text-zinc-500">{{ $activeCount }} aktiv · 3 bald</span>
        <button type="submit" :disabled="submitting"
          class="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 hover:bg-blue-500 px-3.5 py-2 text-[13px] font-medium text-white transition disabled:opacity-60 disabled:cursor-not-allowed">
          <span x-show="!submitting">Speichern</span><span x-show="submitting" x-cloak>Speichere…</span>
        </button>
      </div>
    </div>
    <div class="grid grid-cols-2 gap-px bg-zinc-200 dark:bg-zinc-800 md:grid-cols-4">
      @foreach ($moduleMeta as $key => [$label, $ic])
        @php $on = (bool) old("modules.$key", data_get($modules, $key, false)); @endphp
        <div class="flex items-center justify-between bg-white dark:bg-zinc-900 px-4 py-4" x-data="{ on: {{ $on ? 'true' : 'false' }} }">
          <div class="flex items-center gap-2.5">
            <x-icon :name="$ic" class="h-[17px] w-[17px] text-zinc-500 dark:text-zinc-400" stroke="1.6" />
            <span class="text-[13.5px] font-medium text-zinc-900 dark:text-white">{{ $label }}</span>
          </div>
          <input type="hidden" name="modules[{{ $key }}]" :value="on ? 1 : 0">
          <button type="button" @click="on = !on" role="switch" :aria-checked="on ? 'true' : 'false'" aria-label="{{ $label }}"
            :class="on ? 'bg-blue-600' : 'bg-zinc-300 dark:bg-zinc-700'"
            class="relative h-5 w-9 shrink-0 rounded-full transition">
            <span class="absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white shadow transition" :style="on ? 'transform: translateX(1rem)' : 'transform: translateX(0)'"></span>
          </button>
        </div>
      @endforeach

      @foreach ($soonMeta as $key => [$label, $ic])
        <div class="flex items-center justify-between bg-white dark:bg-zinc-900 px-4 py-4 opacity-55" title="Bald verfügbar">
          <div class="flex items-center gap-2.5">
            <x-icon :name="$ic" class="h-[17px] w-[17px] text-zinc-400 dark:text-zinc-500" stroke="1.6" />
            <span class="text-[13.5px] font-medium text-zinc-500 dark:text-zinc-400">{{ $label }}</span>
          </div>
          <span class="rounded border border-zinc-200 dark:border-zinc-700 px-1.5 py-0.5 text-[10px] font-medium text-zinc-400 dark:text-zinc-500">Bald</span>
        </div>
      @endforeach
    </div>
  </form>

  {{-- MAIN GRID --}}
  <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">

    {{-- LEFT: table + chart --}}
    <div class="flex flex-col gap-6 xl:col-span-2">

      {{-- LETZTE TICKETS --}}
      <section class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
        <div class="flex items-center justify-between 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">Letzte Tickets</h2>
          <a href="{{ route('dashboard.tickets', $guild) }}" class="text-[13px] font-medium text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition">Alle ansehen →</a>
        </div>

        @if ($recentTickets->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 Tickets vorhanden.</p>
          </div>
        @else
          <div class="overflow-x-auto">
            <table class="w-full min-w-[560px] 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">Ticket</th>
                  <th class="px-5 py-2.5 font-medium">Kategorie</th>
                  <th class="px-5 py-2.5 font-medium">Ersteller</th>
                  <th class="px-5 py-2.5 font-medium">Status</th>
                  <th class="px-5 py-2.5 text-right font-medium">Zeit</th>
                </tr>
              </thead>
              <tbody class="text-[13.5px]">
                @foreach ($recentTickets as $ticket)
                  @php [$badgeLabel, $badgeClass] = $statusBadge($ticket->status); @endphp
                  <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 font-medium text-zinc-900 dark:text-white">#TF-{{ $ticket->number }}</td>
                    <td class="px-5 py-3.5 text-zinc-500 dark:text-zinc-400">{{ $ticket->category->name ?? '—' }}</td>
                    <td class="px-5 py-3.5">
                      <span class="flex items-center gap-2">
                        <span class="flex h-6 w-6 items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800 text-[10px] font-semibold text-zinc-500 dark:text-zinc-400">{{ strtoupper(mb_substr($ticket->creator_discord_id, -2)) }}</span>
                        <span class="text-zinc-900 dark:text-white">{{ $ticket->creator_discord_id }}</span>
                      </span>
                    </td>
                    <td class="px-5 py-3.5"><span class="inline-flex rounded-md border px-2 py-0.5 text-[11px] font-medium {{ $badgeClass }}">{{ $badgeLabel }}</span></td>
                    <td class="px-5 py-3.5 text-right text-zinc-400 dark:text-zinc-500">{{ $ticket->created_at?->diffForHumans() }}</td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        @endif
      </section>

      {{-- CHART --}}
      <section class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-5">
        <div class="mb-6 flex items-end justify-between">
          <div>
            <h2 class="text-[15px] font-semibold text-zinc-900 dark:text-white">Tickets diese Woche</h2>
            <p class="mt-1 text-[13px] text-zinc-500 dark:text-zinc-400">Gesamt {{ $chart['total'] }} · Ø {{ $chart['avg'] }} pro Tag</p>
          </div>
        </div>
        <div class="flex h-40 items-end justify-between gap-3">
          @foreach ($chart['days'] as $day)
            <div class="group flex flex-1 flex-col items-center gap-2">
              <div class="flex w-full items-end justify-center" style="height:128px" title="{{ $day['count'] }} Tickets">
                <div class="w-full max-w-[36px] rounded-t-sm transition {{ $day['today'] ? 'bg-blue-600' : 'bg-zinc-200 dark:bg-zinc-700 group-hover:bg-blue-600' }}" style="height:{{ max($day['pct'], 4) }}%"></div>
              </div>
              <span class="text-[12px] {{ $day['today'] ? 'font-medium text-zinc-600 dark:text-zinc-300' : 'text-zinc-400 dark:text-zinc-500' }}">{{ $day['label'] }}</span>
            </div>
          @endforeach
        </div>
      </section>
    </div>

    {{-- RIGHT: activity --}}
    <section class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 xl:col-span-1">
      <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">Aktivität</h2>
      </div>

      @if ($activity->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="list" class="h-5 w-5" /></div>
          <p class="mt-3 text-sm text-zinc-500 dark:text-zinc-400">Noch keine Aktivität.</p>
        </div>
      @else
        <ol class="px-5 py-4">
          @foreach ($activity as $entry)
            @php [$ic, $tone] = $activityStyle($entry->type); @endphp
            <li class="relative flex gap-3 {{ $loop->last ? '' : 'pb-5' }}">
              <div class="flex flex-col items-center">
                <span class="flex h-7 w-7 items-center justify-center rounded-full border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800/60 {{ $tone }}">
                  <x-icon :name="$ic" class="h-[13px] w-[13px]" stroke="1.9" />
                </span>
                @unless ($loop->last)
                  <span class="mt-1 w-px flex-1 bg-zinc-200 dark:bg-zinc-800"></span>
                @endunless
              </div>
              <div class="pt-0.5">
                <p class="text-[13.5px] text-zinc-900 dark:text-white">{{ $entry->message }}</p>
                <p class="mt-0.5 text-[12px] text-zinc-400 dark:text-zinc-500">{{ $entry->created_at?->diffForHumans() }}</p>
              </div>
            </li>
          @endforeach
        </ol>
      @endif
    </section>
  </div>
@endsection