@extends('layouts.app')
@section('title', __('Email Templates'))
@section('page-title', __('Email Templates'))
@section('page-subtitle', __('Edit per-locale subject and body for every email the platform sends.'))

@section('content')
@include('super-admin._nav')

@php
    $icons = [
        'verify_email'         => ['shield',   'from-blue-500 to-blue-700'],
        'reset_password'       => ['shield',   'from-rose-500 to-rose-700'],
        'user_welcome'         => ['user',     'from-emerald-500 to-emerald-700'],
        'user_invited'         => ['users',    'from-indigo-500 to-indigo-700'],
        'tenant_created'       => ['building', 'from-amber-500 to-amber-700'],
        'notification_generic' => ['bell',     'from-violet-500 to-violet-700'],
    ];
@endphp

{{-- Stats --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="card card-pad relative overflow-hidden">
        <div class="absolute inset-y-0 start-0 w-1 bg-brand-600"></div>
        <div class="text-xs uppercase tracking-wider text-slate-500">{{ __('Templates') }}</div>
        <div class="mt-1 text-2xl font-extrabold">{{ $stats['total'] }}</div>
    </div>
    <div class="card card-pad relative overflow-hidden">
        <div class="absolute inset-y-0 start-0 w-1 bg-emerald-500"></div>
        <div class="text-xs uppercase tracking-wider text-slate-500">{{ __('Active') }}</div>
        <div class="mt-1 text-2xl font-extrabold">{{ $stats['active'] }}</div>
    </div>
    <div class="card card-pad relative overflow-hidden">
        <div class="absolute inset-y-0 start-0 w-1 bg-violet-500"></div>
        <div class="text-xs uppercase tracking-wider text-slate-500">{{ __('Fully translated') }}</div>
        <div class="mt-1 text-2xl font-extrabold">{{ $stats['fully_translated'] }}</div>
    </div>
    <div class="card card-pad relative overflow-hidden">
        <div class="absolute inset-y-0 start-0 w-1 bg-amber-500"></div>
        <div class="text-xs uppercase tracking-wider text-slate-500">{{ __('Languages') }}</div>
        <div class="mt-1 text-2xl font-extrabold">{{ $stats['languages'] }}</div>
    </div>
</div>

{{-- List --}}
<div class="card overflow-hidden">
    <div class="px-6 py-4 border-b border-slate-200/70 dark:border-slate-800 flex items-center gap-3">
        <x-icon name="mail" class="w-5 h-5 text-brand-600"/>
        <span class="font-semibold">{{ __('All templates') }}</span>
        <span class="ms-auto badge-info">{{ $stats['total'] }}</span>
    </div>

    <div class="divide-y divide-slate-100 dark:divide-slate-800">
        @forelse($templates as $tpl)
            @php
                [$icon, $gradient] = $icons[$tpl->key] ?? ['mail', 'from-slate-500 to-slate-700'];
                $filled = $tpl->filledLocales();
                $pct = count($locales) > 0 ? round(count($filled) / count($locales) * 100) : 0;
                $subjectEn = ($tpl->subject ?? [])['en'] ?? '—';
            @endphp
            <div class="px-6 py-4 flex flex-col lg:flex-row lg:items-center gap-4 hover:bg-slate-50/60 dark:hover:bg-slate-800/40 transition">

                <div class="flex items-start gap-3 lg:w-72 shrink-0">
                    <div class="w-10 h-10 rounded-lg bg-gradient-to-br {{ $gradient }} text-white flex items-center justify-center shrink-0 shadow">
                        <x-icon :name="$icon" class="w-5 h-5"/>
                    </div>
                    <div class="min-w-0">
                        <div class="font-semibold truncate">{{ $tpl->name }}</div>
                        <code class="inline-block mt-0.5 px-2 py-0.5 text-[11px] rounded bg-slate-100 dark:bg-slate-800 text-slate-500 font-mono truncate max-w-full">{{ $tpl->key }}</code>
                    </div>
                </div>

                <div class="flex-1 min-w-0 text-sm text-slate-500 truncate">
                    <span class="opacity-60">@</span> {{ $subjectEn }}
                </div>

                {{-- Locale badges --}}
                <div class="flex flex-wrap gap-1">
                    @foreach($locales as $loc)
                        @php $ok = in_array($loc, $filled, true); @endphp
                        <span class="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider border
                                     {{ $ok ? 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-300 dark:border-emerald-800/50'
                                            : 'bg-slate-100 text-slate-400 border-slate-200 dark:bg-slate-800 dark:text-slate-500 dark:border-slate-700' }}">
                            {{ $loc }}
                        </span>
                    @endforeach
                </div>

                {{-- Progress --}}
                <div class="w-24 shrink-0">
                    <div class="h-1.5 rounded-full bg-slate-200 dark:bg-slate-800 overflow-hidden">
                        <div class="h-full bg-gradient-to-r from-emerald-400 to-emerald-600 transition-all" style="width:{{ $pct }}%"></div>
                    </div>
                    <div class="text-[10px] text-slate-500 mt-1 text-end">{{ count($filled) }}/{{ count($locales) }}</div>
                </div>

                {{-- Status --}}
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold shrink-0
                             {{ $tpl->is_active ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-300'
                                                : 'bg-slate-100 text-slate-500 dark:bg-slate-800' }}">
                    <span class="w-1.5 h-1.5 rounded-full {{ $tpl->is_active ? 'bg-emerald-500' : 'bg-slate-400' }}"></span>
                    {{ $tpl->is_active ? __('Active') : __('Inactive') }}
                </span>

                <a href="{{ route('super-admin.email-templates.edit', $tpl) }}" class="btn-primary text-xs shrink-0">
                    <x-icon name="edit" class="w-4 h-4"/> {{ __('Edit') }}
                </a>
            </div>
        @empty
            <div class="text-center py-16 text-slate-500">
                <x-icon name="mail" class="w-10 h-10 mx-auto opacity-30 mb-2"/>
                {{ __('No templates yet. Run') }} <code>php artisan db:seed --class=EmailTemplateSeeder</code>
            </div>
        @endforelse
    </div>
</div>
@endsection