@php
    $htmlContent = nl2br(e(trim($aiInsight)));
    $formatHeader = function($text) {
        return preg_replace(
            '/(?:<br\s*\/?>\s*){0,2}\[(Analisis Data|Dampak Bisnis|Rekomendasi Aksi|Data Analysis|Business Impact|Action Recommendations)\](?:<br\s*\/?>\s*){0,2}/i',
            '<strong class="block text-slate-800 font-extrabold mt-5 mb-2 text-xs uppercase tracking-wider text-gold-600">[$1]</strong>',
            $text
        );
    };
    $fullHtmlFormatted = $formatHeader($htmlContent);
@endphp

<!-- AI Financial Insights Card (Owner/Admin Only) -->
<div class="mb-6 page-fade-in stagger-1 w-full">
    <div class="bg-gradient-to-r from-gold-50/50 to-amber-50/20 rounded-3xl border border-gold-100/80 p-6 md:p-8 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-6 relative overflow-hidden">
        <!-- Sparkle design background element -->
        <div class="absolute right-0 top-0 w-32 h-32 bg-gold-200/10 rounded-full blur-2xl pointer-events-none"></div>
        
        <div class="flex flex-col sm:flex-row items-center gap-4 sm:gap-5 relative z-10 flex-1 w-full">
            <div class="w-12 h-12 rounded-2xl bg-gold-600/10 flex items-center justify-center text-gold-600 shrink-0 shadow-sm border border-gold-200/30">
                <!-- Inline SVG Bot Icon to ensure perfect rendering without script dependencies -->
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-gold-600">
                    <path d="M12 8V4H8"/>
                    <rect width="16" height="12" x="4" y="8" rx="2"/>
                    <path d="M2 14h2"/>
                    <path d="M20 14h2"/>
                    <path d="M15 13v2"/>
                    <path d="M9 13v2"/>
                </svg>
            </div>
            
            <div class="space-y-2 flex-grow w-full" x-data="{ expanded: false }">
                <div class="flex flex-wrap items-center gap-2">
                    <span class="text-[10px] font-black bg-gold-500 text-slate-950 px-2.5 py-1 rounded-full uppercase tracking-wider">AI Financial Advisory</span>
                    <span class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Real-time Analysis</span>
                </div>
                <h4 class="text-base font-bold text-slate-900 leading-snug font-jakarta">
                    {{ $locale == 'en' ? 'Financial Strategy & Cash Flow' : 'Taktik Keuangan & Arus Kas' }}
                </h4>
                
                <!-- Display Narrative Area -->
                <div class="mt-2 w-full">
                    <!-- Text (when not loading) -->
                    <div wire:loading.remove wire:target="refreshAnalysis">
                        <div 
                            class="text-sm text-slate-600 leading-relaxed max-w-4xl whitespace-pre-line transition-all duration-300 pr-2 break-words"
                            :class="expanded ? '' : 'line-clamp-2'"
                        >
                            {!! $fullHtmlFormatted !!}
                        </div>
                        
                        <!-- Toggle Button -->
                        <div class="mt-2.5 flex justify-start">
                            <button 
                                @click="expanded = !expanded" 
                                class="inline-flex items-center gap-1.5 text-xs font-bold text-gold-600 hover:text-gold-700 transition-colors focus:outline-none"
                            >
                                <span x-text="expanded ? '{{ $locale == 'en' ? 'Show Less' : 'Lihat Lebih Sedikit' }}' : '{{ $locale == 'en' ? 'Show More' : 'Lihat Selengkapnya' }}'"></span>
                                <!-- Inline SVG Chevron Down/Up -->
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5 transition-transform duration-300" :class="expanded ? 'rotate-180' : ''">
                                    <path d="m6 9 6 6 6-6"/>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <!-- Pulse Skeleton Loading (while updating/loading) -->
                    <div wire:loading wire:target="refreshAnalysis" class="space-y-4 animate-pulse w-full py-2" x-cloak>
                        <div class="space-y-2">
                            <div class="h-3.5 bg-gold-200/50 rounded w-1/5"></div>
                            <div class="h-3 bg-slate-200/65 rounded w-full"></div>
                            <div class="h-3 bg-slate-200/65 rounded w-11/12"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Side: Refresh Button -->
        <div class="flex items-center gap-3 shrink-0 relative z-10 w-full md:w-auto">
            <button wire:click="refreshAnalysis" class="w-full md:w-auto justify-center px-4 py-2.5 bg-white border border-slate-200 hover:border-gold-200 hover:text-gold-600 rounded-xl text-xs font-bold shadow-sm transition-all flex items-center gap-2 active:scale-95">
                <span wire:loading.remove wire:target="refreshAnalysis" class="flex items-center gap-2">
                    <!-- Inline SVG Refresh Icon -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5">
                        <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
                        <path d="M3 3v5h5"/>
                        <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/>
                        <path d="M16 16h5v5"/>
                    </svg>
                    <span>{{ $locale == 'en' ? 'Refresh Analysis' : 'Perbarui Analisis' }}</span>
                </span>
                <span wire:loading wire:target="refreshAnalysis" class="flex items-center gap-2" x-cloak>
                    <svg class="animate-spin h-3.5 w-3.5 text-gold-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span>{{ $locale == 'en' ? 'Analyzing...' : 'Menganalisis...' }}</span>
                </span>
            </button>
        </div>
    </div>
</div>

<script>
    // Re-initialize Lucide Icons after Livewire updates
    document.addEventListener('livewire:navigated', () => {
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });
</script>