@extends('statamic::layout')
@section('title', 'UI String Translations')

@section('content')
<div class="mb-6">
    <h1 class="text-3xl font-bold mb-2">UI String Translations</h1>
    <p class="text-gray-600 text-sm">Manage translations for interface strings across all locales. Changes save automatically.</p>
</div>

{{-- Controls --}}
<div class="card p-4 mb-6">
    <form method="GET" action="{{ cp_route('translations.ui-strings') }}" class="flex items-center gap-4 flex-wrap">
        <div>
            <label class="text-xs font-bold text-gray-600 uppercase tracking-wide mb-1 block">Filter</label>
            <select name="filter" onchange="this.form.submit()" class="text-sm border border-gray-400 rounded px-3 py-1.5">
                <option value="all" {{ $filter === 'all' ? 'selected' : '' }}>All keys</option>
                <option value="missing" {{ $filter === 'missing' ? 'selected' : '' }}>Missing translations only</option>
            </select>
        </div>
        <div class="flex-1 min-w-[200px]">
            <label class="text-xs font-bold text-gray-600 uppercase tracking-wide mb-1 block">Search</label>
            <div class="flex gap-2">
                <input type="text" name="search" value="{{ $search }}" placeholder="Search by key or English value..." class="text-sm border border-gray-400 rounded px-3 py-1.5 flex-1">
                <button type="submit" class="btn-primary text-sm px-4">Search</button>
                @if($search || $filter !== 'all')
                    <a href="{{ cp_route('translations.ui-strings') }}" class="btn text-sm px-3">Clear</a>
                @endif
            </div>
        </div>
    </form>
</div>

{{-- Summary --}}
<div class="flex gap-4 mb-6 flex-wrap">
    @php
        $totalKeys = count($strings);
    @endphp
    @foreach($locales as $locale)
        @php
            $translated = collect($strings)->filter(fn ($row) => $row[$locale] !== null)->count();
            $pct = $totalKeys > 0 ? round(($translated / $totalKeys) * 100, 0) : 0;
        @endphp
        <div class="flex items-center gap-2 px-3 py-2 bg-white rounded-lg border text-sm">
            <img src="{{ $flagFiles[$locale] ?? '' }}" alt="{{ $locale }}" class="w-4 h-3 object-cover rounded-sm">
            <span class="font-medium">{{ strtoupper($locale) }}</span>
            <span class="{{ $pct >= 80 ? 'text-green-600' : ($pct >= 50 ? 'text-yellow-600' : 'text-red-600') }} font-bold">{{ $pct }}%</span>
            <span class="text-gray-400">({{ $translated }}/{{ $totalKeys }})</span>
        </div>
    @endforeach
</div>

{{-- Strings Table --}}
<div class="card p-0">
    <div class="overflow-x-auto">
        <table class="data-table w-full text-sm">
            <thead>
                <tr>
                    <th class="text-left p-3 bg-gray-50 sticky left-0 z-10 min-w-[200px]">Key</th>
                    <th class="text-left p-3 bg-gray-50 min-w-[250px]">English</th>
                    @foreach($locales as $locale)
                        <th class="text-center p-3 bg-gray-50 min-w-[250px]">
                            <div class="flex items-center justify-center gap-1">
                                <img src="{{ $flagFiles[$locale] ?? '' }}" alt="{{ $locale }}" class="w-4 h-3 object-cover rounded-sm">
                                <span>{{ strtoupper($locale) }}</span>
                            </div>
                        </th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @forelse($strings as $key => $row)
                    <tr class="border-t hover:bg-gray-50">
                        <td class="p-3 sticky left-0 bg-white z-10">
                            <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded text-gray-700">{{ $key }}</code>
                        </td>
                        <td class="p-3 text-gray-700 text-xs">
                            {{ \Illuminate\Support\Str::limit($row['en'], 80) }}
                        </td>
                        @foreach($locales as $locale)
                            <td class="p-2">
                                <div class="relative">
                                    <textarea
                                        rows="2"
                                        class="w-full text-xs border rounded px-2 py-1.5 resize-y transition-colors
                                            {{ $row[$locale] === null ? 'border-red-300 bg-red-50' : 'border-gray-300' }}"
                                        data-locale="{{ $locale }}"
                                        data-key="{{ $key }}"
                                        data-original="{{ $row[$locale] ?? '' }}"
                                        onchange="saveString(this)"
                                        onkeydown="if(event.ctrlKey&&event.key==='Enter'){saveString(this)}"
                                        placeholder="Missing..."
                                    >{{ $row[$locale] ?? '' }}</textarea>
                                    <div class="save-indicator hidden absolute top-1 right-1 text-xs px-1.5 py-0.5 rounded font-medium"></div>
                                </div>
                            </td>
                        @endforeach
                    </tr>
                @empty
                    <tr>
                        <td colspan="{{ count($locales) + 2 }}" class="p-8 text-center text-gray-500">
                            @if($search)
                                No keys found matching "{{ $search }}".
                            @elseif($filter === 'missing')
                                All keys are translated! No missing translations found.
                            @else
                                No translation keys found.
                            @endif
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="p-4 border-t text-sm text-gray-500">
        Showing {{ count($strings) }} keys. Ctrl+Enter or click away to save.
    </div>
</div>

{{-- Tab Navigation --}}
<div class="mt-6 text-sm text-gray-500">
    <a href="{{ cp_route('translations.content') }}" class="text-blue-600 hover:text-blue-800">&larr; Back to Content Translations</a>
</div>

<script>
function saveString(textarea) {
    const original = textarea.dataset.original;
    const value = textarea.value.trim();

    if (value === original) return;

    const indicator = textarea.parentElement.querySelector('.save-indicator');

    fetch('{{ cp_route('translations.ui-strings.update') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'X-Requested-With': 'XMLHttpRequest',
        },
        body: JSON.stringify({
            locale: textarea.dataset.locale,
            key: textarea.dataset.key,
            value: value,
        }),
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            textarea.dataset.original = value;
            textarea.classList.remove('border-red-300', 'bg-red-50');
            textarea.classList.add('border-green-400');
            indicator.textContent = 'Saved';
            indicator.classList.remove('hidden', 'bg-red-100', 'text-red-700');
            indicator.classList.add('bg-green-100', 'text-green-700');
            setTimeout(() => {
                textarea.classList.remove('border-green-400');
                textarea.classList.add('border-gray-300');
                indicator.classList.add('hidden');
            }, 2000);
        }
    })
    .catch(() => {
        indicator.textContent = 'Error';
        indicator.classList.remove('hidden', 'bg-green-100', 'text-green-700');
        indicator.classList.add('bg-red-100', 'text-red-700');
        setTimeout(() => indicator.classList.add('hidden'), 3000);
    });
}
</script>
@endsection