@extends('layouts.admin', ['title' => 'Translation Management', 'pageTitle' => 'Translation Management', 'active' => 'settings'])

@php($activeTab = $activeTab ?? 'translations')

@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">Edit translation values by language and module. English text remains the fallback for missing keys.</p>
            <div class="flex flex-col gap-2 sm:flex-row">
                <x-ui.button class="w-full sm:w-auto" variant="secondary" href="{{ route('admin.settings.languages.index') }}">Languages</x-ui.button>
                <x-ui.button class="w-full sm:w-auto" variant="secondary" href="{{ route('admin.settings.translations.import-export') }}">Import/Export</x-ui.button>
            </div>
        </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

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

            <div class="space-y-5">
                <x-ui.card title="Translation Filters" description="Search by key, fallback text, translated value, language, module, or missing status.">
                    <form method="GET" action="{{ route('admin.settings.translations') }}" class="grid gap-4 md:grid-cols-4">
                        <x-form.select
                            name="language_id"
                            label="Select language"
                            :value="$selectedLanguage?->id"
                            :options="$languages->mapWithKeys(fn ($language) => [$language->id => $language->name . ' (' . strtoupper($language->code) . ')'])->all()"
                        />
                        <x-form.select
                            name="module"
                            label="Select module"
                            :value="$filters['module'] ?? 'all'"
                            :options="['all' => 'All Modules'] + $modules"
                        />
                        <x-form.input name="q" label="Search translation key" :value="$filters['q'] ?? ''" placeholder="dashboard.total_bookings" />
                        <div class="flex items-end">
                            <label class="flex h-11 w-full items-center justify-between gap-3 rounded-lg border border-booklio-border bg-slate-50 px-3.5">
                                <span class="text-sm font-bold text-slate-700">Missing only</span>
                                <input name="missing" value="1" type="checkbox" @checked((bool) ($filters['missing'] ?? false)) class="h-4 w-4 rounded border-booklio-border text-booklio-primary focus:ring-booklio-primary">
                            </label>
                        </div>
                        <div class="flex flex-col gap-2 md:col-span-4 sm:flex-row sm:justify-end">
                            <x-ui.button type="submit">Filter</x-ui.button>
                            <x-ui.button variant="secondary" href="{{ route('admin.settings.translations') }}">Reset</x-ui.button>
                        </div>
                    </form>
                </x-ui.card>

                <form method="POST" action="{{ route('admin.settings.translations.update') }}">
                    @csrf
                    <x-ui.card title="{{ $selectedLanguage?->name ?? 'Language' }} Translations" description="Default English text is read-only. Translated text is stored per language.">
                        <x-ui.table :headers="['Module', 'Translation key', 'Default English text', 'Translated text', 'Status']">
                            @forelse ($translations as $translation)
                                <tr class="{{ $translation->is_missing ? 'bg-amber-50/40' : 'hover:bg-slate-50' }}">
                                    <td>
                                        <x-ui.badge variant="muted">{{ $modules[$translation->module] ?? $translation->module }}</x-ui.badge>
                                    </td>
                                    <td>
                                        <code class="block max-w-[260px] rounded bg-slate-100 px-2 py-1 text-xs font-bold text-slate-700">{{ $translation->module }}.{{ $translation->translation_key }}</code>
                                    </td>
                                    <td class="min-w-[220px] text-sm font-semibold text-booklio-dark">{{ $translation->default_text }}</td>
                                    <td class="min-w-[280px]">
                                        <input
                                            name="translations[{{ $translation->id }}]"
                                            value="{{ old('translations.' . $translation->id, $translation->translated_text) }}"
                                            dir="{{ $selectedLanguage?->direction ?? 'ltr' }}"
                                            placeholder="Enter translated text..."
                                            class="h-10 w-full rounded-lg border border-booklio-border bg-white px-3 text-sm font-medium shadow-soft outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100"
                                        >
                                    </td>
                                    <td>
                                        <x-ui.badge :variant="$translation->is_missing ? 'warning' : 'success'">{{ $translation->is_missing ? 'Missing' : 'Translated' }}</x-ui.badge>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5">
                                        <div class="rounded-lg border border-dashed border-booklio-border bg-slate-50 p-8 text-center">
                                            <p class="text-base font-extrabold text-booklio-dark">No translations found</p>
                                            <p class="mt-2 text-sm text-booklio-muted">Try another module, language, or search term.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </x-ui.table>

                        @error('translations')
                            <p class="mt-3 text-sm font-bold text-red-600">{{ $message }}</p>
                        @enderror

                        <div class="mt-5 flex justify-end">
                            <x-ui.button type="submit">Save Translations</x-ui.button>
                        </div>
                    </x-ui.card>
                </form>

                <x-ui.card title="RTL Preview" description="Selected Arabic and Urdu translations should be checked in right-to-left layout.">
                    @php
                        $previewDirection = $selectedLanguage?->direction ?? 'ltr';
                        $previewTitle = $translations->firstWhere('translation_key', 'total_bookings')?->translated_text
                            ?: $translations->first()?->translated_text
                            ?: 'Total Bookings';
                        $previewTrend = $previewDirection === 'rtl' ? 'ارتفاع 19% من الشهر الماضي' : 'Up 19% from last month';
                    @endphp
                    <div dir="{{ $previewDirection }}" @class([
                        'rounded-lg border border-booklio-border bg-slate-50 p-4',
                        'text-right' => $previewDirection === 'rtl',
                    ])>
                        <p class="text-sm font-extrabold text-booklio-dark">{{ $previewTitle }}</p>
                        <p class="mt-1 text-3xl font-extrabold text-booklio-dark">128</p>
                        <p class="mt-2 text-xs font-bold text-emerald-600">{{ $previewTrend }}</p>
                    </div>
                </x-ui.card>
            </div>
        </section>
    </div>
@endsection