@extends('layouts.admin', ['title' => 'Import Export Translations', 'pageTitle' => 'Import/Export Translations', 'active' => 'settings'])

@php($activeTab = $activeTab ?? 'translation-import-export')

@section('content')
    <div class="space-y-5">
        <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
            <p class="text-sm font-medium leading-6 text-booklio-muted">Export translation JSON, import edited files, and validate keys before publishing a language.</p>
            <x-ui.button class="w-full sm:w-auto" variant="secondary" href="{{ route('admin.settings.translations') }}">Back to Translations</x-ui.button>
        </div>

        @if (session('status'))
            <div class="rounded-lg border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm font-bold text-emerald-700">
                {{ session('status') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="rounded-lg border border-red-100 bg-red-50 px-4 py-3">
                <p class="text-sm font-extrabold text-red-700">Validation error state</p>
                <ul class="mt-2 list-inside list-disc text-sm leading-6 text-red-700">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <section class="grid gap-5 xl:grid-cols-[300px_minmax(0,1fr)]">
            @include('admin.settings.partials.nav', ['activeTab' => $activeTab])

            <div class="space-y-5">
                <div class="grid gap-5 lg:grid-cols-2">
                    <x-ui.card title="Export Translations as JSON" description="Choose a language and module, then download a backend-ready JSON file.">
                        <form method="GET" action="{{ route('admin.settings.translations.export') }}" class="space-y-4">
                            <div class="grid gap-4 sm:grid-cols-2">
                                <x-form.select
                                    name="language_id"
                                    label="Language"
                                    :value="$languages->firstWhere('code', 'ar')?->id ?? $languages->first()?->id"
                                    :options="$languages->mapWithKeys(fn ($language) => [$language->id => $language->name . ' (' . strtoupper($language->code) . ')'])->all()"
                                />
                                <x-form.select name="module" label="Module" value="all" :options="$modules" />
                            </div>
                            <x-ui.button type="submit" class="w-full">
                                <x-ui.icon name="file-text" class="h-4 w-4" />
                                Export JSON
                            </x-ui.button>
                        </form>
                    </x-ui.card>

                    <x-ui.card title="Import Translations from JSON" description="Paste JSON or upload a translation file. Unknown keys are ignored safely.">
                        <form method="POST" action="{{ route('admin.settings.translations.import') }}" enctype="multipart/form-data" class="space-y-4">
                            @csrf
                            <x-form.select
                                name="language_id"
                                label="Import into language"
                                :value="$languages->firstWhere('code', 'ar')?->id ?? $languages->first()?->id"
                                :options="$languages->mapWithKeys(fn ($language) => [$language->id => $language->name . ' (' . strtoupper($language->code) . ')'])->all()"
                            />
                            <x-form.textarea name="json_payload" label="JSON payload" rows="8" placeholder='{"translations":{"dashboard":{"total_bookings":"..."}}}' />
                            <div>
                                <label for="translation_file" class="mb-1.5 block text-sm font-bold text-slate-700">Or upload JSON file</label>
                                <input id="translation_file" name="translation_file" type="file" accept=".json,.txt" class="block w-full rounded-lg border border-booklio-border bg-white px-3.5 py-2 text-sm font-medium shadow-soft file:mr-4 file:rounded-lg file:border-0 file:bg-blue-50 file:px-4 file:py-2 file:text-sm file:font-bold file:text-booklio-primary">
                                <p class="mt-1.5 text-xs text-booklio-muted">Max 2MB. Use the sample format below.</p>
                            </div>
                            <x-ui.button type="submit" class="w-full">Import JSON</x-ui.button>
                        </form>
                    </x-ui.card>
                </div>

                <x-ui.card title="Download Sample File" description="Use this format when preparing translations outside Booklio.">
                    <div class="overflow-x-auto rounded-lg bg-slate-950 p-4 booklio-scrollbar">
                        <pre class="text-xs leading-6 text-slate-100">{{ json_encode($samplePayload, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                    </div>
                    <div class="mt-5 flex flex-col gap-3 sm:flex-row sm:justify-end">
                        <x-ui.button variant="secondary" href="{{ route('admin.settings.translations.sample') }}">Download Sample File</x-ui.button>
                        <x-ui.button variant="secondary" href="{{ route('admin.settings.translations.export', ['language_id' => $languages->firstWhere('code', 'ar')?->id ?? $languages->first()?->id, 'module' => 'dashboard']) }}">Export Arabic Dashboard</x-ui.button>
                    </div>
                </x-ui.card>

                <x-ui.card title="RTL Publishing Checklist" description="Use this checklist before enabling Arabic, Urdu, or any custom RTL language.">
                    <div class="grid gap-3 md:grid-cols-2">
                        @foreach (['Sidebar moves to the right side', 'Dropdown alignment flips correctly', 'Tables keep readable column spacing', 'Forms and labels align right', 'Public booking page supports RTL', 'Auth screens inherit selected direction'] as $item)
                            <div class="flex items-center gap-3 rounded-lg border border-booklio-border bg-slate-50 p-3">
                                <x-ui.icon name="check" class="h-4 w-4 text-booklio-success" />
                                <span class="text-sm font-bold text-booklio-dark">{{ $item }}</span>
                            </div>
                        @endforeach
                    </div>
                </x-ui.card>
            </div>
        </section>
    </div>
@endsection