<x-layouts.app :title="__('Support')">
    <div class="space-y-6">

        {{-- Header --}}
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-ink">{{ __('Support') }}</h1>
                <p class="mt-1 text-sm text-muted">{{ __('Open a ticket and our team will get back to you shortly.') }}</p>
            </div>
            <a href="{{ route('support.create') }}" class="btn-primary inline-flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                {{ __('New Ticket') }}
            </a>
        </div>

        {{-- Flash --}}
        @if(session('success'))
            <div class="p-3 rounded-xl bg-success/10 border border-success/20 text-sm text-success" role="status">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="p-3 rounded-xl bg-danger/10 border border-danger/20 text-sm text-danger" role="alert">{{ session('error') }}</div>
        @endif

        {{-- Ticket list --}}
        <div class="bg-surface-2 rounded-2xl border border-border overflow-hidden">

            @if($tickets->isEmpty())
                <div class="flex flex-col items-center justify-center py-20 px-6 text-center">
                    <div class="w-16 h-16 bg-brand/10 rounded-2xl flex items-center justify-center mb-4">
                        <svg class="w-8 h-8 text-brand" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                        </svg>
                    </div>
                    <p class="text-base font-semibold text-ink">{{ __('No tickets yet') }}</p>
                    <p class="mt-1 text-sm text-muted max-w-sm">{{ __("Need help? Open a ticket and we'll reply within one business day.") }}</p>
                    <a href="{{ route('support.create') }}" class="btn-primary inline-flex mt-5">{{ __('Open a Ticket') }}</a>
                </div>

            @else
                {{-- Table header --}}
                <div class="hidden sm:grid grid-cols-12 items-center px-5 py-3 border-b border-border bg-surface">
                    <div class="col-span-1 text-xs font-semibold text-muted uppercase tracking-wider">#</div>
                    <div class="col-span-5 text-xs font-semibold text-muted uppercase tracking-wider">{{ __('Subject') }}</div>
                    <div class="col-span-2 text-xs font-semibold text-muted uppercase tracking-wider">{{ __('Status') }}</div>
                    <div class="col-span-2 text-xs font-semibold text-muted uppercase tracking-wider">{{ __('Priority') }}</div>
                    <div class="col-span-2 text-xs font-semibold text-muted uppercase tracking-wider text-right">{{ __('Updated') }}</div>
                </div>

                @foreach($tickets as $ticket)
                @php
                    $statusMap = [
                        'open'        => ['bg-info/10 text-info',       'Open'],
                        'in_progress' => ['bg-warning/10 text-warning', 'In Progress'],
                        'waiting'     => ['bg-warning/10 text-warning', 'Waiting'],
                        'resolved'    => ['bg-success/10 text-success', 'Resolved'],
                        'closed'      => ['bg-muted/10 text-muted',     'Closed'],
                    ];
                    [$sCls, $sLabel] = $statusMap[$ticket->status] ?? ['bg-muted/10 text-muted', ucfirst($ticket->status)];

                    $priorityMap = [
                        'low'    => ['bg-muted/10 text-muted',   'Low'],
                        'normal' => ['bg-surface text-ink/60',   'Normal'],
                        'high'   => ['bg-danger/10 text-danger', 'High'],
                        'urgent' => ['bg-danger/15 text-danger', 'Urgent'],
                    ];
                    [$pCls, $pLabel] = $priorityMap[$ticket->priority ?? 'normal'] ?? ['bg-surface text-ink/60', ucfirst($ticket->priority ?? 'Normal')];
                @endphp
                <a href="{{ route('support.show', $ticket) }}"
                   class="flex sm:grid sm:grid-cols-12 flex-col sm:flex-none items-start sm:items-center gap-2 sm:gap-0 px-5 py-4 border-b border-border/50 last:border-0 hover:bg-surface transition-colors group">

                    {{-- Mobile layout --}}
                    <div class="flex items-center justify-between w-full sm:contents">
                        <span class="sm:col-span-1 text-xs font-mono text-muted">#{{ $ticket->id }}</span>
                        <span class="sm:hidden inline-flex px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide rounded-full {{ $sCls }}">{{ __($sLabel) }}</span>
                    </div>

                    <div class="sm:col-span-5 min-w-0 sm:pr-4 w-full">
                        <p class="text-sm font-semibold text-ink truncate group-hover:text-brand transition-colors">{{ $ticket->subject }}</p>
                        <p class="text-xs text-muted mt-0.5 truncate">{{ \Illuminate\Support\Str::limit(strip_tags($ticket->body), 80) }}</p>
                    </div>

                    <div class="hidden sm:block sm:col-span-2">
                        <span class="inline-flex px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide rounded-full {{ $sCls }}">{{ __($sLabel) }}</span>
                    </div>

                    <div class="hidden sm:block sm:col-span-2">
                        <span class="inline-flex px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide rounded-full {{ $pCls }}">{{ __($pLabel) }}</span>
                    </div>

                    <div class="sm:col-span-2 sm:text-right text-xs text-muted">{{ $ticket->updated_at?->diffForHumans() }}</div>
                </a>
                @endforeach
            @endif
        </div>

        {{-- Pagination --}}
        @if($tickets->hasPages())
            <div>{{ $tickets->links() }}</div>
        @endif

    </div>
</x-layouts.app>
