@extends('admin/settings/sidebar')
@section('title', __('admin.update.title'))
@section('setting')
<div class="container mx-auto">
    <div class="alert text-yellow-800 bg-yellow-100 dark:text-yellow-200 dark:bg-yellow-800/20 mb-6" role="alert">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="bi bi-exclamation-triangle-fill text-xl"></i>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-bold">{{ __('admin.update.beta_warning_title') }}</h3>
                <div class="mt-1 text-xs">
                    {{ __('admin.update.beta_warning_message') }}
                    <a href="https://docs.clientxcms.com/installation/upgrade" target="_blank" class="underline font-semibold hover:text-yellow-900 dark:hover:text-yellow-100">
                        {{ __('admin.update.beta_warning_link') }}
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div id="post-update-steps" class="card mb-6 hidden" role="status">
        <div class="flex items-start gap-3">
            <span class="inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400">
                <i class="bi bi-check-lg text-xl"></i>
            </span>
            <div class="grow">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
                    {{ __('admin.update.post_update_title') }}
                </h2>
                <p id="post-update-result" class="mt-1 text-sm text-green-600 dark:text-green-400"></p>
                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                    {{ __('admin.update.post_update_message') }}
                </p>

                <div class="mt-4 space-y-4">
                    <div class="flex flex-col gap-3 rounded-lg border border-gray-200 p-4 sm:flex-row sm:items-center sm:justify-between dark:border-gray-700">
                        <div class="flex items-start gap-3">
                            <span class="inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-sm font-semibold text-indigo-600 dark:bg-indigo-900/30 dark:text-indigo-400">1</span>
                            <div>
                                <p class="font-medium text-gray-800 dark:text-gray-200">{{ __('admin.update.download_translations') }}</p>
                                <p id="translation-download-status" class="text-sm text-gray-500 dark:text-gray-400"></p>
                            </div>
                        </div>
                        <button id="download-update-translations" type="button" class="btn btn-secondary inline-flex items-center justify-center gap-2">
                            <i class="bi bi-translate"></i>
                            {{ __('admin.update.download_translations') }}
                        </button>
                    </div>

                    <div class="rounded-lg border border-gray-200 p-4 dark:border-gray-700">
                        <div class="flex items-start gap-3">
                            <span class="inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-sm font-semibold text-indigo-600 dark:bg-indigo-900/30 dark:text-indigo-400">2</span>
                            <div class="min-w-0">
                                <p class="text-sm text-gray-600 dark:text-gray-400">{{ __('admin.update.build_assets_message') }}</p>
                                <code class="mt-2 block rounded-md bg-gray-900 px-3 py-2 text-sm text-gray-100">npm install && npm run build</code>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if ($publishedVersions)
        @php
            $icons = [
                'added' => 'bi bi-plus text-green-500',
                'removed' => 'bi bi-dash text-red-500',
                'changed' => 'bi bi-arrow-repeat text-blue-500',
                'fixed' => 'bi bi-wrench text-yellow-500',
                'other' => 'bi bi-three-dots text-gray-500',
                'security' => 'bi bi-shield text-purple-500',
            ];
        @endphp
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-1 space-y-6">
            <div class="card p-6 h-full">
                <h2 class="text-lg font-bold text-gray-800 dark:text-white">
                    {{ __('admin.update.status_title') }}
                </h2>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
                    {{ __('admin.update.status_subtitle') }}
                </p>
                @if (app()->isLocal())
                <div class="alert text-yellow-800 bg-yellow-100 dark:text-yellow-200 dark:bg-yellow-800/20 mt-2" role="alert">
                    <div class="flex">
                        <div class="ml-3">
                            <h3 class="text-sm font-bold">{{ __('admin.update.local_environment') }}</h3>
                            <div class="mt-1 text-xs">
                                {{ __('admin.update.local_environment_message') }}
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                @if (version_compare($currentVersion, $publishedVersions->version, '>='))
                <div class="alert text-green-800 bg-green-100 dark:text-green-200 dark:bg-green-800/20 mt-2" role="alert">
                    <div class="flex">
                        <div class="ml-3">
                            <h3 class="text-sm font-bold">{{ __('admin.update.up_to_date') }}</h3>
                            <div class="mt-1 text-xs">
                                {{ __('admin.update.up_to_date_message') }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-4">
                    <p class="text-sm text-gray-600 dark:text-gray-400">{{ __('admin.update.current_version') }}</p>
                    <span class="text-lg font-bold text-gray-800 dark:text-white">v{{ $currentVersion }}</span>
                    @if ($appIsGit)
                    <span class="text-xs text-gray-500 dark:text-gray-400">{{ $appVersion }}</span>
                    @endif
                </div>
                <form method="POST" action="{{ route('admin.update') }}" class="ajax-extension-form">
                    @csrf
                    <button class="w-full btn btn-primary mt-6">
                        {{ __('admin.update.update_version') }}
                    </button>
                </form>
                @else
                <div class="alert bg-primary text-dark dark:text-white mt-2" role="alert">
                    <div class="flex">
                        <div class="ml-3">
                            <h3 class="text-sm font-bold">{{ __('admin.update.update_available') }}</h3>
                            <div class="mt-1 text-xs">
                                {{ __('admin.update.new_version_is', ['version' => $publishedVersions->version]) }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-4 grid grid-cols-2 gap-4">
                    <div>
                        <p class="text-sm text-gray-600 dark:text-gray-400">{{ __('admin.update.current_version') }}</p>
                        <span class="text-lg font-bold text-red-600 dark:text-red-500">v{{ $currentVersion }}</span>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600 dark:text-gray-400">{{ __('admin.update.available_version') }}</p>
                        <span class="text-lg font-bold text-green-600 dark:text-green-500">{{ $publishedVersions->version }}</span>
                    </div>
                </div>

                <form method="POST" action="{{ route('admin.update') }}" class="ajax-extension-form">
                    @csrf
                    <button class="w-full btn btn-primary mt-6">
                        <i class="bi bi-download mr-2"></i>
                        {{ __('admin.update.update_to_version', ['version' => $publishedVersions->version]) }}
                    </button>
                </form>
                @endif
            </div>
        </div>
        <div class="lg:col-span-2">
            <div class="card p-6 h-full">
                <div class="flex justify-between items-start">
                    <div>
                        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">
                            {{ __('admin.update.whats_new_in', ['version' => $publishedVersions->version]) }}
                        </h2>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            {{ $publishedVersions->version_name }} &bull; {{ __('admin.update.published_on', ['date' => \Carbon\Carbon::parse($publishedVersions->created_at)->isoFormat('LL')]) }}
                        </p>
                    </div>
                    <a href="{{ $changelogUrl }}" class="btn btn-secondary flex-shrink-0" target="_blank">
                        <i class="bi bi-book"></i>
                        {{ __('admin.update.changelog') }}
                    </a>
                </div>

                <div class="mt-6 space-y-4">
                    @foreach ($icons as $key => $icon)
                        @if (!empty($publishedVersions->changelog->$key))
                            <div>
                                <h3 class="text-md font-semibold text-gray-700 dark:text-gray-300 mb-2 flex items-center">
                                    <i class="{{ $icon }} mr-2"></i>
                                    {{ __('admin.update.' . $key) }}
                                </h3>
                                <ul class="list-disc list-inside space-y-1 text-gray-600 dark:text-gray-400 pl-2">
                                    @foreach ($publishedVersions->changelog->$key as $item)
                                        <li class="ml-5">{{ preg_replace('/^[\x{1F000}-\x{1FFFF}\x{2600}-\x{27BF}]+\s*/u', '', $item) }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <div class="mt-8">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">
            {{ __('admin.update.previous_updates') }}
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            @foreach (collect($changelog)->skip(1)->take(4) as $version)
                <div class="card p-4">
                    <div class="flex justify-between items-center mb-2">
                        <h3 class="font-bold text-gray-800 dark:text-white">{{ $version->version }}</h3>
                        <span class="text-xs text-gray-500">{{ \Carbon\Carbon::parse($version->created_at)->isoFormat('LL') }}</span>
                    </div>
                    <div class="space-y-2">
                        @foreach ($icons as $key => $icon)
                            @if (!empty($version->changelog->$key))
                                <div class="text-xs">
                                    <span class="font-semibold text-gray-700 dark:text-gray-300">
                                        <i class="{{ $icon }} mr-1"></i>
                                        {{ __('admin.update.' . $key) }}
                                    </span>
                                    <ul class="mt-1 space-y-1 text-gray-500 dark:text-gray-400 pl-4">
                                        @foreach (array_slice($version->changelog->$key, 0, 3) as $item)
                                            <li>• {{ Str::limit(preg_replace('/^[\x{1F000}-\x{1FFFF}\x{2600}-\x{27BF}]+\s*/u', '', $item), 50) }}</li>
                                        @endforeach
                                        @if (count($version->changelog->$key) > 3)
                                            <li class="italic text-gray-400">+ {{ count($version->changelog->$key) - 3 }} {{ __('admin.update.other') }}...</li>
                                        @endif
                                    </ul>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
        <div class="mt-6 text-center">
            <a href="{{ $changelogUrl }}" class="btn btn-secondary inline-flex items-center" target="_blank">
                <i class="bi bi-book mr-2"></i>
                {{ __('admin.update.changelog') }}
            </a>
        </div>
    </div>

    @else
    <div class="card text-center py-12">
        <i class="bi bi-cloud-slash text-4xl text-gray-400"></i>
        <h3 class="mt-4 text-lg font-semibold text-gray-800 dark:text-white">{{ __('admin.update.error_fetching') }}</h3>
        <p class="mt-1 text-gray-500 dark:text-gray-400">{{ __('admin.update.error_fetching_message') }}</p>
    </div>
    @endif
</div>
@endsection
@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const postUpdateSteps = document.getElementById('post-update-steps');
        const postUpdateResult = document.getElementById('post-update-result');
        const translationsButton = document.getElementById('download-update-translations');
        const translationsStatus = document.getElementById('translation-download-status');
        const translationDownloadUrl = @json(route('admin.update.translations'));
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content
            || document.querySelector('input[name="_token"]')?.value;
        const ajaxForms = document.querySelectorAll('.ajax-extension-form');

        ajaxForms.forEach(form => {
            form.addEventListener('submit', async function(event) {
                event.preventDefault();
                const submitButton = form.querySelector('button');
                const originalButtonContent = submitButton.innerHTML;
                submitButton.disabled = true;
                submitButton.innerHTML = `
                    <span class="inline-flex items-center">
                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        {{ __('extensions.settings.processing') }}
                    </span>
                `;

                try {
                    const response = await fetch(form.action, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: new FormData(form)
                    });
                    const data = await response.json();

                    if (!response.ok) {
                        throw new Error(data.message || 'Internal error.');
                    }

                    postUpdateResult.textContent = data.message;
                    postUpdateSteps.classList.remove('hidden');
                    postUpdateSteps.scrollIntoView({ behavior: 'smooth', block: 'start' });
                } catch (error) {
                    console.error(error);
                    alert(error.message || @json(__('extensions.settings.processing_error')));
                } finally {
                    submitButton.disabled = false;
                    submitButton.innerHTML = originalButtonContent;
                }
            });
        });

        translationsButton?.addEventListener('click', async function() {
            const originalButtonContent = translationsButton.innerHTML;
            translationsButton.disabled = true;
            translationsButton.innerHTML = `<i class="bi bi-arrow-repeat animate-spin"></i> {{ __('admin.update.translations_downloading') }}`;
            translationsStatus.className = 'text-sm text-gray-500 dark:text-gray-400';
            translationsStatus.textContent = @json(__('admin.update.translations_downloading'));

            try {
                const response = await fetch(translationDownloadUrl, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': csrfToken,
                    },
                });
                const data = await response.json();

                if (!response.ok) {
                    throw new Error(data.message);
                }

                translationsStatus.className = 'text-sm text-green-600 dark:text-green-400';
                translationsStatus.textContent = data.message;
            } catch (error) {
                console.error(error);
                translationsStatus.className = 'text-sm text-red-600 dark:text-red-400';
                translationsStatus.textContent = error.message || @json(__('admin.update.translations_download_error'));
            } finally {
                translationsButton.disabled = false;
                translationsButton.innerHTML = originalButtonContent;
            }
        });
    });
</script>
@endsection