{{-- resources/views/livewire/simulateur-igs.blade.php --}}
<div class="max-w-5xl mx-auto px-4 py-10">

    {{-- En-tête --}}
    <div class="text-center mb-10">
        <div class="inline-flex items-center gap-2 bg-blue-100 text-blue-800 text-sm font-bold px-4 py-1.5 rounded-full mb-4">
            ✨ NOUVEAU — Simulateur IGS 2026
        </div>
        <h1 class="text-3xl font-black text-gray-900 mb-3">Calculateur IGS — Art. C40 CGI 2026</h1>
        <p class="text-gray-600 max-w-2xl mx-auto">
            Impôt Général Synthétique — 12 classes. Résultat instantané avec et sans adhésion CGA (abattement 50%).
        </p>
    </div>

    <div class="grid lg:grid-cols-5 gap-8">

        {{-- Formulaire gauche --}}
        <div class="lg:col-span-2">
            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                <h2 class="font-bold text-gray-900 mb-5 flex items-center gap-2">
                    <span class="w-6 h-6 bg-blue-100 rounded text-blue-700 text-xs flex items-center justify-center font-black">1</span>
                    Vos informations
                </h2>

                {{-- Type de contribuable --}}
                <div class="mb-4">
                    <label class="text-xs font-bold text-gray-600 uppercase tracking-wide block mb-2">
                        Type d'activité
                    </label>
                    <div class="grid grid-cols-2 gap-2">
                        <button wire:click="$set('typeContribuable', 'commercial')"
                                class="px-3 py-2.5 rounded-xl text-sm font-semibold border-2 transition-all
                                    {{ $typeContribuable === 'commercial'
                                        ? 'border-blue-600 bg-blue-50 text-blue-700'
                                        : 'border-gray-200 text-gray-600 hover:border-gray-300' }}">
                            Commercial / Artisan
                        </button>
                        <button wire:click="$set('typeContribuable', 'proflib')"
                                class="px-3 py-2.5 rounded-xl text-sm font-semibold border-2 transition-all
                                    {{ $typeContribuable === 'proflib'
                                        ? 'border-blue-600 bg-blue-50 text-blue-700'
                                        : 'border-gray-200 text-gray-600 hover:border-gray-300' }}">
                            Prof. Libérale
                        </button>
                    </div>
                    @if($typeContribuable === 'proflib')
                    <p class="text-xs text-blue-600 mt-1.5">
                        ℹ️ Seuil IGS : 30M FCFA pour les professions libérales (médecins, avocats, consultants, architectes)
                    </p>
                    @endif
                </div>

                {{-- CA HT --}}
                <div class="mb-5">
                    <label class="text-xs font-bold text-gray-600 uppercase tracking-wide block mb-2">
                        Chiffre d'Affaires Annuel HT (FCFA)
                    </label>
                    <div class="relative">
                        <input type="number"
                               wire:model.live.debounce.300ms="caHt"
                               placeholder="Ex: 8 000 000"
                               min="0"
                               class="w-full border border-gray-200 rounded-xl px-4 py-3 text-sm
                                      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
                                      @error('caHt') border-red-400 @enderror">
                        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-400 font-medium">FCFA</span>
                    </div>
                    @error('caHt')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                    @if($caHt)
                    <p class="text-xs text-gray-400 mt-1">
                        = {{ number_format((float)$caHt, 0, ',', ' ') }} FCFA HT
                    </p>
                    @endif
                </div>

                {{-- Indications légales --}}
                <div class="bg-gray-50 rounded-xl p-3 text-xs text-gray-600 space-y-1">
                    <p class="font-semibold text-gray-700">📌 Points clés IGS :</p>
                    <p>• Classe 1 : CA < 500 000 FCFA → <strong>Exonéré</strong></p>
                    <p>• Classes 2-7 : 500K — 10M → 20 000 à 300 000 FCFA/an</p>
                    <p>• Classes 8-12 : 10M — 50M → 350K à 2M FCFA/an + DSF</p>
                    <p>• <strong>Abattement CGA 50%</strong> (art. 119 CGI)</p>
                    <p>• AIR 2,2% prélevé imputable sur IGS N+1</p>
                </div>
            </div>
        </div>

        {{-- Résultat droite --}}
        <div class="lg:col-span-3">
            @if($erreur)
                <div class="bg-red-50 border border-red-200 rounded-xl p-4 text-red-700 text-sm">
                    ⚠️ {{ $erreur }}
                </div>
            @elseif($resultat === null)
                {{-- État vide --}}
                <div class="bg-white rounded-2xl border border-dashed border-gray-200 p-12 text-center">
                    <div class="text-5xl mb-4">🧮</div>
                    <p class="text-gray-500">Saisissez votre CA HT pour calculer votre IGS instantanément.</p>
                </div>

            @elseif(!($resultat['eligible_igs'] ?? true))
                {{-- Hors IGS --}}
                <div class="bg-orange-50 border border-orange-200 rounded-2xl p-6">
                    <h3 class="font-bold text-orange-800 text-lg mb-2">⚠️ CA supérieur au seuil IGS</h3>
                    <p class="text-orange-700 text-sm mb-4">{{ $resultat['message'] }}</p>
                    <div class="bg-white rounded-xl p-4">
                        <p class="text-sm font-semibold text-gray-700">Régime applicable :</p>
                        <p class="text-lg font-black text-orange-700">
                            {{ $resultat['regime'] === 'REEL_SIMPLIFIE' ? 'Réel Simplifié (CA 50M — 100M)' : 'Réel Normal (CA > 100M)' }}
                        </p>
                    </div>
                    <a href="{{ route('simulateurs.reclassement') }}" class="mt-4 inline-block text-orange-700 underline text-sm">
                        → Simuler le passage au régime réel
                    </a>
                </div>

            @else
                {{-- Résultat IGS --}}
                <div class="space-y-4">

                    {{-- Badge classe --}}
                    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                        <div class="flex items-start justify-between mb-4">
                            <div>
                                <p class="text-xs text-gray-500 font-medium uppercase tracking-wide">Votre classe IGS 2026</p>
                                <div class="flex items-center gap-3 mt-1">
                                    <span class="text-5xl font-black {{ $resultat['badge_couleur'] === 'green' ? 'text-green-600' : 'text-blue-600' }}">
                                        Classe {{ $resultat['classe'] }}
                                    </span>
                                    @if($resultat['classe'] === 1)
                                        <span class="bg-green-100 text-green-700 text-sm font-bold px-3 py-1 rounded-full">EXONÉRÉ</span>
                                    @else
                                        <span class="bg-{{ $resultat['badge_couleur'] }}-100 text-{{ $resultat['badge_couleur'] }}-700
                                                      text-sm font-bold px-3 py-1 rounded-full">
                                            {{ $resultat['badge_couleur'] === 'green' ? 'Classes 1-7' : 'Classes 8-12' }}
                                        </span>
                                    @endif
                                </div>
                            </div>
                            @if($resultat['dsf_obligatoire'])
                            <div class="bg-orange-100 text-orange-700 text-xs font-bold px-3 py-2 rounded-xl text-center">
                                ⚠️ DSF<br>obligatoire
                            </div>
                            @endif
                        </div>

                        {{-- Montants clés --}}
                        @if($resultat['montant_igs'] > 0)
                        <div class="grid grid-cols-2 gap-3">
                            <div class="bg-gray-50 rounded-xl p-4">
                                <p class="text-xs text-gray-500 mb-1">IGS annuel sans CGA</p>
                                <p class="text-xl font-black text-gray-900">
                                    {{ number_format($resultat['montant_igs'], 0, ',', ' ') }}<span class="text-sm font-normal ml-1">FCFA</span>
                                </p>
                            </div>
                            <div class="bg-green-50 border border-green-200 rounded-xl p-4">
                                <p class="text-xs text-green-700 mb-1 font-semibold">✅ Avec abattement CGA 50%</p>
                                <p class="text-xl font-black text-green-700">
                                    {{ number_format($resultat['montant_igs_cga'], 0, ',', ' ') }}<span class="text-sm font-normal ml-1">FCFA</span>
                                </p>
                            </div>
                        </div>

                        <div class="mt-3 bg-blue-50 rounded-xl px-4 py-3 flex justify-between items-center">
                            <span class="text-sm font-semibold text-blue-800">💰 Économie annuelle avec adhésion CGA</span>
                            <span class="text-lg font-black text-blue-800">
                                {{ number_format($resultat['economie_cga'], 0, ',', ' ') }} FCFA
                            </span>
                        </div>
                        @endif
                    </div>

                    {{-- Détails : acomptes, AIR --}}
                    @if($resultat['montant_igs'] > 0)
                    <div class="bg-white rounded-2xl border border-gray-100 p-5">
                        <h3 class="font-bold text-gray-900 text-sm mb-3">Acomptes trimestriels 2026</h3>
                        <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
                            @foreach($resultat['echeances'] as $ech)
                            <div class="bg-gray-50 rounded-lg p-2.5 text-center">
                                <p class="text-xs font-bold text-gray-700">{{ $ech['code'] }}</p>
                                <p class="text-xs text-gray-500">{{ $ech['date'] }}</p>
                                @if($ech['code'] !== 'ANNUEL')
                                <p class="text-xs font-semibold text-blue-700 mt-1">
                                    {{ number_format($resultat['acompte_trimestriel'], 0, ',', ' ') }} FCFA
                                </p>
                                @endif
                            </div>
                            @endforeach
                        </div>

                        <div class="mt-3 pt-3 border-t border-gray-100 text-xs text-gray-500 space-y-1">
                            <p>• AIR 2,2% estimé (si grands comptes) : <strong>{{ number_format($resultat['air_estime_2_2'], 0, ',', ' ') }} FCFA</strong> — imputable sur IGS N+1 (Arrêté MINFI/DGI 00001/2026)</p>
                        </div>
                    </div>
                    @endif

                    {{-- Obligations persistantes --}}
                    <div class="bg-white rounded-2xl border border-gray-100 p-5">
                        <h3 class="font-bold text-gray-900 text-sm mb-3">⚠️ Obligations non libérées par l'IGS</h3>
                        <ul class="space-y-1.5">
                            @foreach($resultat['obligations'] as $obligation)
                            <li class="flex items-start gap-2 text-xs text-gray-600">
                                <span class="text-orange-500 flex-shrink-0 mt-0.5">•</span>
                                {{ $obligation }}
                            </li>
                            @endforeach
                        </ul>
                    </div>

                    {{-- Actions --}}
                    <div class="flex gap-3">
                        <button wire:click="exporterPdf"
                                class="flex-1 bg-blue-700 hover:bg-blue-800 text-white font-semibold py-3 rounded-xl
                                       text-sm transition-colors flex items-center justify-center gap-2">
                            <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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                            Exporter PDF
                        </button>
                        <a href="{{ route('adhesion') }}"
                           class="flex-1 bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 rounded-xl
                                  text-sm transition-colors text-center">
                            Adhérer au CGA →
                        </a>
                    </div>
                </div>
            @endif
        </div>
    </div>

    {{-- Tableau complet barème --}}
    <div class="mt-14">
        <h2 class="text-xl font-black text-gray-900 mb-6 text-center">
            Barème complet IGS 2026 — Art. C40 CGI Cameroun
        </h2>
        <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-blue-800 text-white text-xs">
                        <th class="px-4 py-3 text-left">Classe</th>
                        <th class="px-4 py-3 text-right">CA HT Min (FCFA)</th>
                        <th class="px-4 py-3 text-right">CA HT Max (FCFA)</th>
                        <th class="px-4 py-3 text-right">IGS Annuel</th>
                        <th class="px-4 py-3 text-right font-bold text-green-300">Avec CGA (-50%)</th>
                        <th class="px-4 py-3 text-center">DSF</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($bareme as $b)
                    <tr class="{{ $loop->even ? 'bg-gray-50' : 'bg-white' }}
                               {{ ($resultat['eligible_igs'] ?? false) && ($resultat['classe'] ?? 0) == $b['classe'] ? 'ring-2 ring-blue-500 ring-inset' : '' }}">
                        <td class="px-4 py-2.5">
                            <span class="w-8 h-8 rounded-lg text-xs font-bold text-white inline-flex items-center justify-center
                                {{ $b['classe'] <= 7 ? 'bg-green-500' : 'bg-blue-600' }}">
                                {{ $b['classe'] }}
                            </span>
                        </td>
                        <td class="px-4 py-2.5 text-right text-gray-600">
                            {{ number_format($b['ca_min'], 0, ',', ' ') }}
                        </td>
                        <td class="px-4 py-2.5 text-right text-gray-600">
                            {{ number_format($b['ca_max'], 0, ',', ' ') }}
                        </td>
                        <td class="px-4 py-2.5 text-right font-medium">
                            {{ $b['montant_igs'] == 0 ? 'Exonéré' : number_format($b['montant_igs'], 0, ',', ' ').' FCFA' }}
                        </td>
                        <td class="px-4 py-2.5 text-right font-bold text-green-700">
                            {{ $b['montant_igs_cga'] == 0 ? 'Exonéré' : number_format($b['montant_igs_cga'], 0, ',', ' ').' FCFA' }}
                        </td>
                        <td class="px-4 py-2.5 text-center text-{{ $b['dsf_obligatoire'] ? 'orange-600' : 'gray-300' }} font-bold">
                            {{ $b['dsf_obligatoire'] ? '✓' : '—' }}
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <p class="text-xs text-gray-400 mt-3 text-center">
            Source : Art. C40 du CGI Cameroun 2026 — Loi n°2025/012 — Arrêté MINFI/DGI n°00001/2026
        </p>
    </div>

</div>