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

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

@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">
                Manage enabled languages, default fallback language, and text direction for the dashboard, auth pages, and public booking pages.
            </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.translations') }}">Manage Translations</x-ui.button>
                <x-ui.button class="w-full sm:w-auto" href="{{ route('admin.settings.languages.create') }}">
                    <x-ui.icon name="plus" class="h-4 w-4" />
                    Add Language
                </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">
                <div class="grid gap-4 md:grid-cols-3">
                    <x-ui.card>
                        <p class="text-sm font-bold text-booklio-muted">Active Languages</p>
                        <p class="mt-2 text-3xl font-extrabold text-booklio-dark">{{ $stats['active'] ?? 0 }}</p>
                        <p class="mt-1 text-xs font-semibold text-emerald-600">Shown in the language dropdown</p>
                    </x-ui.card>
                    <x-ui.card>
                        <p class="text-sm font-bold text-booklio-muted">Default Language</p>
                        <p class="mt-2 text-3xl font-extrabold text-booklio-dark">{{ $stats['default'] ?? 'English' }}</p>
                        <p class="mt-1 text-xs font-semibold text-booklio-muted">Fallback for missing translation text</p>
                    </x-ui.card>
                    <x-ui.card>
                        <p class="text-sm font-bold text-booklio-muted">RTL Languages</p>
                        <p class="mt-2 text-3xl font-extrabold text-booklio-dark">{{ $stats['rtl'] ?? 0 }}</p>
                        <p class="mt-1 text-xs font-semibold text-booklio-primary">Arabic and Urdu are seeded as RTL</p>
                    </x-ui.card>
                </div>

                <x-ui.card title="Languages List" description="Add languages, enable or disable them, set the default language, and manage RTL direction.">
                    <x-ui.table :headers="['Language name / Native name', 'Code', 'Direction', 'Translations', 'Default', 'Status', 'Actions']">
                        @forelse ($languages as $language)
                            <tr class="hover:bg-slate-50">
                                <td>
                                    <div class="flex min-w-0 items-center gap-3">
                                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-xs font-extrabold text-booklio-primary">
                                            {{ strtoupper($language->code) }}
                                        </span>
                                        <div class="min-w-0">
                                            <p class="truncate text-sm font-extrabold text-booklio-dark">{{ $language->name }}</p>
                                            <p class="truncate text-xs font-medium text-booklio-muted">{{ $language->native_name }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-sm font-bold text-booklio-dark">{{ $language->code }}</td>
                                <td>
                                    <x-ui.badge :variant="$language->direction === 'rtl' ? 'purple' : 'muted'">{{ $language->direction_label }}</x-ui.badge>
                                </td>
                                <td>
                                    <p class="text-sm font-bold text-booklio-dark">{{ $language->translations_count }}</p>
                                    <p class="text-xs font-semibold text-booklio-muted">{{ $language->missing_translations_count }} missing</p>
                                </td>
                                <td>
                                    @if ($language->is_default)
                                        <x-ui.badge>Default</x-ui.badge>
                                    @else
                                        <form method="POST" action="{{ route('admin.settings.languages.default', $language) }}">
                                            @csrf
                                            @method('PATCH')
                                            <x-ui.button type="submit" size="sm" variant="ghost">Make Default</x-ui.button>
                                        </form>
                                    @endif
                                </td>
                                <td>
                                    <x-ui.badge :variant="$language->is_active ? 'success' : 'muted'">{{ $language->status_label }}</x-ui.badge>
                                </td>
                                <td>
                                    <div class="flex flex-wrap gap-2">
                                        <x-ui.button size="sm" variant="secondary" href="{{ route('admin.settings.languages.edit', $language) }}">Edit</x-ui.button>
                                        <form method="POST" action="{{ route('admin.settings.languages.toggle', $language) }}">
                                            @csrf
                                            @method('PATCH')
                                            <x-ui.button type="submit" size="sm" variant="ghost" :disabled="$language->is_default && $language->is_active">
                                                {{ $language->is_active ? 'Disable' : 'Enable' }}
                                            </x-ui.button>
                                        </form>
                                        <form method="POST" action="{{ route('admin.settings.languages.destroy', $language) }}" onsubmit="return confirm('Delete this language? Translation rows will be removed with it.');">
                                            @csrf
                                            @method('DELETE')
                                            <x-ui.button type="submit" size="sm" variant="danger" :disabled="$language->is_default">Delete</x-ui.button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7">
                                    <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 languages found</p>
                                        <p class="mt-2 text-sm text-booklio-muted">Run the demo seeder or add your first language.</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </x-ui.table>
                </x-ui.card>

                <x-ui.card title="RTL Preview" description="Arabic and Urdu switch text direction for dashboard, dropdowns, forms, tables, auth screens, and public booking pages.">
                    <div class="grid gap-4 lg:grid-cols-2">
                        <div class="rounded-lg border border-booklio-border bg-slate-50 p-4">
                            <p class="text-sm font-extrabold text-booklio-dark">LTR layout</p>
                            <div class="mt-3 flex gap-3 rounded-lg border border-booklio-border bg-white p-3">
                                <div class="h-20 w-24 rounded-lg bg-blue-50"></div>
                                <div class="min-w-0 flex-1 space-y-2">
                                    <div class="h-3 w-1/2 rounded bg-slate-300"></div>
                                    <div class="h-3 w-3/4 rounded bg-slate-200"></div>
                                    <div class="h-8 rounded-lg bg-booklio-primary"></div>
                                </div>
                            </div>
                        </div>
                        <div dir="rtl" class="rounded-lg border border-booklio-border bg-slate-50 p-4 text-right">
                            <p class="text-sm font-extrabold text-booklio-dark">معاينة RTL</p>
                            <div class="mt-3 flex gap-3 rounded-lg border border-booklio-border bg-white p-3">
                                <div class="h-20 w-24 rounded-lg bg-blue-50"></div>
                                <div class="min-w-0 flex-1 space-y-2">
                                    <div class="mr-auto h-3 w-1/2 rounded bg-slate-300"></div>
                                    <div class="mr-auto h-3 w-3/4 rounded bg-slate-200"></div>
                                    <div class="h-8 rounded-lg bg-booklio-primary"></div>
                                </div>
                            </div>
                            <p class="mt-3 text-xs leading-5 text-booklio-muted">القوائم والجداول والنماذج وصفحة الحجز العامة تدعم الاتجاه من اليمين إلى اليسار.</p>
                        </div>
                    </div>
                </x-ui.card>
            </div>
        </section>
    </div>
@endsection