@props([
    'financialData' => [],
    'components' => [],
    'zScore' => null,
    'category' => null,
    'editable' => false,
    'showDetails' => true,
    'onCalculate' => null
])

<div class="zscore-calculator card" 
     x-data="zScoreCalculator({{ json_encode($financialData) }}, {{ json_encode($components) }}, {{ $zScore ?? 'null' }}, '{{ $category ?? '' }}')"
     x-init="init()">
    
    <!-- Header -->
    <div class="card-header flex items-center justify-between">
        <div class="flex items-center">
            <i class="fas fa-calculator text-primary-600 mr-2"></i>
            <h3 class="text-lg font-semibold">Kalkulator Altman Z-Score</h3>
        </div>
        
        <!-- Category Badge -->
        <template x-if="category">
            <div :class="{
                'badge-success': category === 'safe',
                'badge-warning': category === 'warning',
                'badge-danger': category === 'danger'
            }" x-text="categoryLabel"></div>
        </template>
    </div>
    
    <!-- Input Section (if editable) -->
    @if($editable)
        <div class="mb-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
            <h4 class="font-medium mb-3">Input Data Keuangan</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="label-field">Aset Lancar</label>
                    <x-currency-input name="aset_lancar" x-model="financial.aset_lancar" />
                </div>
                <div>
                    <label class="label-field">Aset Tetap</label>
                    <x-currency-input name="aset_tetap" x-model="financial.aset_tetap" />
                </div>
                <div>
                    <label class="label-field">Utang Lancar</label>
                    <x-currency-input name="utang_lancar" x-model="financial.utang_lancar" />
                </div>
                <div>
                    <label class="label-field">Utang Jangka Panjang</label>
                    <x-currency-input name="utang_jangka_panjang" x-model="financial.utang_jangka_panjang" />
                </div>
                <div>
                    <label class="label-field">Pendapatan</label>
                    <x-currency-input name="pendapatan" x-model="financial.pendapatan" />
                </div>
                <div>
                    <label class="label-field">Biaya Operasional</label>
                    <x-currency-input name="biaya_operasional" x-model="financial.biaya_operasional" />
                </div>
                <div>
                    <label class="label-field">Prive</label>
                    <x-currency-input name="prive" x-model="financial.prive" />
                </div>
            </div>
            
            <button @click="calculate" class="btn-primary mt-4">
                <i class="fas fa-sync-alt mr-2" :class="{ 'animate-spin': loading }"></i>
                Hitung Z-Score
            </button>
        </div>
    @endif
    
    <!-- Results Section -->
    <div class="space-y-6">
        <!-- Z-Score Gauge -->
        <div class="flex justify-center">
            <x-zscore-gauge :score="$zScore ?? 0" size="lg" />
        </div>
        
        <!-- Component Table -->
        @if($showDetails)
            <div>
                <h4 class="font-medium mb-3">Komponen Z-Score</h4>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-900">
                            <tr>
                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Variabel</th>
                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Rumus</th>
                                <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Nilai</th>
                                <th class="px-4 py-2 text-center text-xs font-medium text-gray-500 uppercase">Status</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                            <!-- X1 -->
                            <tr>
                                <td class="px-4 py-2 font-medium">X1</td>
                                <td class="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">
                                    (Aset Lancar - Utang Lancar) / Total Aset
                                </td>
                                <td class="px-4 py-2 text-right font-mono" x-text="formatNumber(components.x1)">0</td>
                                <td class="px-4 py-2 text-center">
                                    <span :class="{
                                        'badge-success': analysis.x1?.status === 'good',
                                        'badge-warning': analysis.x1?.status === 'warning',
                                        'badge-danger': analysis.x1?.status === 'danger'
                                    }" x-text="analysis.x1?.message || '-'" class="text-xs"></span>
                                </td>
                            </tr>
                            <!-- X2 -->
                            <tr>
                                <td class="px-4 py-2 font-medium">X2</td>
                                <td class="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">
                                    Laba Ditahan / Total Aset
                                </td>
                                <td class="px-4 py-2 text-right font-mono" x-text="formatNumber(components.x2)">0</td>
                                <td class="px-4 py-2 text-center">
                                    <span :class="{
                                        'badge-success': analysis.x2?.status === 'good',
                                        'badge-warning': analysis.x2?.status === 'warning',
                                        'badge-danger': analysis.x2?.status === 'danger'
                                    }" x-text="analysis.x2?.message || '-'" class="text-xs"></span>
                                </td>
                            </tr>
                            <!-- X3 -->
                            <tr>
                                <td class="px-4 py-2 font-medium">X3</td>
                                <td class="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">
                                    Laba Sebelum Pajak / Total Aset
                                </td>
                                <td class="px-4 py-2 text-right font-mono" x-text="formatNumber(components.x3)">0</td>
                                <td class="px-4 py-2 text-center">
                                    <span :class="{
                                        'badge-success': analysis.x3?.status === 'good',
                                        'badge-warning': analysis.x3?.status === 'warning',
                                        'badge-danger': analysis.x3?.status === 'danger'
                                    }" x-text="analysis.x3?.message || '-'" class="text-xs"></span>
                                </td>
                            </tr>
                            <!-- X4 -->
                            <tr>
                                <td class="px-4 py-2 font-medium">X4</td>
                                <td class="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">
                                    Nilai Buku Ekuitas / Total Hutang
                                </td>
                                <td class="px-4 py-2 text-right font-mono" x-text="formatNumber(components.x4)">0</td>
                                <td class="px-4 py-2 text-center">
                                    <span :class="{
                                        'badge-success': analysis.x4?.status === 'good',
                                        'badge-warning': analysis.x4?.status === 'warning',
                                        'badge-danger': analysis.x4?.status === 'danger'
                                    }" x-text="analysis.x4?.message || '-'" class="text-xs"></span>
                                </td>
                            </tr>
                            <!-- X5 -->
                            <tr>
                                <td class="px-4 py-2 font-medium">X5</td>
                                <td class="px-4 py-2 text-sm text-gray-600 dark:text-gray-400">
                                    Pendapatan / Total Aset
                                </td>
                                <td class="px-4 py-2 text-right font-mono" x-text="formatNumber(components.x5)">0</td>
                                <td class="px-4 py-2 text-center">
                                    <span :class="{
                                        'badge-success': analysis.x5?.status === 'good',
                                        'badge-warning': analysis.x5?.status === 'warning',
                                        'badge-danger': analysis.x5?.status === 'danger'
                                    }" x-text="analysis.x5?.message || '-'" class="text-xs"></span>
                                </td>
                            </tr>
                        </tbody>
                        <tfoot class="bg-gray-50 dark:bg-gray-900">
                            <tr>
                                <td colspan="2" class="px-4 py-2 font-bold">Z-Score</td>
                                <td class="px-4 py-2 text-right font-mono font-bold" 
                                    :class="{
                                        'text-success-600': category === 'safe',
                                        'text-warning-600': category === 'warning',
                                        'text-danger-600': category === 'danger'
                                    }" 
                                    x-text="formatNumber(zScore)">0</td>
                                <td class="px-4 py-2"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            
            <!-- Recommendations -->
            <div class="mt-4 p-4 rounded-lg" :class="{
                'bg-success-50 dark:bg-success-900/20': category === 'safe',
                'bg-warning-50 dark:bg-warning-900/20': category === 'warning',
                'bg-danger-50 dark:bg-danger-900/20': category === 'danger'
            }">
                <h4 class="font-medium mb-2">Rekomendasi</h4>
                <ul class="list-disc list-inside space-y-1 text-sm">
                    <template x-for="rec in recommendations" :key="rec">
                        <li x-text="rec" class="text-gray-700 dark:text-gray-300"></li>
                    </template>
                </ul>
            </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
