{{-- resources/views/filament/forms/components/historical-comparison.blade.php --}}
<div x-data="historicalComparison(@js($getViewData()))" class="space-y-2">
    <div class="text-sm font-medium text-gray-700 dark:text-gray-300">
        Previous Measurements
    </div>

    <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
        <template x-if="loading">
            <div class="text-center py-4">
                <svg class="animate-spin h-5 w-5 mx-auto text-primary-500" 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>
                <p class="mt-2 text-sm text-gray-500">Loading historical data...</p>
            </div>
        </template>

        <template x-if="!loading && currentResult">
            <div class="space-y-3">
                {{-- Date and navigation --}}
                <div class="flex items-center justify-between">
                    <button
                        @click="previousResult"
                        :disabled="currentIndex === 0"
                        class="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                        </svg>
                    </button>

                    <div class="text-center">
                        <div class="text-sm font-medium" x-text="formatDate(currentResult.created_at)"></div>
                        <div class="text-xs text-gray-500">
                            <span x-text="currentIndex + 1"></span> / <span x-text="historicalResults.length"></span>
                        </div>
                    </div>

                    <button
                        @click="nextResult"
                        :disabled="currentIndex >= historicalResults.length - 1"
                        class="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </button>
                </div>

                {{-- Values display --}}
                <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-600 dark:text-gray-400">Mean G:</span>
                        <span class="font-mono" x-text="formatNumber(currentResult.cyclecount_total, 3)"></span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600 dark:text-gray-400">Mean P:</span>
                        <span class="font-mono" x-text="formatNumber(currentResult.cyclecount_alive, 3)"></span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600 dark:text-gray-400">Count G:</span>
                        <span class="font-mono" x-text="formatNumber(currentResult.cellcount_projected_total, 2) + ' ×10⁸/ml'"></span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600 dark:text-gray-400">Count P:</span>
                        <span class="font-mono" x-text="formatNumber(currentResult.cellcount_projected_alive, 2) + ' ×10⁸/ml'"></span>
                    </div>
                    <div class="flex justify-between border-t pt-2">
                        <span class="text-gray-600 dark:text-gray-400 font-medium">Ratio:</span>
                        <span class="font-mono font-medium" x-text="formatNumber(currentResult.ratio * 100, 1) + '%'"></span>
                    </div>
                </div>
                <button
                    @click="generatePdf(currentResult.result_nr)"
                    class="ml-2 inline-flex items-center px-2 py-1 text-xs bg-red-100 text-red-800 rounded hover:bg-red-200 transition-colors">
                    <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
                    </svg>
                    PDF
                </button>
                {{-- Trend indicator --}}
                <template x-if="previousValue">
                    <div class="border-t pt-2">
                        <div class="text-xs text-gray-500">vs. Previous:</div>
                        <div class="flex items-center gap-2">
                            <template x-if="getTrend() > 0">
                                <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
                                </svg>
                            </template>
                            <template x-if="getTrend() < 0">
                                <svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
                                </svg>
                            </template>
                            <template x-if="getTrend() === 0">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14"></path>
                                </svg>
                            </template>
                            <span class="text-sm" x-text="formatTrend()"></span>
                        </div>
                    </div>
                </template>
            </div>
        </template>
        <template x-if="!loading && !currentResult">
            <div class="text-center py-4 text-sm text-gray-500">
                No historical data available
            </div>
        </template>
    </div>
</div>

<script>
    function historicalComparison(viewData) {
        return {
            loading: true,
            historicalResults: [],
            currentIndex: 0,
            currentResult: null,
            previousValue: null,
            results: [], // Initialize as empty array

            init() {
                this.loadHistoricalData();
            },

            async loadHistoricalData() {
                try {
                    const response = await fetch(`/api/panelresults/historical`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify({
                            samplehead_id: viewData.samplehead_id,
                            test_name: viewData.test_name,
                            current_result_nr: viewData.current_result_nr
                        })
                    });

                    const data = await response.json();
                    this.historicalResults = data.results || [];

                    if (this.historicalResults.length > 0) {
                        this.currentIndex = this.historicalResults.length - 1; // Start with most recent
                        this.updateCurrentResult();
                    }

                } catch (error) {
                    console.error('Error loading historical data:', error);
                } finally {
                    this.loading = false;
                }
            },

            updateCurrentResult() {
                this.currentResult = this.historicalResults[this.currentIndex];
                if (this.currentIndex > 0) {
                    this.previousValue = this.historicalResults[this.currentIndex - 1];
                } else {
                    this.previousValue = null;
                }
            },

            previousResult() {
                if (this.currentIndex > 0) {
                    this.currentIndex--;
                    this.updateCurrentResult();
                }
            },

            nextResult() {
                if (this.currentIndex < this.historicalResults.length - 1) {
                    this.currentIndex++;
                    this.updateCurrentResult();
                }
            },

            formatDate(dateString) {
                const date = new Date(dateString);
                return date.toLocaleDateString('de-DE', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit'
                });
            },

            formatNumber(value, decimals = 2) {
                if (value === null || value === undefined) return 'N/A';
                return parseFloat(value).toFixed(decimals);
            },

            getTrend() {
                if (!this.previousValue || !this.currentResult) return 0;
                const current = this.currentResult.ratio || 0;
                const previous = this.previousValue.ratio || 0;
                return current - previous;
            },

            formatTrend() {
                const trend = this.getTrend();
                if (trend === 0) return 'No change';
                const sign = trend > 0 ? '+' : '';
                return `${sign}${(trend * 100).toFixed(1)}%`;
            },

            async generatePdf(resultNr) {
                // Simple approach - open PDF endpoint in new window
                const url = `/api/generate-panel-pdf?samplehead_id=${viewData.samplehead_id}&result_nr=${resultNr}`;
                window.open(url, '_blank');
            }


        };
    }
</script>