@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">My Tickets</h1>
            <p class="text-db-text-secondary mt-1">Track your bug reports and suggestions</p>
        </div>
        <a href="{{ route('dashboard.tickets.create') }}"
           class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-db-accent-primary text-white font-medium hover:bg-db-accent-primary/90 transition-colors shadow-lg shadow-db-accent-primary/25">
            <svg class="w-5 h-5" 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>

    @if(session('success'))
    <div class="p-4 bg-emerald-500/15 border border-emerald-500/25 rounded-xl text-emerald-400">
        {{ session('success') }}
    </div>
    @endif

    <!-- Tickets List -->
    <div class="bg-db-card border border-db-border rounded-xl overflow-hidden">
        @forelse($tickets as $ticket)
        <a href="{{ route('dashboard.tickets.show', $ticket) }}" class="block hover:bg-db-surface/30 transition-colors border-b border-db-border last:border-b-0">
            <div class="px-6 py-4">
                <div class="flex items-start justify-between gap-4">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="text-sm font-mono text-db-text-muted">#{{ $ticket->id }}</span>
                            <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>
                            <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>
                            @if($ticket->admin_notes)
                            <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-db-accent-primary/15 text-db-accent-primary">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
                                </svg>
                                Replied
                            </span>
                            @endif
                        </div>
                        <h3 class="text-db-text-primary font-semibold truncate">{{ $ticket->subject }}</h3>
                        <p class="text-sm text-db-text-muted mt-1 line-clamp-2">{{ Str::limit($ticket->description, 150) }}</p>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <p class="text-sm text-db-text-muted">{{ $ticket->created_at->diffForHumans() }}</p>
                    </div>
                </div>
            </div>
        </a>
        @empty
        <div class="px-6 py-16 text-center">
            <div class="w-16 h-16 rounded-2xl bg-db-surface flex items-center justify-center mx-auto 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>
            <h3 class="text-lg font-semibold text-db-text-primary mb-2">No tickets yet</h3>
            <p class="text-db-text-muted mb-4">Submit a bug report or suggestion to get started</p>
            <a href="{{ route('dashboard.tickets.create') }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-db-accent-primary text-white font-medium hover:bg-db-accent-primary/90 transition-colors">
                <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>
                Create Ticket
            </a>
        </div>
        @endforelse
    </div>

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

</div>
@endsection