{% extends "base.html" %}

{% block title %}Recognize Plant{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto bg-white p-8 rounded-2xl shadow-xl mt-8">
    <h1 class="text-3xl font-bold text-[#4e6b50] mb-6 text-center">Plant Recognition</h1>
        <!-- File Upload -->
        <div class="bg-[#f8f9fa] p-6 rounded-xl border border-[#e6ebe0]">
            <h2 class="text-xl font-semibold text-[#4e6b50] mb-4">Upload Image</h2>
            <div class="mb-8">
                <h3 class="text-lg font-semibold mb-4">Take a Photo</h3>
                <div class="relative">
                    <video id="camera" class="w-full h-64 bg-gray-100 rounded-lg mb-4" autoplay playsinline></video>
                    <button id="capture" class="btn-main w-full">
                        <i class="fas fa-camera mr-2"></i>Capture Photo
                    </button>
                </div>
                <div id="preview-container" class="hidden">
                    <img id="preview" class="w-full h-64 object-cover rounded-lg mb-4" alt="Captured photo">
                </div>
            </div>

            <div>
                <h3 class="text-lg font-semibold mb-4">Or Upload an Image</h3>
                <form id="upload-form" class="space-y-4">
                    <div class="flex items-center justify-center w-full">
                        <label for="file-upload" class="flex flex-col items-center justify-center w-full h-32 border-2 border-[#4e6b50] border-dashed rounded-lg cursor-pointer bg-[#f5f7f2] hover:bg-[#e6ebe0]">
                            <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                <i class="fas fa-cloud-upload-alt text-3xl text-[#4e6b50] mb-2"></i>
                                <p class="mb-2 text-sm text-[#4e6b50]"><span class="font-semibold">Click to upload</span> or drag and drop</p>
                                <p class="text-xs text-[#4e6b50]">PNG, JPG or JPEG</p>
                            </div>
                            <input id="file-upload" type="file" class="hidden" accept="image/*" />
                        </label>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="mt-8 text-center">
        <a href="{{ url_for('home') }}" class="inline-block bg-[#e6ebe0] text-[#3e5637] hover:bg-[#b7c7a3] hover:text-[#4e6b50] font-semibold px-6 py-2 rounded-lg shadow transition-colors duration-200">
            ← Back to Home
        </a>
    </div>
</div>

<script>
let stream = null;
const camera = document.getElementById('camera');
const capture = document.getElementById('capture');
const preview = document.getElementById('preview');
const previewContainer = document.getElementById('preview-container');
const fileUpload = document.getElementById('file-upload');
const uploadForm = document.getElementById('upload-form');

// Start camera when page loads
async function startCamera() {
    try {
        stream = await navigator.mediaDevices.getUserMedia({ video: true });
        camera.srcObject = stream;
    } catch (err) {
        console.error('Error accessing camera:', err);
        alert('Could not access camera. Please make sure you have granted camera permissions.');
    }
}

// Capture photo
capture.addEventListener('click', () => {
    const canvas = document.createElement('canvas');
    canvas.width = camera.videoWidth;
    canvas.height = camera.videoHeight;
    canvas.getContext('2d').drawImage(camera, 0, 0);
    
    // Convert to blob and submit
    canvas.toBlob(blob => {
        submitImage(blob);
    }, 'image/jpeg');
});

// Handle file upload
fileUpload.addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (file) {
        submitImage(file);
    }
});

// Submit image to server
function submitImage(imageData) {
    const formData = new FormData();
    formData.append('image', imageData);

    fetch('/recognize-plant', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.redirect) {
            window.location.href = data.redirect;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while processing the image.');
    });
}

// Start camera when page loads
startCamera();

// Clean up camera when leaving page
window.addEventListener('beforeunload', () => {
    if (stream) {
        stream.getTracks().forEach(track => track.stop());
    }
});
</script>
{% endblock %}