@extends('examples.modern-layout-v2')

@section('title', __('messages.deployments.deployment_history'))

@section('content')
<div class="p-6" x-data="{ showRollbackModal: false, rollbackToDelete: null, rollbackForm: null }" x-cloak>
    <div class="mb-6">
        <a href="{{route('deployments.index')}}" class="text-blue-600 hover:text-blue-800 mb-4 inline-block">
            <span class="material-icons align-middle">arrow_back</span> {{__('messages.call_page.back')}}
        </a>
        <h1 class="text-3xl font-bold text-gray-900">{{__('messages.deployments.deployment_history')}}</h1>
        <p class="text-gray-600 mt-2">{{__('messages.deployments.view_all_deployments')}}</p>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-lg shadow p-6 mb-6">
        <form method="GET" action="{{route('deployments.index')}}" class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">{{__('messages.deployments.filter_by_city')}}</label>
                <select name="city" class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                    <option value="">{{__('messages.deployments.all_cities')}}</option>
                    @foreach(\App\Models\City::all() as $city)
                    <option value="{{$city->code}}" {{request('city') == $city->code ? 'selected' : ''}}>{{$city->name}}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">{{__('messages.deployments.filter_by_status')}}</label>
                <select name="status" class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
                    <option value="">{{__('messages.deployments.all_statuses')}}</option>
                    <option value="pending" {{request('status') == 'pending' ? 'selected' : ''}}>{{__('messages.deployments.status_pending')}}</option>
                    <option value="success" {{request('status') == 'success' ? 'selected' : ''}}>{{__('messages.deployments.status_success')}}</option>
                    <option value="failed" {{request('status') == 'failed' ? 'selected' : ''}}>{{__('messages.deployments.status_failed')}}</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">{{__('messages.deployments.from_date')}}</label>
                <input type="date" name="from_date" value="{{request('from_date')}}" class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">{{__('messages.deployments.to_date')}}</label>
                <input type="date" name="to_date" value="{{request('to_date')}}" class="w-full border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
            </div>
            <div class="md:col-span-4 flex gap-3">
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                    <span class="material-icons align-middle mr-1 text-sm">filter_list</span>
                    {{__('messages.deployments.apply_filters')}}
                </button>
                <a href="{{route('deployments.index')}}" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                    {{__('messages.deployments.clear_filters')}}
                </a>
            </div>
        </form>
    </div>

    <!-- Deployment Timeline -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="space-y-4">
            @php
                $logs = \App\Models\DeploymentLog::with(['deployment', 'city', 'deployer'])
                    ->when(request('city'), fn($q) => $q->where('city_code', request('city')))
                    ->when(request('status'), fn($q) => $q->where('status', request('status')))
                    ->when(request('from_date'), fn($q) => $q->whereDate('created_at', '>=', request('from_date')))
                    ->when(request('to_date'), fn($q) => $q->whereDate('created_at', '<=', request('to_date')))
                    ->orderBy('created_at', 'desc')
                    ->paginate(20);
            @endphp

            @forelse($logs as $log)
            <div class="border-l-4 border-{{$log->status_color}}-500 pl-4 py-3">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="font-mono text-sm font-bold">{{$log->deployment->version}}</span>
                            <span class="material-icons text-gray-400">arrow_forward</span>
                            <span class="font-medium">{{$log->city->name ?? $log->city_code}}</span>
                            <span class="px-2 py-0.5 text-xs rounded-full bg-{{$log->status_color}}-100 text-{{$log->status_color}}-800">
                                {{$log->status_label}}
                            </span>
                        </div>
                        <div class="text-sm text-gray-600 space-y-1">
                            <p>
                                <span class="material-icons text-xs align-middle">person</span>
                                {{$log->deployer->username ?? 'Unknown'}} •
                                <span class="material-icons text-xs align-middle">schedule</span>
                                {{$log->started_at?->format('Y-m-d H:i:s')}}
                                @if($log->duration)
                                • Duration: {{$log->human_duration}}
                                @endif
                            </p>
                            @if($log->deployment->description)
                            <p class="text-gray-500">{{Str::limit($log->deployment->description, 100)}}</p>
                            @endif
                            @if($log->error_message)
                            <p class="text-red-600"><span class="material-icons text-xs align-middle">error</span> {{$log->error_message}}</p>
                            @endif
                        </div>
                    </div>
                    <div class="flex gap-2">
                        <a href="{{route('deployments.show', $log->deployment_id)}}" class="px-3 py-1 text-sm text-blue-600 hover:text-blue-800">
                            {{__('messages.service_page.view')}}
                        </a>
                        @if(auth()->user()->hasRole('Super-Admin') && $log->status === 'success')
                        <form action="{{route('deployments.rollback', $log->id)}}" method="POST" class="inline" x-ref="rollbackForm{{$log->id}}">
                            @csrf
                            <button type="button" class="px-3 py-1 text-sm text-yellow-600 hover:text-yellow-800" @click="rollbackToDelete = {id: {{$log->id}}, version: '{{$log->deployment->version}}', city: '{{$log->city->name ?? $log->city_code}}'}; rollbackForm = $refs.rollbackForm{{$log->id}}; showRollbackModal = true">
                                {{__('messages.deployments.rollback')}}
                            </button>
                        </form>
                        @endif
                    </div>
                </div>
                @if($log->output && request('show_logs') == $log->id)
                <div class="mt-3 p-3 bg-gray-50 rounded">
                    <pre class="text-xs overflow-x-auto">{{$log->output}}</pre>
                </div>
                @elseif($log->output)
                <a href="?show_logs={{$log->id}}" class="text-sm text-blue-600 hover:text-blue-800 mt-2 inline-block">
                    {{__('messages.deployments.view_logs')}} ▼
                </a>
                @endif
            </div>
            @empty
            <div class="text-center py-12 text-gray-500">
                <span class="material-icons text-6xl mb-4">history</span>
                <p>{{__('messages.deployments.no_history')}}</p>
            </div>
            @endforelse
        </div>

        @if($logs->hasPages())
        <div class="mt-6 border-t pt-4">
            {{$logs->appends(request()->except('page'))->links()}}
        </div>
        @endif
    </div>

    <!-- Rollback Confirmation Modal -->
    <div 
        x-show="showRollbackModal"
        x-cloak
        class="fixed inset-0 z-50 overflow-y-auto"
        style="display: none;"
        @keydown.escape.window="showRollbackModal = false"
    >
        <!-- Backdrop -->
        <div 
            class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity"
            @click="showRollbackModal = false"
            x-show="showRollbackModal"
            x-transition:enter="ease-out duration-300"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="ease-in duration-200"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
        ></div>
        
        <!-- Modal -->
        <div class="flex items-center justify-center min-h-screen px-4 py-4">
            <div 
                class="relative bg-white rounded-2xl overflow-hidden shadow-xl transform transition-all w-full max-w-lg"
                @click.stop
                x-show="showRollbackModal"
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-95"
            >
                <div class="bg-white px-6 pt-6 pb-4">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center">
                                <span class="material-icons text-yellow-600 text-2xl">warning</span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-3 @else ml-3 @endif">
                                {{__('messages.deployments.rollback')}}
                            </h3>
                        </div>
                        <button 
                            type="button" 
                            @click="showRollbackModal = false"
                            class="text-gray-400 hover:text-gray-600 transition-colors"
                        >
                            <span class="material-icons text-2xl">close</span>
                        </button>
                    </div>
                    
                    <div class="mt-4">
                        <p class="text-sm text-gray-600 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            {{__('messages.deployments.confirm_rollback')}}
                        </p>
                        <p x-show="rollbackToDelete" class="text-sm text-gray-900 font-semibold mt-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            <span x-text="'Version: ' + (rollbackToDelete?.version || '') + ' → ' + (rollbackToDelete?.city || '')"></span>
                        </p>
                        <p class="text-xs text-yellow-600 mt-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif">
                            {{__('messages.common.cannot_undo')}}
                        </p>
                    </div>
                    
                    <div class="mt-6 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') justify-start flex-row-reverse space-x-reverse @else justify-end @endif space-x-3">
                        <button 
                            type="button"
                            @click="showRollbackModal = false"
                            class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                        >
                            {{__('messages.common.cancel')}}
                        </button>
                        <button 
                            type="button"
                            @click="if(rollbackForm) { rollbackForm.submit(); } showRollbackModal = false;"
                            class="px-4 py-2 text-sm font-medium text-white bg-yellow-600 rounded-lg hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500"
                        >
                            {{__('messages.deployments.rollback')}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection