@extends('layouts.app')

@section('content')
<div class="w-full flex flex-col gap-8">

    <!-- Hero Section: Premium Medical Double Column Layout -->
    <div class="bg-gradient-to-br from-[#EAF4FF]/80 via-[#EAF4FF]/40 to-white border border-[#DDE7F3] rounded-[24px] p-8 md:p-12 shadow-sm grid grid-cols-1 md:grid-cols-2 gap-8 items-center relative overflow-hidden">
        <!-- Floating grid background effect -->
        <div class="absolute inset-0 opacity-10 bg-[radial-gradient(#0B6CF0_1.5px,transparent_1.5px)] [background-size:24px_24px] pointer-events-none"></div>
        
        <div class="text-left relative z-10">
            <div class="inline-flex items-center gap-1.5 bg-white border border-[#0B6CF0]/20 text-primary px-3.5 py-1.5 rounded-full text-[11px] font-bold uppercase tracking-wider mb-5">
                <i data-lucide="shield-check" class="w-3.5 h-3.5 text-primary stroke-[2.5]"></i>
                🤖 Sistem Identifikasi Berbasis AI
            </div>
            <h1 class="text-4xl md:text-5xl font-extrabold text-slate-900 tracking-tight leading-tight mb-4">
                Identifikasi Awal <br class="hidden md:inline"><span class="text-primary bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent">Penyakit Kulit Menular</span>
            </h1>
            <p class="text-slate-650 text-sm md:text-base leading-relaxed mb-6 max-w-xl font-medium">
                Unggah gambar kulit atau gunakan kamera secara langsung untuk melakukan identifikasi awal penyakit kulit menular menggunakan model CNN MobileNetV2. Sistem ini dapat mengidentifikasi tiga jenis penyakit kulit menular, yaitu Scabies, Impetigo, dan Tinea. Hasil yang diberikan merupakan prediksi AI dan bukan diagnosis medis.
            </p>
        </div>
        
        <div class="flex items-center justify-center relative z-10">
            <!-- Large Medical Background Circle -->
            <div class="w-48 h-48 md:w-56 md:w-56 rounded-full bg-white border border-[#DDE7F3] shadow-xl shadow-slate-100 flex items-center justify-center relative group">
                <div class="absolute inset-2.5 rounded-full border border-dashed border-[#0B6CF0]/30 animate-[spin_40s_linear_infinite]"></div>
                <!-- Pulsing Outer Scanner Border -->
                <div class="absolute inset-0 rounded-full border-2 border-primary/20 animate-ping opacity-30"></div>
                <div class="w-20 h-20 rounded-2xl bg-secondary flex items-center justify-center text-primary group-hover:scale-110 transition-transform duration-300">
                    <i data-lucide="image" class="w-10 h-10 stroke-[1.5]"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Dashboard Section: 60% Left, 40% Right grid layout -->
    <div class="grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-8 items-start">
        
        <!-- Card 1: Data Pasien & File Upload (60%) -->
        <form id="scanForm" action="{{ route('scan.process') }}" method="POST" enctype="multipart/form-data"
            class="bg-white border border-[#E5EEF8] rounded-[18px] p-6 md:p-8 shadow-lg hover:-translate-y-1 transition-all duration-300 flex flex-col gap-6 relative">
            @csrf
            
            <div class="flex items-center justify-between border-b border-slate-100 pb-4">
                <h3 class="text-xl font-bold text-slate-800 flex items-center gap-2">
                    <i data-lucide="file-text" class="w-5 h-5 text-primary"></i>
                    Data Pasien
                </h3>
                <span class="text-[10px] bg-slate-100 text-slate-500 font-bold px-2.5 py-1 rounded-md uppercase tracking-wider">ID FORM: #DS-SCAN</span>
            </div>
            
            <!-- Full Name Textfield -->
            <div>
                <label for="patient_name" class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Nama Lengkap</label>
                <input type="text" id="patient_name" name="patient_name" required
                    class="w-full px-5 py-3.5 border border-[#DDE7F3] rounded-xl focus:border-primary focus:ring-4 focus:ring-primary/10 outline-none text-sm transition-all duration-300 font-semibold text-slate-800 placeholder:text-slate-400"
                    placeholder="Masukkan nama lengkap pasien">
            </div>
            
            <!-- Skin Imagery Upload Zone -->
            <div>
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2">Akuisisi Gambar Kulit</label>
                
                <!-- Method Tab Selector -->
                <div class="flex items-center justify-center gap-2 mb-4 bg-slate-100 p-1 rounded-full border border-slate-200/50 max-w-[320px] mx-auto relative z-10">
                    <button type="button" id="tabUpload"
                        class="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold transition-all bg-white text-primary shadow-sm">
                        <i data-lucide="upload" class="w-3.5 h-3.5"></i> 📁 Unggah Gambar
                    </button>
                    <button type="button" id="tabCamera"
                        class="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold transition-all text-slate-500 hover:text-slate-800">
                        <i data-lucide="camera" class="w-3.5 h-3.5"></i> 📷 Kamera Langsung
                    </button>
                </div>
                
                <div id="dropzone" class="border-2 border-dashed border-[#DDE7F3] bg-slate-50/50 hover:bg-[#EAF4FF]/25 hover:border-primary rounded-xl p-8 text-center cursor-pointer relative overflow-hidden min-h-[260px] flex flex-col items-center justify-center group">
                    <input type="file" id="imageInput" name="image" required
                        class="absolute inset-0 opacity-0 cursor-pointer z-20" accept="image/*">
                    
                    <!-- Drag & Drop default placeholder -->
                    <div id="uploadPlaceholder" class="flex flex-col items-center justify-center transition duration-200 pointer-events-none relative z-10">
                        <div class="w-14 h-14 rounded-full bg-[#EAF4FF] text-primary flex items-center justify-center mb-3.5 border border-primary/10 group-hover:scale-110 group-hover:bg-primary group-hover:text-white transition-all duration-300">
                            <i data-lucide="camera" class="w-6 h-6 stroke-[2]"></i>
                        </div>
                        <p class="text-sm font-bold text-slate-800">Seret gambar ke area ini atau klik untuk memilih gambar</p>
                        <p class="text-xs text-slate-405 mt-2 font-semibold">Format yang didukung: JPG, JPEG, PNG</p>
                        <p class="text-[10px] text-slate-400 font-semibold mt-0.5">Ukuran maksimum: 10 MB</p>
                        <p class="text-[11px] text-primary font-bold mt-4 max-w-md leading-relaxed px-4">Pastikan gambar memiliki pencahayaan yang baik dan fokus agar hasil identifikasi lebih akurat.</p>
                    </div>

                    <!-- Live Camera view container -->
                    <div id="cameraContainer" class="hidden w-full flex-col items-center justify-center gap-4 relative z-30">
                        <div class="relative w-full max-w-sm rounded-xl overflow-hidden border border-slate-200/80 bg-black aspect-[4/3] flex items-center justify-center">
                            <video id="cameraStream" autoplay playsinline muted class="w-full h-full object-cover"></video>
                            
                            <!-- Scanning pulse line overlay on top of video -->
                            <div class="absolute inset-x-0 h-0.5 bg-primary/70 shadow-[0_0_8px_1px_#0B6CF0] animate-[bounce_3s_infinite] pointer-events-none"></div>
                        </div>
                        
                        <div class="flex flex-wrap items-center justify-center gap-3">
                            <!-- Stream Active Controls -->
                            <button type="button" id="captureBtn" class="flex items-center gap-1.5 px-5 py-2.5 bg-primary hover:bg-[#0057D8] text-white rounded-full text-xs font-bold transition-all shadow-md">
                                <i data-lucide="aperture" class="w-4.5 h-4.5"></i> 📸 Ambil Foto
                            </button>
                            <button type="button" id="switchCameraBtn" class="hidden flex items-center justify-center w-9 h-9 border border-slate-200 rounded-full hover:bg-slate-50 transition text-slate-500" title="Ganti Kamera">
                                <i data-lucide="refresh-cw" class="w-4.5 h-4.5"></i> 🔄 Ganti Kamera
                            </button>
                            
                            <!-- Snap Frozen Controls -->
                            <button type="button" id="retakeBtn" class="hidden flex items-center gap-1.5 px-5 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-full text-xs font-bold transition-all shadow-sm">
                                <i data-lucide="rotate-ccw" class="w-4 h-4"></i> 🔁 Ambil Ulang
                            </button>
                            <button type="button" id="usePhotoBtn" class="hidden flex items-center gap-1.5 px-5 py-2.5 bg-emerald-500 hover:bg-emerald-600 text-white rounded-full text-xs font-bold transition-all shadow-md animate-pulse">
                                <i data-lucide="check" class="w-4 h-4"></i> ✅ Gunakan Foto
                            </button>
                        </div>
                    </div>

                    <!-- Progress indicator during simulation -->
                    <div id="progressWrapper" class="hidden w-full max-w-xs flex-col items-center pointer-events-none relative z-10">
                        <div class="w-full bg-slate-100 rounded-full h-2 overflow-hidden border border-slate-200/80 mb-2">
                            <div id="progressBar" class="bg-primary h-full w-0 transition-all duration-300"></div>
                        </div>
                        <p class="text-[11px] font-bold text-primary">Mengunggah gambar... <span id="progressText">0%</span></p>
                    </div>
                    
                    <!-- Preview template -->
                    <div id="previewContainer" class="hidden flex-col items-center justify-center relative z-30">
                        <div class="relative">
                            <img id="imagePreview" class="max-h-52 max-w-full rounded-xl border border-slate-200 shadow-md object-contain p-1 bg-white">
                            <button type="button" id="removeImageBtn" class="absolute -top-3.5 -right-3.5 w-8 h-8 rounded-full bg-rose-500 border-2 border-white text-white flex items-center justify-center hover:bg-rose-600 transition shadow-md pointer-events-auto z-30" title="Hapus Gambar">
                                <i data-lucide="x" class="w-4 h-4"></i>
                            </button>
                        </div>
                        <p class="text-xs font-bold text-primary mt-4 flex items-center gap-1.5 justify-center">
                            <span class="inline-block w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse border-2 border-white shadow-sm shadow-emerald-400/50"></span>
                            Gambar terpilih. Klik atau seret gambar lain untuk mengubah.
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- Hidden canvas for camera snapshot capture -->
            <canvas id="cameraCanvas" class="hidden"></canvas>
            
            <!-- hidden inputs for database submit -->
            <input type="hidden" id="ai_diagnosis" name="ai_diagnosis">
            <input type="hidden" id="ai_confidence" name="ai_confidence">

            <!-- Card Bottom Bar: Pulse status dot & primary button -->
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pt-5 border-t border-slate-100">
                <div class="flex items-center gap-2.5">
                    <span class="w-3 h-3 rounded-full bg-amber-500 animate-pulse border-2 border-white shadow-[0_0_10px_2px_rgba(245,158,11,0.35)] transition-all duration-300" id="statusDot"></span>
                    <p id="modelStatus" class="text-xs font-bold text-slate-650">Memuat model AI...</p>
                </div>
                
                <button type="button" id="btnScan" onclick="runAiInBrowser()"
                    class="btn-ripple w-full sm:w-auto px-8 py-3.5 bg-primary hover:bg-[#0057D8] text-white transition-all duration-300 rounded-xl font-bold text-sm text-center flex items-center justify-center gap-2 shadow-md shadow-blue-500/10 hover:shadow-blue-500/20 transform hover:-translate-y-0.5 active:translate-y-0 disabled:opacity-50 disabled:pointer-events-none disabled:transform-none">
                    <i data-lucide="search" class="w-4 h-4 stroke-[2.5]"></i>
                    🔍 Mulai Identifikasi
                </button>
            </div>
        </form>

        <!-- Card 2: Proses Identifikasi Timeline & Disclaimer (40%) -->
        <div class="bg-white border border-[#E5EEF8] rounded-[18px] p-6 md:p-8 shadow-lg hover:-translate-y-1 transition-all duration-300 flex flex-col gap-6">
            <div class="border-b border-slate-100 pb-4">
                <h3 class="text-xl font-bold text-slate-800 flex items-center gap-2">
                    <i data-lucide="activity" class="w-5 h-5 text-primary"></i>
                    Proses Identifikasi
                </h3>
            </div>
            
            <!-- Vertical Timeline -->
            <div class="relative pl-10 flex flex-col gap-6 text-left py-2">
                <!-- Timeline vertical connecting line -->
                <div class="absolute top-4 left-5 bottom-4 w-0.5 bg-[#DDE7F3]"></div>
                
                <!-- Step 1 -->
                <div class="relative">
                    <span class="absolute -left-10 w-10 h-10 rounded-full bg-secondary border border-primary/20 flex items-center justify-center font-bold text-primary text-sm shadow-sm">1</span>
                    <div>
                        <h4 class="font-extrabold text-slate-800 text-sm">Akuisisi Gambar</h4>
                        <p class="text-xs text-slate-500 mt-1 leading-relaxed font-semibold">
                            Pengguna mengunggah gambar kulit atau mengambil foto secara langsung menggunakan kamera perangkat.
                        </p>
                    </div>
                </div>

                <!-- Step 2 -->
                <div class="relative">
                    <span class="absolute -left-10 w-10 h-10 rounded-full bg-secondary border border-primary/20 flex items-center justify-center font-bold text-primary text-sm shadow-sm">2</span>
                    <div>
                        <h4 class="font-extrabold text-slate-800 text-sm">Analisis Artificial Intelligence</h4>
                        <p class="text-xs text-slate-500 mt-1 leading-relaxed font-semibold">
                            Model CNN MobileNetV2 melakukan ekstraksi fitur citra kulit dan mengidentifikasi karakteristik penyakit kulit berdasarkan data hasil pelatihan.
                        </p>
                    </div>
                </div>

                <!-- Step 3 -->
                <div class="relative">
                    <span class="absolute -left-10 w-10 h-10 rounded-full bg-secondary border border-primary/20 flex items-center justify-center font-bold text-primary text-sm shadow-sm">3</span>
                    <div>
                        <h4 class="font-extrabold text-slate-800 text-sm">Hasil Identifikasi</h4>
                        <p class="text-xs text-slate-500 mt-1 leading-relaxed font-semibold">
                            Sistem menampilkan hasil prediksi berupa jenis penyakit, nilai confidence, persentase probabilitas setiap kelas, dan rekomendasi awal penanganan.
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- Warning Disclaimer Card -->
            <div class="bg-amber-50/70 border border-amber-200/50 rounded-xl p-4 flex gap-3 text-left">
                <i data-lucide="alert-triangle" class="w-5 h-5 text-amber-600 shrink-0 mt-0.5"></i>
                <div class="flex flex-col gap-1">
                    <strong class="text-xs text-amber-900 font-bold">⚠ Informasi Penting</strong>
                    <p class="text-[11px] font-semibold text-amber-800 leading-relaxed">
                        Hasil identifikasi yang diberikan oleh sistem merupakan identifikasi awal berdasarkan model Artificial Intelligence dan bukan merupakan diagnosis medis. Untuk memperoleh diagnosis yang akurat serta penanganan yang tepat, pengguna tetap disarankan berkonsultasi dengan dokter atau tenaga kesehatan.
                    </p>
                </div>
            </div>
        </div>
        
    </div>

