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

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

@section('content')
<div class="p-6" x-data="deploymentManager()">
    <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">{{$deployment->version}}</h1>
        <p class="text-gray-600 mt-2">{{$deployment->description}}</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Deployment Info -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow p-6 mb-6">
                <h2 class="text-xl font-bold mb-4">{{__('messages.deployments.deployment_info')}}</h2>
                <dl class="grid grid-cols-2 gap-4">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{__('messages.deployments.version')}}</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-mono">{{$deployment->version}}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{__('messages.deployments.status')}}</dt>
                        <dd class="mt-1"><span class="px-2 py-1 text-xs rounded-full bg-{{$deployment->status_color}}-100 text-{{$deployment->status_color}}-800">{{$deployment->status_label}}</span></dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{__('messages.deployments.uploaded_by')}}</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{$deployment->uploader->username ?? 'Unknown'}}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{__('messages.deployments.uploaded_at')}}</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{$deployment->uploaded_at->format('Y-m-d H:i:s')}}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{__('messages.deployments.cities_deployed')}}</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{count($deployment->getDeployedCities())}} / {{$cities->count()}}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{__('messages.deployments.file_hash')}}</dt>
                        <dd class="mt-1 text-sm text-gray-900 font-mono truncate" title="{{$deployment->file_hash}}">{{Str::limit($deployment->file_hash, 20)}}</dd>
                    </div>
                </dl>
            </div>

            <!-- File List -->
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-xl font-bold">{{__('messages.deployments.files')}} 
                        <span x-show="!showNewOnly" class="text-gray-500">({{count($files)}})</span>
                        <span x-show="showNewOnly" class="text-gray-500" x-text="'(' + (newFilesCount + changedFilesCount) + ' new/changed)'"></span>
                    </h2>
                    <div class="flex items-center gap-3">
                        <select x-model="selectedCityForCompare" @change="loadComparison" class="text-sm border border-gray-300 rounded-lg px-3 py-1 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select city to compare</option>
                            @foreach($cities as $city)
                            <option value="{{$city->code}}">{{$city->name}} ({{$city->code}})</option>
                            @endforeach
                        </select>
                        <button @click="toggleNewFilesOnly" :disabled="!selectedCityForCompare || loadingComparison" 
                                class="px-3 py-1 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center">
                            <span class="material-icons text-sm mr-1" x-text="showNewOnly ? 'visibility' : 'visibility_off'"></span>
                            <span x-text="showNewOnly ? 'Show All' : 'Show New Only'"></span>
                        </button>
                    </div>
                </div>
                
                <div x-show="loadingComparison" class="text-center py-8 text-gray-500">
                    <span class="material-icons animate-spin">refresh</span>
                    <p class="mt-2">Loading comparison...</p>
                </div>
                
                <div x-show="!loadingComparison && showNewOnly && comparisonSummary" class="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                    <div class="grid grid-cols-4 gap-4 text-sm">
                        <div>
                            <span class="text-blue-600 font-semibold" x-text="comparisonSummary.total_new"></span>
                            <span class="text-gray-600"> new files</span>
                        </div>
                        <div>
                            <span class="text-orange-600 font-semibold" x-text="comparisonSummary.total_changed"></span>
                            <span class="text-gray-600"> changed files</span>
                        </div>
                        <div>
                            <span class="text-gray-600 font-semibold" x-text="comparisonSummary.total_unchanged"></span>
                            <span class="text-gray-600"> unchanged</span>
                        </div>
                        <div>
                            <span class="text-red-600 font-semibold" x-text="comparisonSummary.total_deleted"></span>
                            <span class="text-gray-600"> will be deleted</span>
                        </div>
                    </div>
                </div>
                
                <div class="max-h-96 overflow-y-auto" x-show="!loadingComparison">
                    <template x-for="file in filteredFiles" :key="file.path">
                        <div class="flex items-center py-2 border-b border-gray-100">
                            <span class="material-icons text-gray-400 mr-2" 
                                  :class="{
                                      'text-green-600': file.status === 'new',
                                      'text-orange-600': file.status === 'changed',
                                      'text-red-600': file.status === 'deleted'
                                  }">
                                <span x-show="file.type === 'directory'">folder</span>
                                <span x-show="file.type === 'file'">insert_drive_file</span>
                            </span>
                            <span class="text-sm flex-1" 
                                  :class="{
                                      'font-medium': file.type === 'directory',
                                      'text-green-700': file.status === 'new',
                                      'text-orange-700': file.status === 'changed',
                                      'text-red-700': file.status === 'deleted'
                                  }" 
                                  x-text="file.path"></span>
                            <span x-show="file.type === 'file' && file.size" class="ml-auto text-xs text-gray-500" x-text="(file.size / 1024).toFixed(1) + ' KB'"></span>
                            <span x-show="file.status === 'new'" class="ml-2 px-2 py-0.5 text-xs rounded-full bg-green-100 text-green-800">New</span>
                            <span x-show="file.status === 'changed'" class="ml-2 px-2 py-0.5 text-xs rounded-full bg-orange-100 text-orange-800">Changed</span>
                            <span x-show="file.status === 'deleted'" class="ml-2 px-2 py-0.5 text-xs rounded-full bg-red-100 text-red-800">Deleted</span>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        <!-- Deploy Panel -->
        @if(auth()->user()->hasRole('Super-Admin'))
        <div class="lg:col-span-1">
            <div class="bg-white rounded-lg shadow p-6 sticky top-6">
                <h2 class="text-xl font-bold mb-4">{{__('messages.deployments.deploy_to_cities')}}</h2>
                
                @if($cities->count() > 0)
                <div class="mb-4">
                    <label class="flex items-center mb-2">
                        <input type="checkbox" @change="toggleAll" x-model="selectAll" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 mr-2">
                        <span class="text-sm font-medium">{{__('messages.deployments.select_all')}}</span>
                    </label>
                </div>

                <div class="space-y-2 max-h-64 overflow-y-auto mb-4">
                    @foreach($cities as $city)
                    <label class="flex items-center p-2 hover:bg-gray-50 rounded border border-gray-200">
                        <input type="checkbox" value="{{$city->code}}" x-model="selectedCities" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 mr-2">
                        <div class="flex-1">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium">{{$city->name}}</span>
                                <span class="text-xs text-gray-500">{{$city->code}}</span>
                            </div>
                            <div class="text-xs text-gray-500 mt-1">
                                <span class="material-icons text-xs align-middle">dns</span>
                                {{$city->ssh_host}}
                                @if($deployment->isDeployedToCity($city->code))
                                <span class="ml-2 text-green-600">✓ {{__('messages.deployments.deployed')}}</span>
                                @endif
                            </div>
                        </div>
                    </label>
                    @endforeach
                </div>
                @else
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
                    <div class="flex items-start">
                        <span class="material-icons text-yellow-600 mr-2">warning</span>
                        <div class="text-sm text-yellow-800">
                            <p class="font-medium mb-1">{{__('messages.deployments.no_cities_configured')}}</p>
                            <p>{{__('messages.deployments.configure_ssh_info')}}</p>
                        </div>
                    </div>
                </div>
                @endif

                <button @click="deploy" :disabled="selectedCities.length === 0 || deploying" class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center">
                    <span x-show="!deploying" class="material-icons mr-2">cloud_upload</span>
                    <span x-show="deploying" class="material-icons mr-2 animate-spin">refresh</span>
                    <span x-text="deploying ? '{{__("messages.deployments.deploying")}}...' : '{{__("messages.deployments.deploy_now")}}'"></span>
                </button>

                <!-- Deployment Progress -->
                <div x-show="logs.length > 0" class="mt-4 space-y-2">
                    <template x-for="log in logs" :key="log.city_code">
                        <div class="p-2 rounded bg-gray-50">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium" x-text="log.city_name"></span>
                                <span :class="'px-2 py-0.5 text-xs rounded-full bg-' + log.status_color + '-100 text-' + log.status_color + '-800'" x-text="log.status_label"></span>
                            </div>
                            <div x-show="log.duration" class="text-xs text-gray-500 mt-1" x-text="log.duration"></div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        @endif
    </div>

    <!-- Deployment Logs -->
    @if($deployment->logs->count() > 0)
    <div class="mt-6 bg-white rounded-lg shadow p-6">
        <h2 class="text-xl font-bold mb-4">{{__('messages.deployments.deployment_history')}}</h2>
        <div class="space-y-3">
            @foreach($deployment->logs()->orderBy('created_at', 'desc')->get() as $log)
            <div class="border border-gray-200 rounded-lg p-4">
                <div class="flex items-center justify-between mb-2">
                    <div>
                        <span class="font-medium">{{$log->city->name ?? $log->city_code}}</span>
                        <span class="text-sm text-gray-500 ml-2">{{$log->started_at?->format('Y-m-d H:i:s')}}</span>
                    </div>
                    <span class="px-2 py-1 text-xs rounded-full bg-{{$log->status_color}}-100 text-{{$log->status_color}}-800">{{$log->status_label}}</span>
                </div>
                @if($log->error_message)
                <div class="text-sm text-red-600 mb-2">{{$log->error_message}}</div>
                @endif
                @if($log->output)
                <details class="text-xs">
                    <summary class="cursor-pointer text-gray-600 hover:text-gray-900">{{__('messages.deployments.view_logs')}}</summary>
                    <pre class="mt-2 p-2 bg-gray-50 rounded overflow-x-auto">{{$log->output}}</pre>
                </details>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Deploy Confirmation Modal -->
    <div x-show="showDeployConfirmModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" style="display: none;" @keydown.escape.window="showDeployConfirmModal = false">
        <div class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity" @click="showDeployConfirmModal = false"></div>
        <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>
                <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-blue-100 flex items-center justify-center">
                                <span class="material-icons text-blue-600 text-2xl">cloud_upload</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.deploy_now')}}
                            </h3>
                        </div>
                        <button type="button" @click="showDeployConfirmModal = false" class="text-gray-400 hover:text-gray-600">
                            <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_deploy')}}
                        </p>
                        <p class="text-sm text-gray-900 font-semibold mt-2 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') text-right @else text-left @endif" x-text="'Cities: ' + selectedCities.length"></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="showDeployConfirmModal = 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">
                            {{__('messages.common.cancel')}}
                        </button>
                        <button type="button" @click="confirmDeploy()" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700">
                            {{__('messages.deployments.deploy_now')}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Info Modal -->
    <div x-show="showInfoModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" style="display: none;" @keydown.escape.window="showInfoModal = false">
        <div class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity" @click="showInfoModal = false"></div>
        <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>
                <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-blue-100 flex items-center justify-center">
                                <span class="material-icons text-blue-600 text-2xl">info</span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-3 @else ml-3 @endif">
                                Information
                            </h3>
                        </div>
                        <button type="button" @click="showInfoModal = false" class="text-gray-400 hover:text-gray-600">
                            <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" x-text="infoModalMessage"></p>
                    </div>
                    <div class="mt-6 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') justify-start flex-row-reverse @else justify-end @endif">
                        <button type="button" @click="showInfoModal = false" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700">
                            {{__('messages.common.close')}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Error Modal -->
    <div x-show="showErrorModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" style="display: none;" @keydown.escape.window="showErrorModal = false">
        <div class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity" @click="showErrorModal = false"></div>
        <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>
                <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-red-100 flex items-center justify-center">
                                <span class="material-icons text-red-600 text-2xl">error</span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-3 @else ml-3 @endif">
                                Error
                            </h3>
                        </div>
                        <button type="button" @click="showErrorModal = false" class="text-gray-400 hover:text-gray-600">
                            <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" x-text="errorModalMessage"></p>
                    </div>
                    <div class="mt-6 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') justify-start flex-row-reverse @else justify-end @endif">
                        <button type="button" @click="showErrorModal = false" class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
                            {{__('messages.common.close')}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Success Modal -->
    <div x-show="showSuccessModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" style="display: none;" @keydown.escape.window="showSuccessModal = false">
        <div class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity" @click="showSuccessModal = false"></div>
        <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>
                <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-green-100 flex items-center justify-center">
                                <span class="material-icons text-green-600 text-2xl">check_circle</span>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') mr-3 @else ml-3 @endif">
                                Success
                            </h3>
                        </div>
                        <button type="button" @click="showSuccessModal = false" class="text-gray-400 hover:text-gray-600">
                            <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" x-text="successModalMessage"></p>
                    </div>
                    <div class="mt-6 flex items-center @if(\App::currentLocale() == 'iq' || \App::currentLocale() == 'ku') justify-start flex-row-reverse @else justify-end @endif">
                        <button type="button" @click="showSuccessModal = false" class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700">
                            {{__('messages.common.close')}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function deploymentManager() {
    return {
        selectedCities: [],
        selectAll: false,
        deploying: false,
        logs: [],
        deploymentId: {{$deployment->id}},
        showNewOnly: false,
        selectedCityForCompare: '',
        loadingComparison: false,
        comparisonSummary: null,
        allFiles: @json($files),
        newFiles: [],
        changedFiles: [],
        deletedFiles: [],
        showDeployConfirmModal: false,
        showInfoModal: false,
        showErrorModal: false,
        showSuccessModal: false,
        infoModalMessage: '',
        errorModalMessage: '',
        successModalMessage: '',
        get filteredFiles() {
            if (!this.showNewOnly || !this.selectedCityForCompare) {
                return this.allFiles.map(f => ({...f, status: null}));
            }
            const newAndChanged = [...this.newFiles, ...this.changedFiles, ...this.deletedFiles];
            return newAndChanged.map(f => ({
                path: f,
                type: 'file',
                size: this.allFiles.find(af => af.path === f)?.size || 0,
                status: this.newFiles.includes(f) ? 'new' : (this.changedFiles.includes(f) ? 'changed' : 'deleted')
            }));
        },
        get newFilesCount() {
            return this.newFiles.length;
        },
        get changedFilesCount() {
            return this.changedFiles.length;
        },
        
        toggleAll() {
            if (this.selectAll) {
                this.selectedCities = @json($cities->pluck('code'));
            } else {
                this.selectedCities = [];
            }
        },
        
        async deploy() {
            if (this.selectedCities.length === 0) {
                this.showInfoModal = true;
                this.infoModalMessage = '{{__("messages.deployments.select_cities_first")}}';
                return;
            }
            
            this.showDeployConfirmModal = true;
        },
        
        async confirmDeploy() {
            this.showDeployConfirmModal = false;
            this.deploying = true;
            this.logs = [];
            
            try {
                const response = await fetch(`/deployments/${this.deploymentId}/deploy`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        cities: this.selectedCities
                    })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    this.showSuccessModal = true;
                    this.successModalMessage = data.message;
                    this.pollStatus();
                } else {
                    this.showErrorModal = true;
                    this.errorModalMessage = data.message;
                    this.deploying = false;
                }
            } catch (error) {
                this.showErrorModal = true;
                this.errorModalMessage = '{{__("messages.deployments.deploy_failed")}}: ' + error.message;
                this.deploying = false;
            }
        },
        
        async pollStatus() {
            const response = await fetch(`/deployments/${this.deploymentId}/status`);
            const data = await response.json();
            
            this.logs = data.logs;
            
            const stillInProgress = this.logs.some(log => log.status === 'in_progress');
            
            if (stillInProgress) {
                setTimeout(() => this.pollStatus(), 2000);
            } else {
                this.deploying = false;
                setTimeout(() => window.location.reload(), 1000);
            }
        },
        
        async loadComparison() {
            if (!this.selectedCityForCompare) {
                this.showNewOnly = false;
                this.comparisonSummary = null;
                return;
            }
            
            this.loadingComparison = true;
            
            try {
                const response = await fetch(`/deployments/${this.deploymentId}/compare-files?city_code=${this.selectedCityForCompare}`, {
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                });
                
                const data = await response.json();
                
                if (data.success) {
                    this.comparisonSummary = data.comparison;
                    this.newFiles = data.comparison.new || [];
                    this.changedFiles = data.comparison.changed || [];
                    this.deletedFiles = data.comparison.deleted || [];
                } else {
                    this.showErrorModal = true;
                    this.errorModalMessage = 'Failed to load comparison: ' + data.message;
                }
            } catch (error) {
                this.showErrorModal = true;
                this.errorModalMessage = 'Error loading comparison: ' + error.message;
            } finally {
                this.loadingComparison = false;
            }
        },
        
        toggleNewFilesOnly() {
            if (!this.selectedCityForCompare) {
                this.showInfoModal = true;
                this.infoModalMessage = 'Please select a city first';
                return;
            }
            
            this.showNewOnly = !this.showNewOnly;
            
            if (this.showNewOnly && !this.comparisonSummary) {
                this.loadComparison();
            }
        }
    }
}
</script>
@endsection