{{-- resources/views/siswa/recommendation-detail.blade.php --}}
@extends('layouts.app')

@section('title', 'Detail Rekomendasi - LearnMood')

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 pb-16 md:pb-0">
    
    <!-- Back Button -->
    <a href="{{ route('siswa.recommendations') }}" class="inline-flex items-center text-gray-600 hover:text-gray-800 mb-4 text-sm md:text-base">
        <svg class="w-4 h-4 mr-1" 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>
        Kembali ke Rekomendasi
    </a>

    <!-- Recommendation Detail Card -->
    <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
        <!-- Header -->
        <div class="bg-gradient-to-r 
            @if($recommendation->category == 'Ringan') from-yellow-500 to-yellow-600
            @elseif($recommendation->category == 'Sedang') from-green-500 to-green-600
            @else from-blue-500 to-blue-600 @endif
            px-4 md:px-8 py-4 md:py-6">
            <div class="flex justify-between items-center">
                <div>
                    <span class="text-white/80 text-xs md:text-sm">{{ $recommendation->recommendation_date->format('l, d F Y') }}</span>
                    <h2 class="text-xl md:text-3xl font-bold text-white mt-1 md:mt-2">Rekomendasi {{ $recommendation->category }}</h2>
                </div>
                <div class="bg-white/20 p-2 md:p-4 rounded-xl md:rounded-2xl shrink-0">
                    @if($recommendation->category == 'Ringan')
                        <span class="text-2xl md:text-4xl">😌</span>
                    @elseif($recommendation->category == 'Sedang')
                        <span class="text-2xl md:text-4xl">😊</span>
                    @else
                        <span class="text-2xl md:text-4xl">🚀</span>
                    @endif
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="p-4 md:p-8">
            <!-- Info Mode -->
            <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:space-x-2 mb-4 md:mb-6">
                <span class="px-2 md:px-3 py-1 rounded-full text-xs md:text-sm
                    @if($recommendation->based_on == 'daily_model') bg-purple-100 text-purple-700
                    @elseif($recommendation->based_on == 'student_pattern') bg-blue-100 text-blue-700
                    @else bg-gray-100 text-gray-700 @endif">
                    @if($recommendation->based_on == 'daily_model')
                        🤖 Diprediksi menggunakan Model Harian
                    @elseif($recommendation->based_on == 'student_pattern')
                        📊 Diprediksi berdasarkan Pola Belajarmu
                    @else
                        📝 Diprediksi menggunakan Aturan Manual
                    @endif
                </span>
                
                @if($recommendation->confidence)
                <span class="text-xs md:text-sm text-gray-500">
                    Keyakinan: {{ round($recommendation->confidence * 100) }}%
                </span>
                @endif
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 md:gap-6 mb-6 md:mb-8">
                <!-- Durasi -->
                <div class="bg-gradient-to-br from-blue-50 to-blue-100 p-4 md:p-6 rounded-xl">
                    <div class="flex items-center justify-between mb-2 md:mb-3">
                        <span class="text-blue-600 font-medium text-sm md:text-base">Durasi</span>
                        <svg class="w-5 h-5 md:w-6 md:h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <p class="text-2xl md:text-3xl font-bold text-gray-800">{{ $recommendation->recommended_minutes }}</p>
                    <p class="text-xs md:text-sm text-gray-500">menit belajar</p>
                </div>

                <!-- Input -->
                <div class="bg-gradient-to-br from-purple-50 to-purple-100 p-4 md:p-6 rounded-xl">
                    <div class="flex items-center justify-between mb-2 md:mb-3">
                        <span class="text-purple-600 font-medium text-sm md:text-base">Input</span>
                        <svg class="w-5 h-5 md:w-6 md:h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                        </svg>
                    </div>
                    <p class="text-xs md:text-sm text-gray-600 mb-1">Mood: {{ $recommendation->activityLog->mood }}</p>
                    <p class="text-xs md:text-sm text-gray-600 mb-1">Durasi: {{ $recommendation->activityLog->duration_minutes }} menit</p>
                    <p class="text-xs md:text-sm text-gray-600">Tidur: {{ $recommendation->activityLog->sleep_duration }} jam</p>
                </div>

                <!-- Rekomendasi -->
                <div class="bg-gradient-to-br 
                    @if($recommendation->category == 'Ringan') from-yellow-50 to-yellow-100
                    @elseif($recommendation->category == 'Sedang') from-green-50 to-green-100
                    @else from-blue-50 to-blue-100 @endif
                    p-4 md:p-6 rounded-xl sm:col-span-2 md:col-span-1">
                    <div class="flex items-center justify-between mb-2 md:mb-3">
                        <span class="
                            @if($recommendation->category == 'Ringan') text-yellow-600
                            @elseif($recommendation->category == 'Sedang') text-green-600
                            @else text-blue-600 @endif
                            font-medium text-sm md:text-base">Kategori</span>
                        @if($recommendation->category == 'Ringan')
                            <span class="text-yellow-600 text-xl md:text-2xl">😌</span>
                        @elseif($recommendation->category == 'Sedang')
                            <span class="text-green-600 text-xl md:text-2xl">😊</span>
                        @else
                            <span class="text-blue-600 text-xl md:text-2xl">🚀</span>
                        @endif
                    </div>
                    <p class="text-2xl md:text-3xl font-bold 
                        @if($recommendation->category == 'Ringan') text-yellow-600
                        @elseif($recommendation->category == 'Sedang') text-green-600
                        @else text-blue-600 @endif">
                        {{ $recommendation->category }}
                    </p>
                </div>
            </div>

            <!-- Notes -->
            <div class="bg-gray-50 rounded-xl p-4 md:p-6 mb-6 md:mb-8">
                <h3 class="font-semibold text-gray-800 mb-2 md:mb-3 text-sm md:text-base">📝 Catatan Personal</h3>
                <p class="text-gray-700 leading-relaxed text-sm md:text-base">{{ $recommendation->notes }}</p>
            </div>

            <!-- Detail Model Input -->
            @if($recommendation->model_input)
            <div class="border-t pt-4 md:pt-6">
                <h3 class="font-semibold text-gray-800 mb-3 md:mb-4 text-sm md:text-base">🔍 Detail Prediksi</h3>
                
                @php
                    $modelInput = is_string($recommendation->model_input) 
                        ? json_decode($recommendation->model_input, true) 
                        : $recommendation->model_input;
                @endphp

                @if(is_array($modelInput))
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
                        @foreach($modelInput as $key => $value)
                            @if(!is_array($value))
                            <div class="flex items-center justify-between p-2 md:p-3 bg-gray-50 rounded-lg">
                                <span class="text-xs md:text-sm text-gray-600">{{ str_replace('_', ' ', ucfirst($key)) }}:</span>
                                <span class="font-medium text-gray-800 text-xs md:text-sm">
                                    @if(is_numeric($value))
                                        {{ $value }}
                                    @elseif(is_bool($value))
                                        {{ $value ? 'Ya' : 'Tidak' }}
                                    @else
                                        {{ $value }}
                                    @endif
                                </span>
                            </div>
                            @endif
                        @endforeach
                    </div>

                    <!-- Pattern Analysis Detail -->
                    @if(isset($modelInput['pattern_analysis']) && is_array($modelInput['pattern_analysis']))
                        <div class="mt-4 p-3 md:p-4 bg-blue-50 rounded-lg">
                            <h4 class="font-medium text-blue-800 mb-2 md:mb-3 text-sm md:text-base">📊 Analisis Pola 7 Hari:</h4>
                            <div class="grid grid-cols-2 gap-2 md:gap-3">
                                @foreach($modelInput['pattern_analysis'] as $key => $value)
                                    <div class="flex justify-between">
                                        <span class="text-xs md:text-sm text-blue-700">{{ ucfirst($key) }}:</span>
                                        <span class="font-medium text-blue-900 text-xs md:text-sm">{{ $value }}</span>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                @endif
            </div>
            @endif

            <!-- Actions -->
            <div class="flex flex-col sm:flex-row gap-3 mt-6 md:mt-8 pt-4 md:pt-6 border-t">
                <a href="{{ route('siswa.input') }}" 
                   class="sm:flex-1 bg-blue-600 text-white text-center px-4 md:px-6 py-2 md:py-3 rounded-lg hover:bg-blue-700 transition-colors text-sm md:text-base">
                    Input Aktivitas Baru
                </a>
                <a href="{{ route('siswa.visualization') }}" 
                   class="sm:flex-1 px-4 md:px-6 py-2 md:py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors text-sm md:text-base text-center">
                    Lihat Visualisasi
                </a>
            </div>
        </div>
    </div>
</div>
@endsection