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

@php
  // Icon + Farbe je nach Aktionsart ableiten.
  $meta = function (\App\Models\ChangeLog $log) {
      $a = $log->action;
      return match (true) {
          str_ends_with($a, '.created')  => ['plus',    'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 ring-emerald-500/20'],
          str_ends_with($a, '.deleted')  => ['trash',   'bg-red-500/10 text-red-600 dark:text-red-400 ring-red-500/20'],
          str_ends_with($a, '.updated'), $a === 'settings.modules' => ['pencil', 'bg-blue-500/10 text-blue-600 dark:text-blue-400 ring-blue-500/20'],
          str_starts_with($a, 'builder.')  => ['server', 'bg-violet-500/10 text-violet-600 dark:text-violet-400 ring-violet-500/20'],
          str_starts_with($a, 'settings.') => ['settings','bg-zinc-500/10 text-zinc-500 dark:text-zinc-400 ring-zinc-500/20'],
          str_starts_with($a, 'order.')    => ['credit-card','bg-amber-500/10 text-amber-600 dark:text-amber-400 ring-amber-500/20'],
          default => ['clock', 'bg-zinc-500/10 text-zinc-500 dark:text-zinc-400 ring-zinc-500/20'],
      };
  };
@endphp

@section('content')
  <div class="mb-6">
    <h1 class="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-white">Verlauf</h1>
    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">Jede Änderung in diesem Panel — mit „Rückgängig" wo möglich.</p>
  </div>

  <section class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
    @if ($logs->isEmpty())
      <div class="px-5 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="history" class="h-6 w-6" /></div>
        <p class="mt-4 text-sm text-zinc-500 dark:text-zinc-400">Noch keine Änderungen aufgezeichnet. Sobald du im Panel etwas anlegst oder änderst, erscheint es hier.</p>
      </div>
    @else
      <ul class="divide-y divide-zinc-100 dark:divide-zinc-800">
        @foreach ($logs as $log)
          @php [$icon, $badge] = $meta($log); @endphp
          <li class="flex items-start gap-4 px-5 py-4 {{ $log->undone_at ? 'opacity-60' : '' }}">
            <span class="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full ring-1 {{ $badge }}">
              <x-icon :name="$icon" class="h-4 w-4" />
            </span>

            <div class="min-w-0 flex-1">
              <p class="text-[14px] font-medium text-zinc-900 dark:text-white {{ $log->undone_at ? 'line-through decoration-zinc-400' : '' }}">
                {{ $log->description }}
              </p>
              <p class="mt-0.5 text-[12px] text-zinc-400 dark:text-zinc-500">
                {{ $log->user?->name ?? 'System' }} · <span title="{{ $log->created_at }}">{{ $log->created_at?->diffForHumans() }}</span>
                @if ($log->undone_at)
                  · <span class="text-zinc-500 dark:text-zinc-400">rückgängig gemacht {{ $log->undone_at->diffForHumans() }}@if($log->undoneBy) von {{ $log->undoneBy->name }}@endif</span>
                @endif
              </p>
            </div>

            <div class="shrink-0 self-center">
              @if ($log->undone_at)
                <span class="inline-flex items-center gap-1 rounded-full bg-zinc-500/10 px-2.5 py-1 text-[11px] font-medium text-zinc-500 dark:text-zinc-400 ring-1 ring-zinc-500/20">
                  <x-icon name="check" class="h-3.5 w-3.5" /> rückgängig
                </span>
              @elseif ($log->isUndoable())
                <form method="POST" action="{{ route('dashboard.changelog.undo', [$guild, $log]) }}"
                      onsubmit="return confirm('Diese Aktion rückgängig machen?');">
                  @csrf
                  <button type="submit"
                          class="inline-flex items-center gap-1.5 rounded-lg border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-3 py-1.5 text-[12.5px] font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600 transition">
                    <x-icon name="undo" class="h-4 w-4" /> Rückgängig
                  </button>
                </form>
              @else
                <span class="text-[11px] text-zinc-300 dark:text-zinc-600">—</span>
              @endif
            </div>
          </li>
        @endforeach
      </ul>

      @if ($logs->hasPages())
        <div class="border-t border-zinc-200 dark:border-zinc-800 px-5 py-4">
          {{ $logs->links() }}
        </div>
      @endif
    @endif
  </section>
@endsection