@extends('admin.layouts.app')

@section('title', t('admin.translations.title'))
@section('page_title', t('admin.translations.title'))

@section('content')
<div x-data="translationManager()" class="space-y-4">

    {{-- Filters --}}
    <div class="bg-white rounded-lg shadow-sm p-4">
        <form method="GET" action="{{ route('admin.translations.index') }}" class="flex flex-wrap items-end gap-3">
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">@t('admin.translations.namespace')</label>
                <select name="namespace" class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">@t('admin.translations.all_namespaces')</option>
                    @foreach($namespaces as $ns)
                        <option value="{{ $ns }}" {{ request('namespace') === $ns ? 'selected' : '' }}>{{ $ns }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">@t('admin.translations.missing_for')</label>
                <select name="missing" class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">@t('admin.translations.all_keys')</option>
                    @foreach($locales as $locale)
                        <option value="{{ $locale->code }}" {{ request('missing') === $locale->code ? 'selected' : '' }}>{{ $locale->name }} ({{ $locale->code }})</option>
                    @endforeach
                </select>
            </div>
            <button type="submit" class="bg-gray-600 text-white px-4 py-2 rounded-md text-sm hover:bg-gray-700 transition-colors">
                @t('admin.translations.filter')
            </button>
            @if(request()->hasAny(['namespace', 'missing']))
                <a href="{{ route('admin.translations.index') }}" class="text-sm text-gray-500 hover:text-gray-700 px-2 py-2">@t('admin.translations.clear_filters')</a>
            @endif
        </form>
    </div>

    {{-- Export / Import --}}
    <div class="bg-white rounded-lg shadow-sm p-4 flex flex-wrap items-end gap-4">
        {{-- Export --}}
        <div class="flex items-end gap-2">
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">@t('admin.translations.export_locale')</label>
                <select x-model="exportLocale" class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @foreach($locales as $locale)
                        <option value="{{ $locale->code }}">{{ $locale->name }} ({{ $locale->code }})</option>
                    @endforeach
                </select>
            </div>
            <a :href="'{{ route('admin.translations.export') }}?format=json&locale=' + exportLocale"
               class="bg-green-600 text-white px-3 py-2 rounded-md text-sm hover:bg-green-700 transition-colors">
                JSON
            </a>
            <a :href="'{{ route('admin.translations.export') }}?format=csv&locale=' + exportLocale"
               class="bg-green-600 text-white px-3 py-2 rounded-md text-sm hover:bg-green-700 transition-colors">
                CSV
            </a>
        </div>

        {{-- Import --}}
        <form method="POST" action="{{ route('admin.translations.import') }}" enctype="multipart/form-data" class="flex items-end gap-2">
            @csrf
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">@t('admin.translations.import_locale')</label>
                <select name="locale" class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @foreach($locales as $locale)
                        <option value="{{ $locale->code }}">{{ $locale->name }} ({{ $locale->code }})</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">@t('admin.translations.file')</label>
                <input type="file" name="file" accept=".json,.csv" required
                       class="text-sm text-gray-600 file:mr-2 file:py-2 file:px-3 file:rounded-md file:border-0 file:text-sm file:bg-gray-100 file:text-gray-700 hover:file:bg-gray-200">
            </div>
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700 transition-colors">
                @t('admin.translations.import')
            </button>
        </form>
    </div>

    {{-- Translations table --}}
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">@t('admin.translations.namespace')</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">@t('admin.translations.key')</th>
                        @foreach($locales as $locale)
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">{{ $locale->name }} ({{ $locale->code }})</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($keys as $tKey)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 text-sm text-gray-600 whitespace-nowrap">{{ $tKey->namespace }}</td>
                            <td class="px-4 py-3 text-sm text-gray-900 font-mono text-xs">{{ $tKey->key }}</td>
                            @foreach($locales as $locale)
                                @php
                                    $translation = $tKey->translations->firstWhere('locale_code', $locale->code);
                                    $currentValue = $translation?->value ?? '';
                                @endphp
                                <td class="px-4 py-2 text-sm"
                                    x-data="editableCell({ keyId: {{ $tKey->id }}, locale: '{{ $locale->code }}', initial: {{ json_encode($currentValue) }} })">
                                    <div x-show="!editing" @click="startEdit()" class="cursor-pointer min-h-[1.5rem] px-1 py-0.5 rounded hover:bg-blue-50 transition-colors"
                                         :class="value === '' ? 'text-red-400 italic' : 'text-gray-700'">
                                        <span x-text="value || '{{ t('admin.translations.empty') }}'"></span>
                                    </div>
                                    <div x-show="editing" x-cloak class="flex items-center gap-1">
                                        <input type="text" x-model="value" x-ref="input"
                                               @keydown.enter="save()" @keydown.escape="cancel()"
                                               class="w-full border border-blue-300 rounded px-2 py-1 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                        <button @click="save()" class="text-green-600 hover:text-green-800 p-1" :disabled="saving">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                                        </button>
                                        <button @click="cancel()" class="text-gray-400 hover:text-gray-600 p-1">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                        </button>
                                    </div>
                                </td>
                            @endforeach
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ 2 + $locales->count() }}" class="px-4 py-6 text-center text-gray-500">
                                @t('admin.translations.no_records')
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="px-4 py-3 border-t border-gray-200">
            {{ $keys->links() }}
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function translationManager() {
    return {
        exportLocale: '{{ $locales->first()?->code ?? "tr" }}'
    };
}

function editableCell({ keyId, locale, initial }) {
    return {
        editing: false,
        saving: false,
        value: initial,
        originalValue: initial,

        startEdit() {
            this.editing = true;
            this.$nextTick(() => this.$refs.input.focus());
        },

        cancel() {
            this.value = this.originalValue;
            this.editing = false;
        },

        async save() {
            if (this.saving) return;
            this.saving = true;

            try {
                const response = await fetch('{{ route('admin.translations.update') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        translation_key_id: keyId,
                        locale_code: locale,
                        value: this.value
                    })
                });

                if (response.ok) {
                    this.originalValue = this.value;
                    this.editing = false;
                } else {
                    alert('{{ t('admin.translations.save_error') }}');
                    this.value = this.originalValue;
                    this.editing = false;
                }
            } catch (e) {
                alert('{{ t('admin.translations.save_error') }}');
                this.value = this.originalValue;
                this.editing = false;
            } finally {
                this.saving = false;
            }
        }
    };
}
</script>
@endpush