@extends('layouts.app-sidebar')

@section('content')
<div class="space-y-6">

    <!-- Header -->
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div>
            <h1 class="text-2xl lg:text-3xl font-bold text-db-text-primary">Support Tickets</h1>
            <p class="text-db-text-secondary mt-1">Manage user bug reports and suggestions</p>
        </div>
    </div>

    <!-- Navigation -->
    @include('admin.partials.nav')

    <!-- Status Filters -->
    <div class="flex flex-wrap gap-2">
        <a href="{{ route('admin.tickets', ['status' => 'all']) }}"
           class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all {{ $status === 'all' ? 'bg-db-accent-primary text-white' : 'bg-db-card border border-db-border text-db-text-secondary hover:text-db-text-primary' }}">
            All <span class="px-1.5 py-0.5 rounded bg-white/20 text-xs">{{ $counts['all'] }}</span>
        </a>
        <a href="{{ route('admin.tickets', ['status' => 'open']) }}"
           class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all {{ $status === 'open' ? 'bg-blue-500 text-white' : 'bg-db-card border border-db-border text-db-text-secondary hover:text-db-text-primary' }}">
            Open <span class="px-1.5 py-0.5 rounded {{ $status === 'open' ? 'bg-white/20' : 'bg-blue-500/20 text-blue-400' }} text-xs">{{ $counts['open'] }}</span>
        </a>
        <a href="{{ route('admin.tickets', ['status' => 'in_progress']) }}"
           class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all {{ $status === 'in_progress' ? 'bg-amber-500 text-white' : 'bg-db-card border border-db-border text-db-text-secondary hover:text-db-text-primary' }}">
            In Progress <span class="px-1.5 py-0.5 rounded {{ $status === 'in_progress' ? 'bg-white/20' : 'bg-amber-500/20 text-amber-400' }} text-xs">{{ $counts['in_progress'] }}</span>
        </a>
        <a href="{{ route('admin.tickets', ['status' => 'resolved']) }}"
           class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all {{ $status === 'resolved' ? 'bg-emerald-500 text-white' : 'bg-db-card border border-db-border text-db-text-secondary hover:text-db-text-primary' }}">
            Resolved <span class="px-1.5 py-0.5 rounded {{ $status === 'resolved' ? 'bg-white/20' : 'bg-emerald-500/20 text-emerald-400' }} text-xs">{{ $counts['resolved'] }}</span>
        </a>
        <a href="{{ route('admin.tickets', ['status' => 'closed']) }}"
           class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all {{ $status === 'closed' ? 'bg-zinc-500 text-white' : 'bg-db-card border border-db-border text-db-text-secondary hover:text-db-text-primary' }}">
            Closed <span class="px-1.5 py-0.5 rounded {{ $status === 'closed' ? 'bg-white/20' : 'bg-zinc-500/20 text-zinc-400' }} text-xs">{{ $counts['closed'] }}</span>
        </a>
    </div>

    <!-- Mobile Card View -->
    <div class="md:hidden space-y-3">
        @forelse($tickets as $ticket)
        <a href="{{ route('admin.tickets.view', $ticket) }}" class="block bg-db-card border border-db-border rounded-xl p-4 hover:border-db-accent-primary/30 transition-colors">
            <div class="flex items-start justify-between gap-3 mb-3">
                <div class="min-w-0">
                    <div class="flex items-center gap-2 mb-1">
                        <span class="text-xs font-mono text-db-text-muted">#{{ $ticket->id }}</span>
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                            {{ $ticket->type === 'bug' ? 'bg-red-500/15 text-red-400' : '' }}
                            {{ $ticket->type === 'suggestion' ? 'bg-blue-500/15 text-blue-400' : '' }}
                            {{ $ticket->type === 'question' ? 'bg-purple-500/15 text-purple-400' : '' }}
                            {{ $ticket->type === 'other' ? 'bg-zinc-500/15 text-zinc-400' : '' }}">
                            {{ $ticket->type_label }}
                        </span>
                    </div>
                    <p class="text-sm font-medium text-db-text-primary truncate">{{ $ticket->subject }}</p>
                </div>
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold border flex-shrink-0 {{ $ticket->status_badge_class }}">
                    {{ ucfirst(str_replace('_', ' ', $ticket->status)) }}
                </span>
            </div>
            <div class="flex items-center justify-between gap-3">
                <div class="flex items-center gap-2 min-w-0">
                    <p class="text-xs text-db-text-muted truncate">{{ $ticket->user->name }}</p>
                    <span class="text-xs text-db-text-muted">•</span>
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $ticket->priority_badge_class }}">
                        {{ ucfirst($ticket->priority) }}
                    </span>
                </div>
                <p class="text-xs text-db-text-muted flex-shrink-0">{{ $ticket->created_at->diffForHumans() }}</p>
            </div>
        </a>
        @empty
        <div class="bg-db-card border border-db-border rounded-xl px-6 py-16 text-center">
            <div class="w-16 h-16 mx-auto rounded-2xl bg-db-surface flex items-center justify-center mb-4">
                <svg class="w-8 h-8 text-db-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
                </svg>
            </div>
            <p class="text-db-text-muted">No tickets found</p>
        </div>
        @endforelse
    </div>

    <!-- Desktop Table View -->
    <div class="hidden md:block bg-db-card border border-db-border rounded-xl overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-db-border bg-db-surface/50">
                        <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">ID</th>
                        <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">User</th>
                        <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Type</th>
                        <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Subject</th>
                        <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Status</th>
                        <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Priority</th>
                        <th class="px-5 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider">Created</th>
                        <th class="px-5 py-4 text-right text-xs font-semibold text-db-text-muted uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-db-border">
                    @forelse($tickets as $ticket)
                    <tr class="hover:bg-db-surface/30 transition-colors">
                        <td class="px-5 py-4">
                            <span class="text-sm font-mono text-db-text-muted">#{{ $ticket->id }}</span>
                        </td>
                        <td class="px-5 py-4">
                            <div>
                                <p class="text-sm font-semibold text-db-text-primary">{{ $ticket->user->name }}</p>
                                <p class="text-xs text-db-text-muted">{{ $ticket->user->email }}</p>
                            </div>
                        </td>
                        <td class="px-5 py-4">
                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium
                                {{ $ticket->type === 'bug' ? 'bg-red-500/15 text-red-400' : '' }}
                                {{ $ticket->type === 'suggestion' ? 'bg-blue-500/15 text-blue-400' : '' }}
                                {{ $ticket->type === 'question' ? 'bg-purple-500/15 text-purple-400' : '' }}
                                {{ $ticket->type === 'other' ? 'bg-zinc-500/15 text-zinc-400' : '' }}">
                                {{ $ticket->type_label }}
                            </span>
                        </td>
                        <td class="px-5 py-4">
                            <p class="text-sm text-db-text-primary max-w-xs truncate">{{ $ticket->subject }}</p>
                        </td>
                        <td class="px-5 py-4">
                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold border {{ $ticket->status_badge_class }}">
                                {{ ucfirst(str_replace('_', ' ', $ticket->status)) }}
                            </span>
                        </td>
                        <td class="px-5 py-4">
                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium {{ $ticket->priority_badge_class }}">
                                {{ ucfirst($ticket->priority) }}
                            </span>
                        </td>
                        <td class="px-5 py-4">
                            <p class="text-sm text-db-text-muted">{{ $ticket->created_at->diffForHumans() }}</p>
                        </td>
                        <td class="px-5 py-4">
                            <div class="flex items-center justify-end">
                                <a href="{{ route('admin.tickets.view', $ticket) }}"
                                   class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-db-accent-primary/10 hover:bg-db-accent-primary/20 text-db-accent-primary border border-db-accent-primary/20 transition-colors" title="View Ticket">
                                    <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                </a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="px-5 py-16 text-center">
                            <div class="flex flex-col items-center">
                                <div class="w-16 h-16 rounded-2xl bg-db-surface flex items-center justify-center mb-4">
                                    <svg class="w-8 h-8 text-db-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
                                    </svg>
                                </div>
                                <p class="text-db-text-muted">No tickets found</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if($tickets->hasPages())
    <div class="mt-6 flex justify-center">
        {{ $tickets->links() }}
    </div>
    @endif

</div>
@endsection