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

@section('content')
<div class="mb-6">
    <h1 class="text-3xl font-bold mb-2">Content Translations</h1>
    <p class="text-gray-600 text-sm">Manage translations for your content entries across all locales.</p>
</div>

{{-- Stats Bar --}}
<div class="flex gap-4 mb-6 flex-wrap">
    @foreach($locales as $locale)
        @php $s = $stats[$locale] ?? ['translated' => 0, 'stale' => 0, 'missing' => 0, 'total' => 0, 'percent' => 0]; @endphp
        <div class="card p-4 flex-1 min-w-[170px]">
            <div class="flex items-center gap-2 mb-2">
                <img src="{{ $flagFiles[$locale] ?? '' }}" alt="{{ $locale }}" class="w-5 h-4 object-cover rounded-sm">
                <span class="font-bold text-sm">{{ $localeConfig[$locale]['name'] ?? $locale }}</span>
            </div>
            <div class="text-2xl font-bold {{ $s['percent'] >= 80 ? 'text-green-600' : ($s['percent'] >= 50 ? 'text-yellow-600' : 'text-red-600') }}">
                {{ number_format($s['percent'], 0) }}%
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
                <div class="h-2 rounded-full {{ $s['percent'] >= 80 ? 'bg-green-500' : ($s['percent'] >= 50 ? 'bg-yellow-500' : 'bg-red-500') }}" style="width: {{ $s['percent'] }}%"></div>
            </div>
            <div class="text-xs text-gray-500 mt-1">
                {{ $s['translated'] }}/{{ $s['total'] }} translated
                @if($s['stale'] > 0)
                    <span class="text-yellow-600">({{ $s['stale'] }} stale)</span>
                @endif
                @if($s['missing'] > 0)
                    <span class="text-red-500">({{ $s['missing'] }} missing)</span>
                @endif
            </div>
        </div>
    @endforeach
</div>

{{-- Controls --}}
<div class="card p-4 mb-6">
    <form method="GET" action="{{ cp_route('translations.content') }}" class="flex items-center gap-4 flex-wrap">
        <div>
            <label class="text-xs font-bold text-gray-600 uppercase tracking-wide mb-1 block">Collection</label>
            <select name="collection" onchange="this.form.submit()" class="text-sm border border-gray-400 rounded px-3 py-1.5">
                @foreach($collections as $col)
                    <option value="{{ $col }}" {{ $collection === $col ? 'selected' : '' }}>{{ ucfirst(str_replace('_', ' ', $col)) }}</option>
                @endforeach
            </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 title..." 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)
                    <a href="{{ cp_route('translations.content', ['collection' => $collection]) }}" class="btn text-sm px-3">Clear</a>
                @endif
            </div>
        </div>
    </form>
</div>

{{-- Matrix 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-[250px]">
                        Entry ({{ $total }} total)
                    </th>
                    @foreach($locales as $locale)
                        <th class="text-center p-3 bg-gray-50 min-w-[100px]">
                            <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($matrix as $row)
                    <tr class="border-t hover:bg-gray-50">
                        <td class="p-3 sticky left-0 bg-white z-10">
                            <a href="{{ $row['edit_url'] }}" class="text-blue-600 hover:text-blue-800 font-medium">
                                {{ \Illuminate\Support\Str::limit($row['title'], 60) }}
                            </a>
                        </td>
                        @foreach($locales as $locale)
                            @php $t = $row['translations'][$locale]; @endphp
                            <td class="p-3 text-center">
                                @if($t['status'] === 'translated')
                                    <a href="{{ $t['edit_url'] }}" class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium hover:bg-green-200 transition-colors" title="Edit translation">
                                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><circle cx="10" cy="10" r="5"/></svg>
                                        OK
                                    </a>
                                @elseif($t['status'] === 'stale')
                                    <a href="{{ $t['edit_url'] }}" class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-yellow-100 text-yellow-700 text-xs font-medium hover:bg-yellow-200 transition-colors" title="Translation may be outdated">
                                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><circle cx="10" cy="10" r="5"/></svg>
                                        Stale
                                    </a>
                                @else
                                    <form method="POST" action="{{ cp_route('translations.create') }}" class="inline">
                                        @csrf
                                        <input type="hidden" name="origin_id" value="{{ $row['origin']->id() }}">
                                        <input type="hidden" name="locale" value="{{ $locale }}">
                                        <button type="submit" class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-red-100 text-red-600 text-xs font-medium hover:bg-red-200 transition-colors" title="Create translation">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 20 20"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 5v10m-5-5h10"/></svg>
                                            Add
                                        </button>
                                    </form>
                                @endif
                            </td>
                        @endforeach
                    </tr>
                @empty
                    <tr>
                        <td colspan="{{ count($locales) + 1 }}" class="p-8 text-center text-gray-500">
                            @if($search)
                                No entries found matching "{{ $search }}".
                            @else
                                No entries found in this collection.
                            @endif
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    @if($totalPages > 1)
        <div class="flex items-center justify-between p-4 border-t">
            <div class="text-sm text-gray-500">
                Page {{ $page }} of {{ $totalPages }}
            </div>
            <div class="flex gap-2">
                @if($page > 1)
                    <a href="{{ cp_route('translations.content', ['collection' => $collection, 'search' => $search, 'page' => $page - 1]) }}" class="btn text-sm px-3">&laquo; Previous</a>
                @endif
                @if($page < $totalPages)
                    <a href="{{ cp_route('translations.content', ['collection' => $collection, 'search' => $search, 'page' => $page + 1]) }}" class="btn text-sm px-3">Next &raquo;</a>
                @endif
            </div>
        </div>
    @endif
</div>

{{-- Tab Navigation --}}
<div class="mt-6 text-sm text-gray-500">
    <a href="{{ cp_route('translations.ui-strings') }}" class="text-blue-600 hover:text-blue-800">Go to UI Strings Manager &rarr;</a>
</div>
@endsection