@extends('layouts.app')

@section('title', 'Disease Detection - KrishiBondhu AI')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-4xl font-bold text-gray-900 flex items-center space-x-3">
                <i class="fas fa-microscope text-green-600"></i>
                <span>Disease Detection AI</span>
            </h1>
            <p class="text-gray-600 mt-2">Upload crop images for AI-powered disease analysis</p>
        </div>
    </div>

    <!-- Upload Section -->
    <div class="bg-gradient-to-br from-green-50 to-blue-50 rounded-2xl p-8 border-2 border-dashed border-green-300">
        <div class="text-center">
            <div id="dropzone" class="space-y-4">
                <div class="text-6xl mb-4">
                    <i class="fas fa-cloud-upload-alt text-green-600"></i>
                </div>
                <h2 class="text-2xl font-bold text-gray-900">Upload Crop Image</h2>
                <p class="text-gray-600">Drag & drop or click to select</p>
                
                <form id="uploadForm" enctype="multipart/form-data" class="mt-6">
                    @csrf
                    <input type="file" id="imageInput" name="image" accept="image/*" class="hidden">
                    <button type="button" onclick="document.getElementById('imageInput').click()" class="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 font-bold transition">
                        <i class="fas fa-file-upload"></i> Choose Image
                    </button>
                    
                    <div class="mt-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Select Crop (Optional)</label>
                        <select name="crop_id" class="w-full border border-gray-300 rounded-lg px-4 py-2">
                            <option value="">-- Select a crop --</option>
                            @foreach($crops as $crop)
                                <option value="{{ $crop->id }}">{{ $crop->crop_name }} ({{ $crop->crop_name_bn }})</option>
                            @endforeach
                        </select>
                    </div>

                    <button type="submit" id="submitBtn" class="mt-6 px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-bold transition hidden">
                        Analyze Image
                    </button>
                </form>

                <!-- Loading Indicator -->
                <div id="loadingIndicator" class="hidden mt-6">
                    <div class="flex justify-center items-center space-x-2">
                        <div class="w-3 h-3 bg-green-600 rounded-full pulse-animation"></div>
                        <div class="w-3 h-3 bg-green-600 rounded-full pulse-animation" style="animation-delay: 0.1s"></div>
                        <div class="w-3 h-3 bg-green-600 rounded-full pulse-animation" style="animation-delay: 0.2s"></div>
                    </div>
                    <p class="text-green-600 font-bold mt-2">🤖 AI is analyzing your image...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Scans -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2">
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h2 class="text-2xl font-bold text-gray-900 mb-4">Recent Scans</h2>
                
                <div class="space-y-4">
                    @forelse($scans as $scan)
                        <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg hover:bg-green-50 transition cursor-pointer" onclick="location.href='{{ route('disease.show', $scan->id) }}'">
                            <img src="{{ asset('storage/' . $scan->image_thumbnail_path) }}" alt="Scan" class="w-16 h-16 rounded-lg object-cover">
                            
                            <div class="flex-1">
                                <div class="flex items-center space-x-2 mb-2">
                                    <h3 class="font-bold text-gray-900">{{ $scan->disease_name_detected }}</h3>
                                    @if($scan->is_disease)
                                        <span class="px-3 py-1 bg-red-100 text-red-700 rounded-full text-xs font-bold">Disease Detected</span>
                                    @else
                                        <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold">Healthy</span>
                                    @endif
                                </div>
                                <div class="flex items-center space-x-4 text-sm text-gray-600">
                                    <span>
                                        <strong>Confidence:</strong>
                                        <div class="w-24 h-2 bg-gray-200 rounded-full inline-block ml-1">
                                            <div class="h-full bg-blue-500 rounded-full" style="width: {{ $scan->confidence_percentage }}%"></div>
                                        </div>
                                        {{ $scan->confidence_percentage }}%
                                    </span>
                                    <span><strong>Status:</strong> <span class="capitalize">{{ $scan->scan_status }}</span></span>
                                </div>
                            </div>

                            <div class="text-right">
                                <p class="text-xs text-gray-500">{{ $scan->created_at->diffForHumans() }}</p>
                            </div>
                        </div>
                    @empty
                        <p class="text-center text-gray-500 py-8">No scans yet. Upload an image to get started!</p>
                    @endforelse
                </div>

                {{ $scans->links() }}
            </div>
        </div>

        <!-- Statistics -->
        <div class="space-y-4">
            <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-green-600">
                <h3 class="text-sm font-bold text-gray-600 uppercase">Total Scans</h3>
                <p class="text-3xl font-bold text-green-600 mt-2">{{ auth()->user()->imageScans()->count() }}</p>
            </div>

            <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-red-600">
                <h3 class="text-sm font-bold text-gray-600 uppercase">Diseases Detected</h3>
                <p class="text-3xl font-bold text-red-600 mt-2">{{ auth()->user()->imageScans()->where('is_disease', true)->count() }}</p>
            </div>

            <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-blue-600">
                <h3 class="text-sm font-bold text-gray-600 uppercase">Average Confidence</h3>
                <p class="text-3xl font-bold text-blue-600 mt-2">
                    {{ round(auth()->user()->imageScans()->avg('confidence_percentage') ?? 0, 1) }}%
                </p>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
