{{-- resources/views/filament/forms/components/calculated-fields-display.blade.php --}}

<div class="calculated-fields-container" 
     wire:key="calculated-fields-{{ $update_key ?? 'default' }}"
     x-data="{ lastUpdated: null }"
     x-init="lastUpdated = new Date().toLocaleTimeString()">
    @if(empty($calculated_fields))
        <div class="empty-state">
            <div class="empty-state-icon">
                <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                </svg>
            </div>
            <p class="text-sm text-gray-500 mt-2">Keine berechneten Felder verfügbar</p>
            <p class="text-xs text-gray-400 mt-1">Wählen Sie ein Panel aus, um berechnete Felder anzuzeigen</p>
        </div>
    @else
        <div class="calculated-fields-list space-y-3" x-data="{ isUpdating: false }" x-init="isUpdating = true; setTimeout(() => isUpdating = false, 500)">
            @foreach($calculated_fields as $fieldId => $fieldData)
                @php
                    $field = \App\Models\PcrpanelField::find($fieldId);
                    $hasError = !empty($fieldData['error']);
                    $isCalculated = $fieldData['value'] !== null && !$hasError;
                @endphp
                
                <div class="calculated-field-item {{ $hasError ? 'error' : ($isCalculated ? 'calculated' : 'pending') }}"
                     x-bind:class="{ 'updating': isUpdating }"
                     x-transition:enter="transition ease-out duration-300"
                     x-transition:enter-start="opacity-0 transform scale-95"
                     x-transition:enter-end="opacity-100 transform scale-100">
                    
                    {{-- Field Header --}}
                    <div class="field-header">
                        <div class="field-title-row">
                            <h4 class="field-name">{{ $field->name ?? 'Unknown Field' }}</h4>
                            <div class="field-badges">
                                <span class="field-type-badge {{ $field->type ?? 'unknown' }}">
                                    {{ ucfirst($field->type ?? 'unknown') }}
                                </span>
                                @if($hasError)
                                    <span class="error-badge">
                                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 012 0v4a1 1 0 11-2 0V5z" clip-rule="evenodd"></path>
                                        </svg>
                                    </span>
                                @else
                                    <div class="update-indicator" x-show="isUpdating" x-transition>
                                        <svg class="w-3 h-3 animate-spin text-blue-500" 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>
                                    </div>
                                @endif
                            </div>
                        </div>
                        
                        @if($field->description)
                            <p class="field-description">{{ $field->description }}</p>
                        @endif
                    </div>

                    {{-- Field Value --}}
                    <div class="field-value-section">
                        <div class="field-value {{ $hasError ? 'error' : ($isCalculated ? 'calculated' : 'pending') }}">
                            @if($hasError)
                                <span class="error-text">{{ $fieldData['error'] }}</span>
                            @else
                                <span class="value-text" x-bind:class="{ 'animate-pulse': isUpdating }">
                                    {{ $fieldData['display_value'] }}
                                </span>
                            @endif
                        </div>
                        
                        {{-- Field Source Information --}}
                        <div class="field-source">
                            <svg class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <span class="source-text">{{ $fieldData['source_description'] }}</span>
                        </div>
                    </div>

                    {{-- Progress/Status Indicator --}}
                    <div class="field-status">
                        @if($hasError)
                            <div class="status-bar error-bar"></div>
                        @elseif($isCalculated)
                            <div class="status-bar success-bar"></div>
                        @else
                            <div class="status-bar pending-bar"></div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Summary Footer --}}
        <div class="summary-footer">
            @php
                $totalFields = count($calculated_fields);
                $calculatedFieldsCount = collect($calculated_fields)->filter(fn($data) => $data['value'] !== null && empty($data['error']))->count();
                $errorFields = collect($calculated_fields)->filter(fn($data) => !empty($data['error']))->count();
            @endphp
            
            <div class="summary-stats">
                <div class="stat-item">
                    <span class="stat-number">{{ $calculatedFieldsCount }}</span>
                    <span class="stat-label">Berechnet</span>
                </div>
                
                @if($errorFields > 0)
                    <div class="stat-item error">
                        <span class="stat-number">{{ $errorFields }}</span>
                        <span class="stat-label">Fehler</span>
                    </div>
                @endif
                
                <div class="stat-item total">
                    <span class="stat-number">{{ $totalFields }}</span>
                    <span class="stat-label">Total</span>
                </div>
            </div>
            
            {{-- Last Updated Indicator --}}
            <div class="last-updated text-center" x-show="lastUpdated">
                <span class="text-xs text-gray-400">
                    Zuletzt aktualisiert: <span x-text="lastUpdated"></span>
                </span>
            </div>
        </div>
    @endif
