@extends('user::layouts.backend-master')
@section('breadcrumb_title', __('updater::translate.System Updates'))

@section('content')
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-semibold">{{ __('updater::translate.System Updates') }}</h1>
            <p class="text-gray-600 mt-1">{{ __('updater::translate.Current Version') }}: <span
                    class="font-medium text-blue-600">v{{ $currentVersion }}</span></p>
        </div>
        <div class="flex gap-3">
            <a href="{{ route('admin.updater.create') }}" class="btn btn-primary">
                <i class="fas fa-upload mr-2"></i>{{ __('updater::translate.Upload Update') }}
            </a>
            <button type="button" onclick="createBackup()" class="btn btn-secondary">
                <i class="fas fa-download mr-2"></i>{{ __('updater::translate.Create Backup') }}
            </button>
        </div>
    </div>

    @if ($hasPendingUpdates)
        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-yellow-400"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-yellow-700">
                        <strong>{{ __('updater::translate.Warning') }}:</strong>
                        {{ __('updater::translate.Pending updates detected') }}
                    </p>
                </div>
            </div>
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <!-- Updates Card -->
        <div class="card">
            <div class="flex items-center gap-3">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-blue-100 rounded-md flex items-center justify-center">
                        <i class="fas fa-sync-alt text-blue-600"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">{{ __('updater::translate.All Updates') }}
                        </dt>
                        <dd class="text-lg font-medium text-gray-900">{{ $updates->count() }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <!-- Pending Updates Card -->
        <div class="card">
            <div class="flex items-center gap-3">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-yellow-100 rounded-md flex items-center justify-center">
                        <i class="fas fa-clock text-yellow-600"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">{{ __('updater::translate.Pending') }}
                        </dt>
                        <dd class="text-lg font-medium text-gray-900">
                            {{ $updates->where('status', 'pending')->count() }}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <!-- Backups Card -->
        <div class="card">
            <div class="flex items-center gap-3">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-green-100 rounded-md flex items-center justify-center">
                        <i class="fas fa-shield-alt text-green-600"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">
                            {{ __('updater::translate.System Backups') }}</dt>
                        <dd class="text-lg font-medium text-gray-900">{{ $backups->count() }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <!-- Updates List -->
        <div class="xl:col-span-2">
            <div class="card">
                <div class="py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">{{ __('updater::translate.Installation History') }}</h3>
                </div>

                @if ($updates->count() > 0)
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        {{ __('updater::translate.Version') }}
                                    </th>
                                    <th
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        {{ __('updater::translate.Status') }}
                                    </th>
                                    <th
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        {{ __('updater::translate.Upload Date') }}
                                    </th>
                                    <th
                                        class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        {{ __('updater::translate.Actions') }}
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach ($updates as $update)
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div>
                                                <div class="text-sm font-medium text-gray-900">v{{ $update->version }}
                                                </div>
                                                <div class="text-sm text-gray-500">{{ Str::limit($update->title, 50) }}
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span
                                                class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $update->status_badge_class }}">
                                                {{ $update->status_label }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            {{ $update->created_at->format('M d, Y H:i') }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <div class="flex items-center justify-end space-x-2">
                                                <a href="{{ route('admin.updater.show', $update) }}"
                                                    class="text-indigo-600 hover:text-indigo-900"
                                                    title="{{ __('updater::translate.View Details') }}">
                                                    <i class="fas fa-eye"></i>
                                                </a>

                                                @if ($update->canInstall())
                                                    <button type="button" onclick="installUpdate({{ $update->id }})"
                                                        class="text-green-600 hover:text-green-900"
                                                        title="{{ __('updater::translate.Install') }}">
                                                        <i class="fas fa-download"></i>
                                                    </button>
                                                @endif

                                                @if ($update->canRollback())
                                                    <button type="button" onclick="rollbackUpdate({{ $update->id }})"
                                                        class="text-yellow-600 hover:text-yellow-900"
                                                        title="{{ __('updater::translate.Rollback') }}">
                                                        <i class="fas fa-undo"></i>
                                                    </button>
                                                @endif

                                                @if (!$update->isInstalling())
                                                    <button type="button" onclick="deleteUpdate({{ $update->id }})"
                                                        class="text-red-600 hover:text-red-900"
                                                        title="{{ __('updater::translate.Delete') }}">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="pt-6 text-center">
                        <i class="fas fa-inbox text-4xl text-gray-300 mb-2"></i>
                        <p class="text-gray-500">{{ __('updater::translate.No updates available') }}</p>
                    </div>
                @endif
            </div>
        </div>

        <!-- Backup Management -->
        <div class="space-y-6">
            <!-- Quick Backup -->
            <div class="card">
                <div class="py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">{{ __('updater::translate.Backup Management') }}</h3>
                </div>
                <form id="backup-form" action="{{ route('admin.updater.backup.create') }}" method="POST">
                    @csrf
                    <div class="mb-4 mt-4">
                        <label for="backup_reason" class="block text-sm font-medium text-gray-700 mb-2">
                            {{ __('updater::translate.Backup Reason') }}
                        </label>
                        <input type="text" id="backup_reason" name="reason"
                            value="{{ __('updater::translate.Manual backup from updater') }}"
                            class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    </div>
                    <button type="submit" class="w-full btn btn-primary">
                        <i class="fas fa-download mr-2"></i>{{ __('updater::translate.Create Backup') }}
                    </button>
                </form>
            </div>

            <!-- Recent Backups -->
            <div class="card">
                <div class="py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">{{ __('updater::translate.Recent Backups') }}</h3>
                </div>

                @if ($backups->count() > 0)
                    <div class="divide-y divide-gray-200">
                        @foreach ($backups->take(5) as $backup)
                            <div class="p-4 flex items-center justify-between">
                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-medium text-gray-900 truncate">
                                        {{ $backup['name'] }}
                                    </p>
                                    <p class="text-sm text-gray-500">
                                        {{ formatBytes($backup['size']) }} •
                                        {{ date('M d, Y H:i', $backup['created_at']) }}
                                    </p>
                                </div>
                                <div class="flex items-center space-x-2 ml-4">
                                    <a href="{{ route('admin.updater.backup.download', basename($backup['path'])) }}"
                                        class="text-indigo-600 hover:text-indigo-900"
                                        title="{{ __('updater::translate.Download') }}">
                                        <i class="fas fa-download"></i>
                                    </a>
                                    <button type="button" onclick="deleteBackup('{{ basename($backup['path']) }}')"
                                        class="text-red-600 hover:text-red-900"
                                        title="{{ __('updater::translate.Delete') }}">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="pt-6 text-center">
                        <i class="fas fa-shield-alt text-4xl text-gray-300 mb-4"></i>
                        <p class="text-gray-500">{{ __('updater::translate.No backups available') }}</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Hidden Forms for Actions -->
    <form id="install-form" method="POST" style="display: none;">
        @csrf
    </form>

    <form id="rollback-form" method="POST" style="display: none;">
        @csrf
    </form>

    <form id="delete-form" method="POST" style="display: none;">
        @csrf
        @method('DELETE')
    </form>

    <form id="delete-backup-form" method="POST" style="display: none;">
        @csrf
        @method('DELETE')
    </form>
@endsection

@push('scripts')
    <script>
        (function($) {
            "use strict";

            // Install Update
            window.installUpdate = function(updateId) {
                if (confirm("{{ __('updater::translate.Are you sure you want to install this update?') }}")) {
                    const form = document.getElementById('install-form');
                    form.action = `/admin/updater/${updateId}/install`;
                    form.submit();
                }
            };

            // Rollback Update
            window.rollbackUpdate = function(updateId) {
                if (confirm("{{ __('updater::translate.Are you sure you want to rollback this update?') }}")) {
                    const form = document.getElementById('rollback-form');
                    form.action = `/admin/updater/${updateId}/rollback`;
                    form.submit();
                }
            };

            // Delete Update
            window.deleteUpdate = function(updateId) {
                if (confirm("{{ __('updater::translate.Are you sure you want to delete this update?') }}")) {
                    const form = document.getElementById('delete-form');
                    form.action = `/admin/updater/${updateId}`;
                    form.submit();
                }
            };

            // Delete Backup
            window.deleteBackup = function(filename) {
                if (confirm("{{ __('updater::translate.Are you sure you want to delete this backup?') }}")) {
                    const form = document.getElementById('delete-backup-form');
                    form.action = `/admin/updater/backup/${filename}`;
                    form.submit();
                }
            };

            // Create Backup
            window.createBackup = function() {
                document.getElementById('backup-form').submit();
            };

            // Format bytes helper function
            window.formatBytes = function(bytes, decimals = 2) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const dm = decimals < 0 ? 0 : decimals;
                const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
            };

        })(jQuery);
    </script>
@endpush

@php
    function formatBytes($bytes, $precision = 2)
    {
        $units = ['B', 'KB', 'MB', 'GB', 'TB'];

        for ($i = 0; $bytes > 1024; $i++) {
            $bytes /= 1024;
        }

        return round($bytes, $precision) . ' ' . $units[$i];
    }
@endphp