// Drag & Drop
const dropzone = document.getElementById('dropzone');
const imageInput = document.getElementById('imageInput');
const uploadForm = document.getElementById('uploadForm');
const submitBtn = document.getElementById('submitBtn');
const loadingIndicator = document.getElementById('loadingIndicator');

dropzone.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropzone.classList.add('border-green-600', 'bg-green-100');
});

dropzone.addEventListener('dragleave', () => {
    dropzone.classList.remove('border-green-600', 'bg-green-100');
});

dropzone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropzone.classList.remove('border-green-600', 'bg-green-100');
    imageInput.files = e.dataTransfer.files;
    submitBtn.classList.remove('hidden');
    showImagePreview();
});

imageInput.addEventListener('change', () => {
    submitBtn.classList.remove('hidden');
    showImagePreview();
});

function showImagePreview() {
    const file = imageInput.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
            const preview = document.createElement('img');
            preview.src = e.target.result;
            preview.className = 'max-h-64 mx-auto rounded-lg mt-4';
            const existing = dropzone.querySelector('img');
            if (existing) existing.remove();
            dropzone.appendChild(preview);
        };
        reader.readAsDataURL(file);
    }
}

// Upload Form Submission
uploadForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData(uploadForm);
    submitBtn.classList.add('hidden');
    loadingIndicator.classList.remove('hidden');

    try {
        const response = await axios.post('/api/disease-detection/upload', formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        });

        loadingIndicator.classList.add('hidden');
        
        if (response.data.success) {
            // Show result modal
            showResultModal(response.data.result);
            // Reload page after 2 seconds
            setTimeout(() => location.reload(), 2000);
        }
    } catch (error) {
        loadingIndicator.classList.add('hidden');
        alert('Error: ' + (error.response?.data?.message || error.message));
        submitBtn.classList.remove('hidden');
    }
});

function showResultModal(result) {
    const modal = document.createElement('div');
    modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
    modal.innerHTML = `
        <div class="bg-white rounded-xl shadow-2xl p-8 max-w-md w-full mx-4 fade-in">
            <div class="text-center">
                ${result.is_disease ? 
                    `<div class="text-6xl mb-4">🚨</div>
                    <h2 class="text-2xl font-bold text-red-600">Disease Detected!</h2>
                    <p class="text-gray-600 mt-2">${result.disease_name}</p>
                    <p class="text-sm text-gray-500 mt-4">Confidence: ${result.confidence}%</p>` :
                    `<div class="text-6xl mb-4">✅</div>
                    <h2 class="text-2xl font-bold text-green-600">Healthy Plant</h2>
                    <p class="text-gray-600 mt-2">No diseases detected</p>`
                }
            </div>
        </div>
    `;
    document.body.appendChild(modal);
}
</script>
@endpush