</div>

<!-- Loading Overlay during AI scan -->
<div id="loadingOverlay" class="fixed inset-0 z-50 bg-slate-900/40 backdrop-blur-sm hidden flex-col items-center justify-center">
    <div class="bg-white p-8 rounded-3xl border border-slate-100 shadow-2xl flex flex-col items-center text-center max-w-sm mx-4 animate-in fade-in zoom-in duration-300">
        <div class="w-16 h-16 rounded-full border-4 border-slate-100 border-t-primary animate-spin mb-4"></div>
        <h4 class="font-extrabold text-slate-850 text-lg">Menganalisis Gambar</h4>
        <p id="loadingSubtext" class="text-xs text-slate-500 mt-2 font-semibold leading-relaxed">Sedang menganalisis gambar...</p>
    </div>
</div>

<!-- Toast Notification container -->
<div id="toastNotification" class="fixed bottom-6 right-6 z-50 bg-white border border-[#DDE7F3] rounded-2xl p-4 shadow-xl flex items-center gap-3 max-w-sm translate-y-20 opacity-0 transition-all duration-300">
    <div class="w-8 h-8 rounded-full bg-emerald-150 border border-emerald-300 text-emerald-600 flex items-center justify-center">
        <i data-lucide="check-circle-2" class="w-4 h-4"></i>
    </div>
    <div>
        <p id="toastMessage" class="text-xs font-bold text-slate-800">Model AI siap digunakan.</p>
    </div>
