@extends('layouts.app')
@section('title', __('ui.translations').' — '.$language->name)
@section('page-label', __('ui.translations'))
@section('content')
@php($oldTranslations = old('translations', []))
<x-ui.page-toolbar
    :title="$language->name.' — '.__('ui.translations')"
    description="Translate every shared interface label discovered across the system. Empty values automatically fall back to the default language."
    :breadcrumbs="[['label'=>__('ui.dashboard'),'url'=>route('dashboard')],['label'=>__('ui.languages'),'url'=>route('admin.languages.index')],['label'=>$language->name]]"
/>

<div class="mb-4 flex flex-wrap items-center justify-between gap-2">
    <a href="{{ route('admin.languages.index') }}" class="mf-btn mf-btn-secondary">← {{ __('ui.back_to_languages') }}</a>
    <div class="text-xs text-muted-foreground">
        <span class="font-medium text-foreground">{{ $language->native_name ?: $language->name }}</span>
        · {{ $language->code }} · {{ strtoupper($language->direction) }}
        @if($language->is_default) · {{ __('ui.default') }} @endif
    </div>
</div>

<div class="mb-4 flex flex-wrap items-end justify-between gap-3">
    <div class="text-xs text-muted-foreground">
        {{ number_format($catalogTotal) }} UI text entries are available for translation. Static text added to Blade screens is discovered automatically.
        @if($query !== '') Showing {{ number_format($catalog->total()) }} matching entries. @endif
    </div>
    <form method="GET" action="{{ route('admin.languages.translations', $language) }}" class="flex w-full gap-2 sm:w-auto">
        <input class="mf-input min-w-0 sm:w-72" type="search" name="q" value="{{ $query }}" placeholder="Search UI text or key" aria-label="Search translations">
        <button class="mf-btn" type="submit">Search</button>
        @if($query !== '')<a class="mf-btn" href="{{ route('admin.languages.translations', $language) }}">Clear</a>@endif
    </form>
</div>

<form method="POST" action="{{ route('admin.languages.translations.update', $language) }}" class="mf-form">
    @csrf
    @method('PUT')
    <div class="mf-table-frame">
        <table class="mf-table">
            <thead>
                <tr>
                    <th class="w-48">{{ __('ui.translation_key') }}</th>
                    <th>{{ __('ui.english_text') }}</th>
                    <th>{{ __('ui.translated_text') }} — {{ $language->native_name ?: $language->name }}</th>
                </tr>
            </thead>
            <tbody>
            @forelse($catalog as $key => $englishText)
                <tr>
                    <td><code class="text-[11px] text-muted-foreground">{{ $key }}</code></td>
                    <td class="text-sm">{{ $englishText }}</td>
                    <td>
                        <input
                            class="mf-input"
                            name="translations[{{ $key }}]"
                            value="{{ array_key_exists($key, $oldTranslations) ? $oldTranslations[$key] : $translations->get($key, '') }}"
                            placeholder="{{ $language->code === 'en' ? $englishText : 'Leave blank to use default language' }}"
                            maxlength="5000"
                        >
                    </td>
                </tr>
            @empty
                <tr><td colspan="3" class="text-center text-muted-foreground">No UI text matches this search.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if($catalog->count())
    <x-ui.form-actions>
        <span class="mr-auto text-xs text-muted-foreground">This page contains at most 100 translation fields so saves are not truncated by PHP input limits.</span>
        <button class="mf-btn mf-btn-primary" type="submit">{{ __('ui.save_translations') }}</button>
    </x-ui.form-actions>
    @endif
</form>

@if($catalog->hasPages())
    <div class="mt-4">{{ $catalog->links() }}</div>
@endif

<section class="mf-card mt-5 p-4">
    <div class="mb-3">
        <h2 class="text-sm font-semibold">{{ __('ui.custom_translation') }}</h2>
        <p class="mt-1 text-xs text-muted-foreground">Add a UI translation key for exceptional text that cannot be discovered automatically. Custom keys must start with <code>ui.</code>.</p>
    </div>
    <form method="POST" action="{{ route('admin.languages.translations.store', $language) }}" class="grid gap-3 md:grid-cols-[260px_minmax(0,1fr)_auto] md:items-end">
        @csrf
        <div>
            <label class="mf-field-label" for="translation_key">{{ __('ui.translation_key') }}</label>
            <input id="translation_key" class="mf-input font-mono text-xs" name="key" value="{{ old('key') }}" placeholder="ui.example_label" required>
        </div>
        <div>
            <label class="mf-field-label" for="translation_value">{{ __('ui.translated_text') }}</label>
            <input id="translation_value" class="mf-input" name="value" value="{{ old('value') }}" required>
        </div>
        <button class="mf-btn mf-btn-secondary" type="submit">{{ __('ui.add_translation') }}</button>
    </form>
</section>
@endsection
