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

@php
  $fmt = fn ($v) => $v >= PHP_INT_MAX ? '∞' : number_format($v, 0, ',', '.');
  $yesNo = fn ($b) => $b
      ? '<span class="inline-flex h-4 w-4 items-center justify-center text-emerald-500"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5"><path d="M20 6 9 17l-5-5"/></svg></span>'
      : '<span class="inline-flex h-4 w-4 items-center justify-center text-zinc-300 dark:text-zinc-600"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5"><path d="M18 6 6 18M6 6l12 12"/></svg></span>';

  $featureRows = [
      'ticket_categories'  => 'Ticket-Kategorien',
      'application_forms'  => 'Bewerbungsformulare',
      'tickets_per_month'  => 'Tickets / Monat',
      'branding_removable' => 'Branding entfernbar',
      'transcripts'        => 'Transkripte',
      'role_automation'    => 'Rollen-Automatik',
      'multi_server'       => 'Multi-Server',
      'white_label'        => 'White-Label',
  ];
  $boolKeys = ['branding_removable', 'transcripts', 'role_automation', 'multi_server', 'white_label'];
@endphp

@section('content')
  <div class="mb-6">
    <h1 class="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-white">Billing</h1>
    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">Plan & Abrechnung für {{ $guild->name }}.</p>
  </div>

  {{-- Current plan card --}}
  <section class="mb-6 overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
    <div class="flex flex-wrap items-center justify-between gap-4 p-6">
      <div class="flex items-center gap-4">
        <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-500/10 text-blue-600 dark:text-blue-400">
          <x-icon name="star" class="h-6 w-6" stroke="1.6" />
        </div>
        <div>
          <p class="text-[13px] font-medium text-zinc-500 dark:text-zinc-400">Aktueller Plan</p>
          <p class="text-xl font-semibold tracking-tight text-zinc-900 dark:text-white">{{ $currentInfo['label'] }} <span class="text-sm font-normal text-zinc-400 dark:text-zinc-500">· {{ $currentInfo['price'] }}</span></p>
        </div>
      </div>
      <div class="rounded-lg border border-amber-500/30 bg-amber-500/10 px-4 py-2.5 text-[13px] text-amber-700 dark:text-amber-300">
        Zahlung folgt — Freischaltung aktuell durch Betreiber.
      </div>
    </div>
    <div class="grid grid-cols-2 gap-px border-t border-zinc-200 dark:border-zinc-800 bg-zinc-200 dark:bg-zinc-800 sm:grid-cols-4">
      <div class="bg-white dark:bg-zinc-900 px-5 py-4">
        <p class="text-[12px] text-zinc-500 dark:text-zinc-400">Ticket-Kategorien</p>
        <p class="mt-1 text-lg font-semibold text-zinc-900 dark:text-white">{{ $fmt($currentLimits['ticket_categories']) }}</p>
      </div>
      <div class="bg-white dark:bg-zinc-900 px-5 py-4">
        <p class="text-[12px] text-zinc-500 dark:text-zinc-400">Bewerbungsformulare</p>
        <p class="mt-1 text-lg font-semibold text-zinc-900 dark:text-white">{{ $fmt($currentLimits['application_forms']) }}</p>
      </div>
      <div class="bg-white dark:bg-zinc-900 px-5 py-4">
        <p class="text-[12px] text-zinc-500 dark:text-zinc-400">Tickets / Monat</p>
        <p class="mt-1 text-lg font-semibold text-zinc-900 dark:text-white">{{ $fmt($currentLimits['tickets_per_month']) }}</p>
      </div>
      <div class="bg-white dark:bg-zinc-900 px-5 py-4">
        <p class="text-[12px] text-zinc-500 dark:text-zinc-400">Branding entfernbar</p>
        <p class="mt-1 text-lg font-semibold text-zinc-900 dark:text-white">{{ $currentLimits['branding_removable'] ? 'Ja' : 'Nein' }}</p>
      </div>
    </div>
  </section>

  {{-- Plan comparison --}}
  <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-5">
    @foreach ($plans as $key => $plan)
      @php $isCurrent = $key === $currentPlan; @endphp
      <div class="flex flex-col rounded-xl border {{ ($plan['featured'] ?? false) ? 'border-blue-500/50' : 'border-zinc-200 dark:border-zinc-800' }} bg-white dark:bg-zinc-900 p-5 {{ $isCurrent ? 'ring-2 ring-blue-500/40' : '' }}">
        <div class="mb-4 flex items-center justify-between">
          <div>
            <p class="text-[15px] font-semibold text-zinc-900 dark:text-white">{{ $plan['label'] }}</p>
            <p class="mt-0.5 text-[12px] text-zinc-500 dark:text-zinc-400">{{ $plan['tagline'] }}</p>
          </div>
          @if ($plan['featured'] ?? false)
            <span class="rounded-full bg-blue-500/10 px-2 py-0.5 text-[10px] font-semibold text-blue-600 dark:text-blue-400 ring-1 ring-blue-500/20">Beliebt</span>
          @endif
        </div>

        <p class="mb-4">
          <span class="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-white">{{ $plan['price'] }}</span>
          @if ($plan['price'] !== 'auf Anfrage')<span class="text-[12px] text-zinc-400 dark:text-zinc-500"> / Monat</span>@endif
        </p>

        <ul class="mb-5 flex-1 space-y-2 text-[13px]">
          @foreach ($featureRows as $rowKey => $rowLabel)
            <li class="flex items-center gap-2 text-zinc-600 dark:text-zinc-300">
              @if (in_array($rowKey, $boolKeys, true))
                {!! $yesNo($plan['limits'][$rowKey]) !!}
              @else
                <span class="inline-flex h-4 w-4 items-center justify-center text-blue-500"><x-icon name="check" class="h-3.5 w-3.5" stroke="2.2" /></span>
              @endif
              <span>
                {{ $rowLabel }}
                @unless (in_array($rowKey, $boolKeys, true))
                  <span class="text-zinc-400 dark:text-zinc-500">· {{ $fmt($plan['limits'][$rowKey]) }}</span>
                @endunless
              </span>
            </li>
          @endforeach
        </ul>

        @if ($isCurrent)
          <span class="mt-auto inline-flex w-full items-center justify-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950 px-4 py-2.5 text-sm font-medium text-zinc-500 dark:text-zinc-400">
            <x-icon name="check" class="h-4 w-4" /> Aktueller Plan
          </span>
        @else
          <span class="mt-auto inline-flex w-full items-center justify-center rounded-lg bg-blue-600/90 px-4 py-2.5 text-sm font-medium text-white opacity-70 cursor-not-allowed"
            title="Freischaltung aktuell durch Betreiber">
            Bald verfügbar
          </span>
        @endif
      </div>
    @endforeach
  </div>

  <p class="mt-6 text-center text-[13px] text-zinc-500 dark:text-zinc-400">
    Selbstständige Zahlung folgt — die Freischaltung erfolgt aktuell manuell durch den Betreiber.
  </p>
@endsection