</div>

<script>
    window.addEventListener('DOMContentLoaded', () => {
        let model;
        const tf = window.tf;
        const classNames = ['Impetigo', 'Scabies', 'Tinea'];
        
        const btn = document.getElementById('btnScan');
        const modelStatus = document.getElementById('modelStatus');
        const statusDot = document.getElementById('statusDot');
        
        const imageInput = document.getElementById('imageInput');
        const imagePreview = document.getElementById('imagePreview');
        const uploadPlaceholder = document.getElementById('uploadPlaceholder');
        const previewContainer = document.getElementById('previewContainer');
        const removeImageBtn = document.getElementById('removeImageBtn');
        
        const dropzone = document.getElementById('dropzone');
        const progressWrapper = document.getElementById('progressWrapper');
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');
        
        const loadingOverlay = document.getElementById('loadingOverlay');
        const loadingSubtext = document.getElementById('loadingSubtext');
        const toast = document.getElementById('toastNotification');
        const toastMessage = document.getElementById('toastMessage');

        // Live Camera components
        const tabUpload = document.getElementById('tabUpload');
        const tabCamera = document.getElementById('tabCamera');
        const cameraContainer = document.getElementById('cameraContainer');
        const cameraStream = document.getElementById('cameraStream');
        const captureBtn = document.getElementById('captureBtn');
        const switchCameraBtn = document.getElementById('switchCameraBtn');
        const cameraCanvas = document.getElementById('cameraCanvas');
        
        const retakeBtn = document.getElementById('retakeBtn');
        const usePhotoBtn = document.getElementById('usePhotoBtn');
        
        let activeTab = 'upload'; // 'upload' or 'camera'
        let cameraStreamObj = null;
        let currentFacingMode = "environment"; // default to back camera
        let tempPhotoBlob = null;

        // Skin Pixel detection function using RGB rules
        function checkSkinPixelRatio(imageElement) {
            try {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                
                // Use a smaller scale to speed up pixel analysis (100x100 is plenty of samples)
                canvas.width = 100;
                canvas.height = 100;
                ctx.drawImage(imageElement, 0, 0, 100, 100);
                
                const imgData = ctx.getImageData(0, 0, 100, 100);
                const data = imgData.data;
                let skinPixels = 0;
                const totalPixels = 10000;
                
                for (let i = 0; i < data.length; i += 4) {
                    const r = data[i];
                    const g = data[i + 1];
                    const b = data[i + 2];
                    
                    // Lenient RGB Skin Color rules optimized for macro/hand/finger photos under neutral/cool light
                    if (
                        r > 60 && g > 40 && b > 20 &&
                        r > g && r > b &&
                        (r - b) > 10
                    ) {
                        skinPixels++;
                    }
                }
                
                const ratio = skinPixels / totalPixels;
                console.log(`Skin pixel ratio detected: ${(ratio * 100).toFixed(2)}%`);
                return ratio;
            } catch (e) {
                console.error("Gagal mendeteksi warna kulit:", e);
                return 1.0; // Fallback to pass if canvas reading fails (e.g. CORS)
            }
        }

        // Toast Helper
        function showToast(message, isSuccess = true) {
            toastMessage.textContent = message;
            toast.className = "fixed bottom-6 right-6 z-50 bg-white border border-[#DDE7F3] rounded-2xl p-4 shadow-xl flex items-center gap-3 max-w-sm translate-y-0 opacity-100 transition-all duration-300";
            
            const iconWrapper = toast.querySelector('div');
            if (isSuccess) {
                iconWrapper.className = "w-8 h-8 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-600 flex items-center justify-center shrink-0";
                iconWrapper.innerHTML = '<i data-lucide="check-circle-2" class="w-4.5 h-4.5"></i>';
            } else {
                iconWrapper.className = "w-8 h-8 rounded-full bg-rose-50 border border-rose-200 text-rose-600 flex items-center justify-center shrink-0";
                iconWrapper.innerHTML = '<i data-lucide="alert-circle" class="w-4.5 h-4.5"></i>';
            }
            lucide.createIcons();
            
            setTimeout(() => {
                toast.className = "fixed bottom-6 right-6 z-50 bg-white border border-[#DDE7F3] rounded-2xl p-4 shadow-xl flex items-center gap-3 max-w-sm translate-y-20 opacity-0 transition-all duration-300";
            }, 3500);
        }

        // Initialize TensorFlow model
        async function initModel() {
           try {
                if (!tf) {
                    throw new Error('TensorFlow.js belum dimuat. Periksa bundle Vite atau koneksi asset.');
                }

                console.log('Memuat model MobileNetV2...');
                modelStatus.textContent = 'Memuat model AI...';
                statusDot.className = 'w-3 h-3 rounded-full bg-amber-500 animate-pulse border-2 border-white shadow-[0_0_10px_2px_rgba(245,158,11,0.35)]';
                
                // Load model with Cache Busting
                const versiBaru = new Date().getTime(); 
                model = await tf.loadGraphModel(`/model/model.json?v=${versiBaru}`);
                
                console.log('✅ Model MobileNetV2 sukses dimuat!');
                modelStatus.textContent = 'Model AI siap digunakan.';
                statusDot.className = 'w-3 h-3 rounded-full bg-emerald-500 border-2 border-white shadow-[0_0_10px_2px_rgba(16,185,129,0.35)]';
                btn.dataset.modelReady = 'true';
                
                btn.disabled = false;
                btn.innerHTML = '<i data-lucide="search" class="w-4 h-4 stroke-[2.5]"></i> 🔍 Mulai Identifikasi';
                lucide.createIcons();
                showToast('Model AI berhasil dimuat & siap digunakan.', true);
            } catch (error) {
                console.error('Gagal memuat file model AI:', error);
                modelStatus.textContent = 'Gagal memuat model: ' + (error?.message || error);
                statusDot.className = 'w-3 h-3 rounded-full bg-rose-500 border-2 border-white shadow-[0_0_10px_2px_rgba(244,63,94,0.35)]';
                btn.dataset.modelReady = 'false';
                btn.innerHTML = 'Gagal memuat model';
                btn.disabled = false;
                showToast('Gagal memuat model AI: ' + (error?.message || error), false);
            }
        }

        // Camera capture lifecycle handlers
        async function startCameraStream() {
            try {
                if (cameraStreamObj) {
                    stopCameraStream();
                }
                
                const constraints = {
                    video: {
                        facingMode: { ideal: currentFacingMode },
                        width: { ideal: 640 },
                        height: { ideal: 480 }
                    },
                    audio: false
                };
                
                cameraStreamObj = await navigator.mediaDevices.getUserMedia(constraints);
                cameraStream.srcObject = cameraStreamObj;
                cameraStream.play();
                
                // Reset controls state
                captureBtn.classList.remove('hidden');
                retakeBtn.classList.add('hidden');
                usePhotoBtn.classList.add('hidden');
                
                // Check if multiple camera devices exist
                const devices = await navigator.mediaDevices.enumerateDevices();
                const videoDevices = devices.filter(d => d.kind === 'videoinput');
                if (videoDevices.length > 1) {
                    switchCameraBtn.classList.remove('hidden');
                    switchCameraBtn.dataset.multipleCameras = 'true';
                } else {
                    switchCameraBtn.classList.add('hidden');
                    switchCameraBtn.dataset.multipleCameras = 'false';
                }
                
                showToast('Kamera aktif. Silakan posisikan lesi kulit pada bidang pemindaian.');
            } catch (err) {
                console.error('Gagal membuka kamera stream:', err);
                showToast('Tidak dapat memutar kamera. Gunakan pilihan Unggah Gambar.', false);
                switchToUploadMode();
            }
        }

        function stopCameraStream() {
            if (cameraStreamObj) {
                cameraStreamObj.getTracks().forEach(track => track.stop());
                cameraStreamObj = null;
            }
            if (cameraStream) {
                cameraStream.srcObject = null;
            }
        }

        function switchToUploadMode() {
            activeTab = 'upload';
            stopCameraStream();
            
            // Tab styles
            tabUpload.className = "flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold transition-all bg-white text-primary shadow-sm";
            tabCamera.className = "flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold transition-all text-slate-500 hover:text-slate-800";
            
            cameraContainer.classList.add('hidden');
            cameraContainer.classList.remove('flex');
            
            // Hide camera input but show upload zone pointer
            imageInput.classList.remove('hidden');
            
            if (imageInput.files.length > 0) {
                previewContainer.classList.remove('hidden');
                previewContainer.classList.add('flex');
                uploadPlaceholder.classList.add('hidden');
            } else {
                previewContainer.classList.add('hidden');
                previewContainer.classList.remove('flex');
                uploadPlaceholder.classList.remove('hidden');
            }
        }

        function switchToCameraMode() {
            activeTab = 'camera';
            
            // Tab styles
            tabCamera.className = "flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold transition-all bg-white text-primary shadow-sm";
            tabUpload.className = "flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold transition-all text-slate-500 hover:text-slate-800";
            
            uploadPlaceholder.classList.add('hidden');
            imageInput.classList.add('hidden'); // Disable drag drops when streaming camera
            
            if (imageInput.files.length > 0) {
                cameraContainer.classList.add('hidden');
                cameraContainer.classList.remove('flex');
                previewContainer.classList.remove('hidden');
                previewContainer.classList.add('flex');
            } else {
                previewContainer.classList.add('hidden');
                previewContainer.classList.remove('flex');
                cameraContainer.classList.remove('hidden');
                cameraContainer.classList.add('flex');
                startCameraStream();
            }
        }

        tabUpload.addEventListener('click', switchToUploadMode);
        tabCamera.addEventListener('click', switchToCameraMode);

        switchCameraBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            currentFacingMode = currentFacingMode === "environment" ? "user" : "environment";
            startCameraStream();
        });

        // Capture photo snapshot
        captureBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            
            if (!cameraStreamObj) return;
            
            // Freeze stream
            cameraStream.pause();
            
            const context = cameraCanvas.getContext('2d');
            cameraCanvas.width = cameraStream.videoWidth || 640;
            cameraCanvas.height = cameraStream.videoHeight || 480;
            
            // Draw video frame to hidden canvas
            context.drawImage(cameraStream, 0, 0, cameraCanvas.width, cameraCanvas.height);
            
            cameraCanvas.toBlob((blob) => {
                if (!blob) return;
                tempPhotoBlob = blob;
                
                // Show retake and use buttons, hide active stream buttons
                captureBtn.classList.add('hidden');
                switchCameraBtn.classList.add('hidden');
                retakeBtn.classList.remove('hidden');
                usePhotoBtn.classList.remove('hidden');
                
                showToast('Foto berhasil ditangkap! Tekan Gunakan Foto untuk memproses.');
            }, 'image/png');
        });

        // Retake snapshot
        retakeBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            tempPhotoBlob = null;
            cameraStream.play();
            
            retakeBtn.classList.add('hidden');
            usePhotoBtn.classList.add('hidden');
            captureBtn.classList.remove('hidden');
            if (switchCameraBtn.dataset.multipleCameras === 'true') {
                switchCameraBtn.classList.remove('hidden');
            }
        });

        // Use photo snapshot
        usePhotoBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            
            if (!tempPhotoBlob) return;
            
            // Convert blob to File Object
            const file = new File([tempPhotoBlob], "captured_skin_photo.png", { type: "image/png" });
            
            // Inject captured file to image input element
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(file);
            imageInput.files = dataTransfer.files;
            
            stopCameraStream();
            cameraContainer.classList.add('hidden');
            
            handleFileSelection(file);
        });

        // Simulates progress bar upload
        function handleFileSelection(file) {
            if (!file) return;
            
            // Validate Image type
            if (!file.type.match('image.*')) {
                alert('File harus berupa gambar!');
                return;
            }

            uploadPlaceholder.classList.add('hidden');
            previewContainer.classList.add('hidden');
            progressWrapper.classList.remove('hidden');
            progressBar.style.width = '0%';
            progressText.textContent = '0%';

            let val = 0;
            const interval = setInterval(() => {
                val += 10;
                progressBar.style.width = val + '%';
                progressText.textContent = val + '%';
                if (val >= 100) {
                    clearInterval(interval);
                    
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        imagePreview.src = event.target.result;
                        progressWrapper.classList.add('hidden');
                        previewContainer.classList.remove('hidden');
                        previewContainer.classList.add('flex');
                        showToast('Gambar berhasil diunggah.');
                    };
                    reader.readAsDataURL(file);
                }
            }, 60);
        }

        // Drag & Drop events
        ['dragenter', 'dragover'].forEach(eventName => {
            dropzone.addEventListener(eventName, (e) => {
                e.preventDefault();
                e.stopPropagation();
                if (activeTab === 'upload') {
                    dropzone.classList.add('bg-[#EAF4FF]/40', 'border-primary', 'shadow-[0_0_20px_2.5px_rgba(11,108,240,0.15)]');
                }
            }, false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            dropzone.addEventListener(eventName, (e) => {
                e.preventDefault();
                e.stopPropagation();
                dropzone.classList.remove('bg-[#EAF4FF]/40', 'border-primary', 'shadow-[0_0_20px_2.5px_rgba(11,108,240,0.15)]');
            }, false);
        });

        dropzone.addEventListener('drop', (e) => {
            if (activeTab !== 'upload') return;
            const dt = e.dataTransfer;
            const files = dt.files;
            if (files.length > 0) {
                imageInput.files = files;
                handleFileSelection(files[0]);
            }
        }, false);

        imageInput.addEventListener('change', function(e) {
            handleFileSelection(e.target.files[0]);
        });

        removeImageBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            imageInput.value = '';
            imagePreview.src = '';
            previewContainer.classList.add('hidden');
            previewContainer.classList.remove('flex');
            
            if (activeTab === 'camera') {
                cameraContainer.classList.remove('hidden');
                cameraContainer.classList.add('flex');
                startCameraStream();
            } else {
                uploadPlaceholder.classList.remove('hidden');
            }
            showToast('Gambar telah dihapus.', false);
        });

        // Button Ripple Effect
        document.querySelectorAll('.btn-ripple').forEach(button => {
            button.addEventListener('click', function(e) {
                const ripple = document.createElement('span');
                ripple.className = 'absolute w-3 h-3 bg-white/30 rounded-full pointer-events-none transform -translate-x-1/2 -translate-y-1/2 transition-all duration-700 ease-out scale-0';
                
                const rect = button.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                ripple.style.left = x + 'px';
                ripple.style.top = y + 'px';
                
                button.appendChild(ripple);
                
                setTimeout(() => {
                    ripple.classList.add('scale-[35]');
                    ripple.classList.add('opacity-0');
                }, 10);
                
                setTimeout(() => {
                    ripple.remove();
                }, 800);
            });
        });

        btn.dataset.modelReady = 'loading';
        btn.disabled = true;
        initModel();

        // Run AI analysis
        window.runAiInBrowser = async function() {
            const nameVal = document.getElementById('patient_name').value;
            const fileVal = imageInput.files[0];

            if (!nameVal || !fileVal) {
                showToast('Harap lengkapi nama pasien dan unggah foto kulit!', false);
                return;
            }

            if (!model) {
                showToast('Model AI sedang memuat. Tunggu beberapa saat lalu coba lagi.', false);
                return;
            }

            // Skin color check
            const skinRatio = checkSkinPixelRatio(imagePreview);
            if (skinRatio < 0.15) {
                showToast('Gambar tidak terdeteksi sebagai kulit manusia. Harap unggah foto kulit yang jelas.', false);
                return;
            }

            btn.disabled = true;
            btn.innerHTML = '<i class="inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></i> Processing...';
            loadingOverlay.classList.remove('hidden');
            loadingOverlay.classList.add('flex');

            // Dynamic loading progression texts
            const loadingTexts = [
                "Sedang menganalisis gambar...",
                "Mengekstraksi fitur citra...",
                "Menjalankan model CNN MobileNetV2...",
                "Mengidentifikasi jenis penyakit...",
                "Menampilkan hasil prediksi..."
            ];
            
            let textIdx = 0;
            const textInterval = setInterval(() => {
                if (textIdx < loadingTexts.length) {
                    loadingSubtext.textContent = loadingTexts[textIdx];
                    textIdx++;
                } else {
                    clearInterval(textInterval);
                }
            }, 240);

            // Add artificial delay for loading spinner realism
            setTimeout(async () => {
                try {
                    const tensor = tf.browser.fromPixels(imagePreview)
                        .resizeBilinear([224, 224])
                        .toFloat()
                        .div(tf.scalar(255.0))
                        .expandDims();

                    const predictions = await model.predict(tensor).data();

                    let maxIdx = 0;
                    let maxProb = 0;
                    for (let i = 0; i < predictions.length; i++) {
                        if (predictions[i] > maxProb) {
                            maxProb = predictions[i];
                            maxIdx = i;
                        }
                    }

                    const confidence = Math.round(maxProb * 100);
                    if (confidence < 70) {
                        document.getElementById('ai_diagnosis').value = "Tidak Teridentifikasi";
                    } else {
                        document.getElementById('ai_diagnosis').value = classNames[maxIdx];
                    }
                    document.getElementById('ai_confidence').value = confidence;

                    document.getElementById('scanForm').submit();
                } catch (error) {
                    console.error('Terjadi kesalahan saat proses prediksi:', error);
                    showToast('Terjadi kesalahan saat memproses gambar. Cek console untuk detailnya.', false);
                    btn.disabled = false;
                    btn.innerHTML = '<i data-lucide="search" class="w-4 h-4 stroke-[2.5]"></i> 🔍 Mulai Identifikasi';
                    lucide.createIcons();
                    loadingOverlay.classList.add('hidden');
                    loadingOverlay.classList.remove('flex');
                }
            }, 1200);
        };
    });
</script>
@endsection