@extends('layouts.app')

@section('title', 'Tickets - ' . $currentSite->name . ' - TicketHub Central')

@section('content')
<!-- Site Info Bar with Site Switcher -->
<div class="bg-white border-b border-slate-200 sticky top-16 z-40">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-14">
            <div class="flex items-center gap-4">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                        <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="font-heading font-semibold text-slate-900 text-sm">{{ $currentSite->name }}</h2>
                        <p class="text-xs text-slate-500 font-mono">{{ $currentSite->code }}</p>
                    </div>
                </div>
                <span class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full {{ $currentSite->is_active ? 'status-open' : 'status-closed' }}">
                    {{ $currentSite->is_active ? 'Connected' : 'Offline' }}
                </span>
            </div>
            
            <!-- Site Switcher Dropdown -->
            <div class="flex items-center gap-3" x-data="{ siteSwitcherOpen: false }">
                <span class="text-sm text-slate-500 hidden sm:block">{{ $tickets->total() }} tickets</span>
                <div class="relative">
                    <button 
                        @click="siteSwitcherOpen = !siteSwitcherOpen"
                        class="flex items-center gap-2 px-3 py-1.5 bg-slate-100 hover:bg-slate-200 rounded-lg transition-colors text-sm font-medium text-slate-700"
                    >
                        <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="M8 9l4-4 4 4m0 6l-4 4-4-4"></path>
                        </svg>
                        Switch Site
                    </button>
                    
                    <div 
                        x-show="siteSwitcherOpen" 
                        @click.away="siteSwitcherOpen = false"
                        x-cloak
                        x-transition:enter="transition ease-out duration-150"
                        x-transition:enter-start="opacity-0 scale-95"
                        x-transition:enter-end="opacity-100 scale-100"
                        x-transition:leave="transition ease-in duration-100"
                        x-transition:leave-start="opacity-100 scale-100"
                        x-transition:leave-end="opacity-0 scale-95"
                        class="absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-lg border border-slate-200 py-1 z-50 max-h-80 overflow-y-auto"
                    >
                        <div class="px-3 py-2 border-b border-slate-100">
                            <p class="text-xs font-medium text-slate-500 uppercase tracking-wider">Available Sites</p>
                        </div>
                        @foreach($allSites as $s)
                            <a 
                                href="{{ route('sites.tickets.index', $s->code) }}"
                                class="flex items-center gap-3 px-3 py-2 hover:bg-slate-50 transition-colors {{ $s->code === $currentSite->code ? 'bg-blue-50' : '' }}"
                            >
                                <div class="w-6 h-6 {{ $s->code === $currentSite->code ? 'bg-blue-100' : 'bg-slate-100' }} rounded flex items-center justify-center flex-shrink-0">
                                    <svg class="w-3 h-3 {{ $s->code === $currentSite->code ? 'text-blue-600' : 'text-slate-500' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
                                    </svg>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-medium text-slate-900 truncate">{{ $s->name }}</p>
                                    <p class="text-xs text-slate-500 font-mono">{{ $s->code }}</p>
                                </div>
                                @if($s->code === $currentSite->code)
                                    <svg class="w-4 h-4 text-blue-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                @endif
                            </a>
                        @endforeach
                        <div class="border-t border-slate-100 mt-1 pt-1">
                            <a 
                                href="{{ route('sites.index') }}"
                                class="flex items-center gap-2 px-3 py-2 text-sm text-slate-600 hover:bg-slate-50 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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                                </svg>
                                View All Sites
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="p-8 animate-fadeIn" x-data="{ 
    closeTicketId: null,
    showCloseModal: false,
    closeTicket(id) {
        this.closeTicketId = id;
        this.showCloseModal = true;
    }
}">
    <div class="max-w-7xl mx-auto">
        <!-- Header -->
        <div class="mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="font-heading text-3xl font-bold text-slate-900 tracking-tight mb-1">Tickets</h1>
                    <p class="text-slate-500">
                        Showing {{ $tickets->total() }} tickets for <span class="font-medium text-slate-700">{{ $currentSite->name }}</span>
                    </p>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="bg-white border border-slate-200 rounded-lg p-4 mb-6 shadow-sm">
            <form action="{{ route('sites.tickets.index', $site) }}" method="GET" class="flex flex-wrap gap-4 items-end">
                <div class="flex-1 min-w-[200px]">
                    <div class="relative">
                        <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        <input 
                            type="text" 
                            name="search" 
                            value="{{ request('search') }}"
                            placeholder="Search by ID or username..."
                            class="w-full h-10 pl-10 pr-4 bg-slate-50 border border-slate-200 rounded-md focus:border-slate-400 focus:ring-2 focus:ring-slate-100 focus:outline-none"
                        >
                    </div>
                </div>

                <select name="closed" class="h-10 px-3 bg-white border border-slate-200 rounded-md focus:border-slate-400 focus:outline-none min-w-[140px]">
                    <option value="">All Status</option>
                    <option value="open" {{ request('closed') === 'open' ? 'selected' : '' }}>Open</option>
                    <option value="closed" {{ request('closed') === 'closed' ? 'selected' : '' }}>Closed</option>
                </select>

                <select name="category" class="h-10 px-3 bg-white border border-slate-200 rounded-md focus:border-slate-400 focus:outline-none min-w-[140px]">
                    <option value="">All Categories</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat }}" {{ request('category') === $cat ? 'selected' : '' }}>{{ $cat }}</option>
                    @endforeach
                </select>

                <select name="type" class="h-10 px-3 bg-white border border-slate-200 rounded-md focus:border-slate-400 focus:outline-none min-w-[140px]">
                    <option value="">All Priorities</option>
                    @foreach($types as $type)
                        <option value="{{ $type }}" {{ request('type') === $type ? 'selected' : '' }}>{{ $type }}</option>
                    @endforeach
                </select>

                <select name="per_page" class="h-10 px-3 bg-white border border-slate-200 rounded-md focus:border-slate-400 focus:outline-none min-w-[100px]">
                    <option value="10" {{ $perPage == 10 ? 'selected' : '' }}>10</option>
                    <option value="25" {{ $perPage == 25 ? 'selected' : '' }}>25</option>
                    <option value="50" {{ $perPage == 50 ? 'selected' : '' }}>50</option>
                    <option value="100" {{ $perPage == 100 ? 'selected' : '' }}>100</option>
                </select>

                <button type="submit" class="h-10 px-4 bg-slate-900 hover:bg-slate-800 text-white font-medium rounded-md btn-press transition-colors">
                    Filter
                </button>

                @if(request()->hasAny(['search', 'closed', 'category', 'type']))
                    <a href="{{ route('sites.tickets.index', $site) }}" class="h-10 px-4 flex items-center text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-md transition-colors">
                        Clear
                    </a>
                @endif
            </form>
        </div>

        <!-- Tickets table -->
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm overflow-hidden">
            @if($tickets->isEmpty())
                <div class="p-12 text-center">
                    <p class="text-slate-500 text-lg">No tickets found</p>
                    <p class="text-slate-400 text-sm mt-1">Try adjusting your filters or search query</p>
                </div>
            @else
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="bg-slate-50 border-b border-slate-200">
                                <th class="px-4 py-4 text-left text-sm font-semibold text-slate-700 w-16">ID</th>
                                <th class="px-4 py-4 text-left text-sm font-semibold text-slate-700 w-40">User</th>
                                <th class="px-4 py-4 text-left text-sm font-semibold text-slate-700">Latest Comment</th>
                                <th class="px-4 py-4 text-left text-sm font-semibold text-slate-700 w-28">Category</th>
{{--                                <th class="px-4 py-4 text-left text-sm font-semibold text-slate-700 w-28">Priority</th>--}}
                                <th class="px-4 py-4 text-left text-sm font-semibold text-slate-700 w-36">Status</th>
                                <th class="px-4 py-4 text-left text-sm font-semibold text-slate-700 w-24">Created</th>
                                <th class="px-4 py-4 text-center text-sm font-semibold text-slate-700 w-20">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @foreach($tickets as $ticket)
                                <tr class="table-row-hover group">
                                    <td class="px-4 py-4">
                                        <a href="{{ route('sites.tickets.show', [$site, $ticket->id]) }}" class="font-mono text-blue-600 hover:text-blue-800 font-medium">
                                            #{{ $ticket->id }}
                                        </a>
                                    </td>
                                    <td class="px-4 py-4">
                                        <div class="max-w-[150px]">
                                            <p class="font-medium text-slate-900 truncate" title="{{ $ticket->user?->name ?? $ticket->username }}">
                                                {{ $ticket->user?->name ?? $ticket->username }}
                                            </p>
                                            <p class="text-xs text-slate-500 font-mono truncate" title="{{ $ticket->username }}">
                                                {{ $ticket->username }}
                                            </p>
                                        </div>
                                    </td>
                                    <td class="px-4 py-4">
                                        <a href="{{ route('sites.tickets.show', [$site, $ticket->id]) }}" class="block">
                                            @if($ticket->latestComment)
                                                <div class="max-w-md">
                                                    <div class="flex items-center gap-2 mb-1">
                                                        @if($ticket->latestComment->support_reply)
                                                            <span class="inline-flex items-center px-1.5 py-0.5 text-xs font-medium rounded bg-blue-100 text-blue-700">
                                                                Support
                                                            </span>
                                                        @else
                                                            <span class="inline-flex items-center px-1.5 py-0.5 text-xs font-medium rounded bg-slate-100 text-slate-600">
                                                                Customer
                                                            </span>
                                                        @endif
                                                        <span class="text-xs text-slate-400">
                                                            {{ $ticket->latestComment->created?->diffForHumans() }}
                                                        </span>
                                                    </div>
                                                    <p class="text-sm text-slate-600 line-clamp-2">
                                                        {{ Str::limit(strip_tags(html_entity_decode($ticket->latestComment->content, ENT_QUOTES, 'UTF-8')), 100) }}
                                                    </p>
                                                </div>
                                            @else
{{--                                                <span class="text-sm text-slate-400 italic">No comments yet</span>--}}
                                                <div class="max-w-md">
                                                    <div class="flex items-center gap-2 mb-1">
                                                        <span class="inline-flex items-center px-1.5 py-0.5 text-xs font-medium rounded bg-slate-100 text-slate-600">
                                                            Customer
                                                        </span>
                                                        <span class="text-xs text-slate-400">
                                                            {{ $ticket->updated?->diffForHumans() }}
                                                        </span>
                                                    </div>
                                                    <p class="text-sm text-slate-600 line-clamp-2">
                                                        {{ Str::limit(strip_tags(html_entity_decode($ticket->content, ENT_QUOTES, 'UTF-8')), 100) }}
                                                    </p>
                                                </div>
                                            @endif
                                        </a>
                                    </td>
                                    <td class="px-4 py-4">
                                        <span class="text-sm text-slate-700">{{ $ticket->category ?? '—' }}</span>
                                    </td>
                                    <td class="px-4 py-4">
                                        @if($ticket->closed)
                                            <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full status-closed">
                                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                </svg>
                                                Closed
                                            </span>
                                        @else
                                            <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full status-open">
                                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                </svg>
                                                Open
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-4 text-slate-600 text-sm">
                                        {{ $ticket->created?->format('M d, Y') ?? '—' }}
                                    </td>
                                    <td class="px-4 py-4 text-center">
                                        <div class="flex items-center justify-center gap-1">
                                            <a href="{{ route('sites.tickets.show', [$site, $ticket->id]) }}" 
                                               class="p-1.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded 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>
                                                    <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"></path>
                                                </svg>
                                            </a>
                                            @if(!$ticket->closed)
                                                <button 
                                                    @click.stop="closeTicket({{ $ticket->id }})"
                                                    class="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
                                                    title="Close 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                    </svg>
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="flex items-center justify-between px-6 py-4 border-t border-slate-200 bg-slate-50">
                    <p class="text-sm text-slate-500">
                        Showing {{ $tickets->firstItem() }} to {{ $tickets->lastItem() }} of {{ $tickets->total() }} tickets
                    </p>
                    <div class="flex items-center gap-2">
                        @if($tickets->onFirstPage())
                            <span class="px-3 py-1 text-sm text-slate-400 bg-slate-100 rounded-md cursor-not-allowed">Previous</span>
                        @else
                            <a href="{{ $tickets->previousPageUrl() }}" class="px-3 py-1 text-sm text-slate-700 bg-white border border-slate-200 rounded-md hover:bg-slate-50 transition-colors">Previous</a>
                        @endif
                        
                        <span class="text-sm text-slate-600 px-2">Page {{ $tickets->currentPage() }} of {{ $tickets->lastPage() }}</span>
                        
                        @if($tickets->hasMorePages())
                            <a href="{{ $tickets->nextPageUrl() }}" class="px-3 py-1 text-sm text-slate-700 bg-white border border-slate-200 rounded-md hover:bg-slate-50 transition-colors">Next</a>
                        @else
                            <span class="px-3 py-1 text-sm text-slate-400 bg-slate-100 rounded-md cursor-not-allowed">Next</span>
                        @endif
                    </div>
                </div>
            @endif
        </div>
    </div>

    <!-- Close Ticket Modal -->
    <div 
        x-show="showCloseModal" 
        x-cloak
        class="fixed inset-0 z-50 flex items-center justify-center"
        @keydown.escape.window="showCloseModal = false"
    >
        <!-- Full screen backdrop -->
        <div 
            class="fixed inset-0 bg-black/50 backdrop-blur-sm"
            x-show="showCloseModal"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            @click="showCloseModal = false"
        ></div>
        
        <!-- Modal content -->
        <div 
            class="relative bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 p-6 z-10"
            x-show="showCloseModal"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            @click.stop
        >
            <h3 class="font-heading text-lg font-semibold text-slate-900 mb-2">Close Ticket</h3>
            <p class="text-slate-600 mb-4">Are you sure you want to close ticket <span class="font-mono font-medium" x-text="'#' + closeTicketId"></span>? This action marks the ticket as closed by support.</p>
            
            <form :action="'{{ route('sites.tickets.index', $site) }}/' + closeTicketId + '/close'" method="POST" class="flex gap-3 justify-end">
                @csrf
                @method('PATCH')
                <button type="button" @click="showCloseModal = false" class="px-4 py-2 text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors">
                    Cancel
                </button>
                <button type="submit" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors">
                    Close Ticket
                </button>
            </form>
        </div>
    </div>
</div>

<style>
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>
@endsection