function zScoreCalculator(financialData, components, zScore, category) {
    return {
        financial: financialData,
        components: components,
        zScore: zScore,
        category: category,
        loading: false,
        analysis: {},
        
        init() {
            if (this.zScore !== null) {
                this.analyzeComponents();
            }
        },
        
        get categoryLabel() {
            const labels = {
                'safe': 'Aman',
                'warning': 'Waspada',
                'danger': 'Bahaya'
            };
            return labels[this.category] || this.category;
        },
        
        get recommendations() {
            const recs = {
                'safe': [
                    '✅ Pertahankan kinerja keuangan yang baik',
                    '✅ Pertimbangkan ekspansi bisnis',
                    '✅ Optimalkan penggunaan aset',
                    '✅ Jaga rasio likuiditas'
                ],
                'warning': [
                    '⚠️ Evaluasi struktur modal',
                    '⚠️ Tingkatkan efisiensi operasional',
                    '⚠️ Pantau arus kas',
                    '⚠️ Kurangi ketergantungan utang'
                ],
                'danger': [
                    '🔴 Lakukan tindakan perbaikan segera',
                    '🔴 Restrukturisasi utang',
                    '🔴 Evaluasi strategi bisnis',
                    '🔴 Cari pendanaan tambahan'
                ]
            };
            return recs[this.category] || [];
        },
        
        formatNumber(value) {
            if (value === undefined || value === null) return '0';
            return Number(value).toFixed(4);
        },
        
        async calculate() {
            this.loading = true;
            
            try {
                const response = await fetch('{{ route("api.calculate") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify(this.financial)
                });
                
                const data = await response.json();
                
                if (data.success) {
                    this.components = data.components;
                    this.zScore = data.z_score;
                    this.category = data.category;
                    this.analyzeComponents();
                    
                    // Trigger callback
                    if (this.onCalculate) {
                        this.onCalculate(data);
                    }
                }
            } catch (error) {
                console.error('Calculation error:', error);
                alert('Gagal menghitung Z-Score');
            } finally {
                this.loading = false;
            }
        },
        
        analyzeComponents() {
            // Simple component analysis
            this.analysis = {
                x1: {
                    status: this.components.x1 > 0.3 ? 'good' : (this.components.x1 > 0.1 ? 'warning' : 'danger'),
                    message: this.components.x1 > 0.3 ? 'Baik' : (this.components.x1 > 0.1 ? 'Cukup' : 'Kurang')
                },
                x2: {
                    status: this.components.x2 > 0.2 ? 'good' : (this.components.x2 > 0 ? 'warning' : 'danger'),
                    message: this.components.x2 > 0.2 ? 'Baik' : (this.components.x2 > 0 ? 'Cukup' : 'Kurang')
                },
                x3: {
                    status: this.components.x3 > 0.15 ? 'good' : (this.components.x3 > 0.05 ? 'warning' : 'danger'),
                    message: this.components.x3 > 0.15 ? 'Baik' : (this.components.x3 > 0.05 ? 'Cukup' : 'Kurang')
                },
                x4: {
                    status: this.components.x4 > 1 ? 'good' : (this.components.x4 > 0.5 ? 'warning' : 'danger'),
                    message: this.components.x4 > 1 ? 'Baik' : (this.components.x4 > 0.5 ? 'Cukup' : 'Kurang')
                },
                x5: {
                    status: this.components.x5 > 2 ? 'good' : (this.components.x5 > 1 ? 'warning' : 'danger'),
                    message: this.components.x5 > 2 ? 'Baik' : (this.components.x5 > 1 ? 'Cukup' : 'Kurang')
                }
            };
        }
    };
}
</script>
@endpush