@extends('layouts.app')
@section('title', __('AI Settings'))
@section('page-title', __('AI Settings'))
@section('page-subtitle', __('Pick the LLM provider that powers analyses and translations.'))

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

@php
    $provider = old('provider', $activeProvider);
    $brand = [
        'openai'    => ['name' => 'OpenAI',            'mark' => 'AI', 'color' => '#10a37f', 'docs' => 'platform.openai.com'],
        'anthropic' => ['name' => 'Anthropic Claude',  'mark' => 'An', 'color' => '#d97757', 'docs' => 'console.anthropic.com'],
        'gemini'    => ['name' => 'Google Gemini',     'mark' => 'Gm', 'color' => '#4285f4', 'docs' => 'aistudio.google.com'],
    ];
@endphp

<form method="POST" action="{{ route('super-admin.ai.update') }}" x-data="{ provider: '{{ $provider }}' }" class="space-y-6">
    @csrf

    {{-- Provider selector + master enable --}}
    <div class="card card-pad space-y-5">
        <div class="flex items-start justify-between gap-4">
            <div>
                <h2 class="text-base font-semibold">{{ __('Active provider') }}</h2>
                <p class="text-xs text-slate-500 mt-1">
                    {{ __('All AI calls (analysis, translations) route through the selected provider. Saved keys for the others are kept and can be activated anytime.') }}
                </p>
            </div>
            <label class="inline-flex items-center gap-2 shrink-0">
                <input type="hidden" name="enabled" value="0">
                <input type="checkbox" name="enabled" value="1" class="w-4 h-4 accent-brand-600"
                       @checked(old('enabled', ($settings['enabled'] ?? '0') === '1'))>
                <span class="text-sm">{{ __('Enabled') }}</span>
            </label>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
            @foreach($providers as $key => $label)
                @php $b = $brand[$key]; @endphp
                <label class="flex items-center gap-3 p-3 rounded-xl border border-slate-200 dark:border-slate-700 cursor-pointer transition"
                       :class="provider === '{{ $key }}' ? 'border-brand-500 bg-brand-50/40 dark:bg-brand-900/10' : 'hover:border-slate-300 dark:hover:border-slate-600'">
                    <input type="radio" name="provider" value="{{ $key }}" class="accent-brand-600" x-model="provider">
                    <span class="w-9 h-9 rounded-lg flex items-center justify-center text-white font-bold text-xs shrink-0" style="background-color: {{ $b['color'] }}">{{ $b['mark'] }}</span>
                    <div class="min-w-0">
                        <div class="font-medium text-sm">{{ $label }}</div>
                        <div class="text-[11px] text-slate-500 truncate">{{ $b['docs'] }}</div>
                    </div>
                </label>
            @endforeach
        </div>
        @error('provider')<p class="form-error">{{ $message }}</p>@enderror
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 space-y-6">

            {{-- ─── OpenAI card ─────────────────────────────────────── --}}
            <div class="card card-pad space-y-4" :class="provider !== 'openai' ? 'opacity-60' : ''">
                <div class="flex items-center gap-3">
                    <span class="w-10 h-10 rounded-xl flex items-center justify-center text-white font-bold text-sm shrink-0" style="background-color: #10a37f">AI</span>
                    <div>
                        <h3 class="font-semibold">{{ __('OpenAI') }}</h3>
                        <p class="text-xs text-slate-500">{{ __('Get your API key at platform.openai.com') }}</p>
                    </div>
                </div>

                <div>
                    <label class="form-label">{{ __('API key') }}</label>
                    <input type="password" name="openai_key" class="form-input font-mono" autocomplete="new-password"
                           placeholder="{{ !empty($settings['openai_key']) ? '••••••••  ('.__('saved').')' : 'sk-...' }}">
                    <p class="text-xs text-slate-500 mt-1">{{ __('Stored encrypted. Leave blank to keep the current value.') }}</p>
                    @error('openai_key')<p class="form-error">{{ $message }}</p>@enderror
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="form-label">{{ __('Default model') }}</label>
                        <select name="openai_model" class="form-select">
                            @foreach($models['openai'] as $id => $label)
                                <option value="{{ $id }}" @selected(old('openai_model', $settings['openai_model'] ?? 'gpt-4o-mini') === $id)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">{{ __('Organization (optional)') }}</label>
                        <input name="openai_organization" value="{{ old('openai_organization', $settings['openai_organization'] ?? '') }}" class="form-input" placeholder="org-...">
                    </div>
                </div>
            </div>

            {{-- ─── Anthropic card ──────────────────────────────────── --}}
            <div class="card card-pad space-y-4" :class="provider !== 'anthropic' ? 'opacity-60' : ''">
                <div class="flex items-center gap-3">
                    <span class="w-10 h-10 rounded-xl flex items-center justify-center text-white font-bold text-sm shrink-0" style="background-color: #d97757">An</span>
                    <div>
                        <h3 class="font-semibold">{{ __('Anthropic Claude') }}</h3>
                        <p class="text-xs text-slate-500">{{ __('Get your API key at console.anthropic.com') }}</p>
                    </div>
                </div>

                <div>
                    <label class="form-label">{{ __('API key') }}</label>
                    <input type="password" name="anthropic_key" class="form-input font-mono" autocomplete="new-password"
                           placeholder="{{ !empty($settings['anthropic_key']) ? '••••••••  ('.__('saved').')' : 'sk-ant-...' }}">
                    <p class="text-xs text-slate-500 mt-1">{{ __('Stored encrypted. Leave blank to keep the current value.') }}</p>
                    @error('anthropic_key')<p class="form-error">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="form-label">{{ __('Default model') }}</label>
                    <select name="anthropic_model" class="form-select">
                        @foreach($models['anthropic'] as $id => $label)
                            <option value="{{ $id }}" @selected(old('anthropic_model', $settings['anthropic_model'] ?? 'claude-sonnet-4-6') === $id)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            {{-- ─── Gemini card ─────────────────────────────────────── --}}
            <div class="card card-pad space-y-4" :class="provider !== 'gemini' ? 'opacity-60' : ''">
                <div class="flex items-center gap-3">
                    <span class="w-10 h-10 rounded-xl flex items-center justify-center text-white font-bold text-sm shrink-0" style="background-color: #4285f4">Gm</span>
                    <div>
                        <h3 class="font-semibold">{{ __('Google Gemini') }}</h3>
                        <p class="text-xs text-slate-500">{{ __('Get your API key at aistudio.google.com') }}</p>
                    </div>
                </div>

                <div>
                    <label class="form-label">{{ __('API key') }}</label>
                    <input type="password" name="gemini_key" class="form-input font-mono" autocomplete="new-password"
                           placeholder="{{ !empty($settings['gemini_key']) ? '••••••••  ('.__('saved').')' : 'AIza...' }}">
                    <p class="text-xs text-slate-500 mt-1">{{ __('Stored encrypted. Leave blank to keep the current value.') }}</p>
                    @error('gemini_key')<p class="form-error">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label class="form-label">{{ __('Default model') }}</label>
                    <select name="gemini_model" class="form-select">
                        @foreach($models['gemini'] as $id => $label)
                            <option value="{{ $id }}" @selected(old('gemini_model', $settings['gemini_model'] ?? 'gemini-2.0-flash') === $id)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="flex justify-end">
                <button class="btn-primary"><x-icon name="check" class="w-4 h-4"/> {{ __('Save') }}</button>
            </div>
        </div>

        {{-- Sidebar column placeholder kept inside the outer grid for layout, but
             the actual test forms must sit OUTSIDE the main <form> below. --}}
        <aside class="space-y-4">
            <div class="card card-pad space-y-2">
                <h3 class="font-semibold flex items-center gap-2 text-sm">
                    <x-icon name="info" class="w-4 h-4"/> {{ __('Notes') }}
                </h3>
                <ul class="text-xs text-slate-500 leading-relaxed space-y-1.5 list-disc ps-4">
                    <li>{{ __('OpenAI and Gemini support a native JSON response mode.') }}</li>
                    <li>{{ __('Claude does not — JSON validity is enforced by the system prompt.') }}</li>
                    <li>{{ __('You can save keys for several providers and switch the active one anytime.') }}</li>
                </ul>
            </div>
        </aside>
    </div>
</form>

{{-- Test connection — separate forms outside the main settings form so their
     hidden provider inputs do not bleed into the save submission. --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6">
    <div class="lg:col-start-3">
        <div class="card card-pad space-y-3">
            <h3 class="font-semibold flex items-center gap-2 text-sm">
                <x-icon name="sparkles" class="w-4 h-4"/> {{ __('Test connection') }}
            </h3>
            <p class="text-xs text-slate-500">{{ __('Pings the provider with the saved key.') }}</p>
            @foreach($providers as $key => $label)
                <form method="POST" action="{{ route('super-admin.ai.test') }}">
                    @csrf
                    <input type="hidden" name="provider" value="{{ $key }}">
                    <button class="btn-secondary w-full text-sm justify-start">
                        <span class="w-5 h-5 rounded flex items-center justify-center text-white font-bold text-[10px] shrink-0" style="background-color: {{ $brand[$key]['color'] }}">{{ $brand[$key]['mark'] }}</span>
                        {{ __('Test') }} {{ $label }}
                    </button>
                </form>
            @endforeach
        </div>
    </div>
</div>
@endsection