</div>

<style>
.calculated-fields-container {
    @apply bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 shadow-sm;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.empty-state {
    @apply text-center py-8;
}

.empty-state-icon {
    @apply flex justify-center;
}

.calculated-field-item {
    @apply bg-gray-50 dark:bg-gray-900 rounded-lg p-3 border transition-all duration-200;
    border-left-width: 4px;
}

.calculated-field-item.updating {
    @apply transform scale-105;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.calculated-field-item.calculated {
    @apply border-green-200 dark:border-green-800;
    border-left-color: rgb(34 197 94); /* green-500 */
}

.calculated-field-item.error {
    @apply border-red-200 dark:border-red-800;
    border-left-color: rgb(239 68 68); /* red-500 */
}

.calculated-field-item.pending {
    @apply border-yellow-200 dark:border-yellow-800;
    border-left-color: rgb(245 158 11); /* amber-500 */
}

.field-header {
    @apply mb-3;
}

.field-title-row {
    @apply flex items-center justify-between mb-1;
}

.field-name {
    @apply text-sm font-semibold text-gray-900 dark:text-gray-100;
}

.field-badges {
    @apply flex items-center gap-1;
}

.field-type-badge {
    @apply px-2 py-1 text-xs font-medium rounded;
}

.field-type-badge.sum {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200;
}

.field-type-badge.ratio {
    @apply bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200;
}

.field-type-badge.unknown {
    @apply bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200;
}

.error-badge {
    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 px-1 py-1 rounded;
}

.update-indicator {
    @apply text-blue-500;
}

.field-description {
    @apply text-xs text-gray-600 dark:text-gray-400;
}

.field-value-section {
    @apply space-y-2;
}

.field-value {
    @apply text-center py-2 px-3 rounded font-mono text-lg font-semibold transition-all duration-300;
}

.field-value.calculated {
    @apply bg-green-50 text-green-800 dark:bg-green-900 dark:text-green-200;
}

.field-value.error {
    @apply bg-red-50 text-red-800 dark:bg-red-900 dark:text-red-200;
}

.field-value.pending {
    @apply bg-yellow-50 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
}

.value-updating {
    @apply animate-pulse;
}

.error-text {
    @apply text-sm font-normal;
}

.field-source {
    @apply flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400;
}

.source-text {
    @apply truncate;
}

.field-status {
    @apply mt-2;
}

.status-bar {
    @apply h-1 rounded-full transition-all duration-300;
}

.success-bar {
    @apply bg-green-500;
}

.error-bar {
    @apply bg-red-500;
}

.pending-bar {
    @apply bg-yellow-500;
}

.summary-footer {
    @apply mt-4 pt-3 border-t border-gray-200 dark:border-gray-700;
}

.summary-stats {
    @apply flex justify-around text-center mb-2;
}

.stat-item {
    @apply flex flex-col;
}

.stat-item.error .stat-number {
    @apply text-red-600 dark:text-red-400;
}

.stat-item.total .stat-number {
    @apply text-gray-600 dark:text-gray-400;
}

.stat-number {
    @apply text-lg font-bold text-green-600 dark:text-green-400;
}

.stat-label {
    @apply text-xs text-gray-500 dark:text-gray-400;
}

.last-updated {
    @apply text-center;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .calculated-fields-container {
        position: static;
        max-height: none;
    }
}
</style>