<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Structural Crack Inspector</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>

    <div class="background-orbs">
        <div class="orb orb-1"></div>
        <div class="orb orb-2"></div>
        <div class="orb orb-3"></div>
    </div>

    <main class="glass-container">
        <header>
            <h1>Structural Health AI</h1>
            <p>Upload a concrete surface image to detect fractures and assess severity using OpenCV & SVM.</p>
        </header>

        <div class="upload-area" id="drop-zone">
            <input type="file" id="file-input" accept="image/*" hidden>
            <div class="upload-icon">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="17 8 12 3 7 8"></polyline>
                    <line x1="12" y1="3" x2="12" y2="15"></line>
                </svg>
            </div>
            <h3>Drag & Drop Image</h3>
            <p>or <span class="browse-link" onclick="document.getElementById('file-input').click()">Browse Files</span></p>
        </div>

        <div id="loading" class="hidden">
            <div class="spinner"></div>
            <p>Analyzing structural integrity...</p>
        </div>

        <div id="results" class="hidden">
            <div class="result-header">
                <h2>Analysis Complete</h2>
                <div id="status-badge" class="badge"></div>
            </div>
            
            <div class="metrics">
                <div class="metric-card">
                    <span class="label">Severity Level</span>
                    <span id="severity-val" class="value">--</span>
                </div>
                <div class="metric-card">
                    <span class="label">SVM Confidence</span>
                    <span id="confidence-val" class="value">--</span>
                </div>
                <div class="metric-card">
                    <span class="label">Est. Thickness</span>
                    <span id="thickness-val" class="value">--</span>
                </div>
            </div>

            <div class="image-comparison">
                <div class="image-box">
                    <h4>Original Image</h4>
                    <img id="img-original" src="" alt="Original">
                </div>
                <div class="image-box">
                    <h4>Processed (Canny Edge + Bounding Boxes)</h4>
                    <img id="img-processed" src="" alt="Processed">
                </div>
            </div>
            
            <button class="btn-primary" onclick="resetUI()">Analyze Another Image</button>
        </div>

    </main>

    <script>
        const dropZone = document.getElementById('drop-zone');
        const fileInput = document.getElementById('file-input');
        
        // Drag and drop logic
        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropZone.classList.add('dragover');
        });
        
        dropZone.addEventListener('dragleave', () => {
            dropZone.classList.remove('dragover');
        });
        
        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZone.classList.remove('dragover');
            if (e.dataTransfer.files.length) {
                fileInput.files = e.dataTransfer.files;
                handleUpload();
            }
        });
        
        fileInput.addEventListener('change', handleUpload);

        function handleUpload() {
            if (!fileInput.files.length) return;
            
            const file = fileInput.files[0];
            const formData = new FormData();
            formData.append('file', file);

            // UI State
            dropZone.classList.add('hidden');
            document.getElementById('loading').classList.remove('hidden');
            document.getElementById('results').classList.add('hidden');

            fetch('/upload', {
                method: 'POST',
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                document.getElementById('loading').classList.add('hidden');
                
                if (data.error) {
                    alert('Error: ' + data.error);
                    resetUI();
                    return;
                }

                document.getElementById('results').classList.remove('hidden');
                
                const badge = document.getElementById('status-badge');
                if (data.is_cracked) {
                    badge.textContent = 'CRITICAL FRACTURE DETECTED';
                    badge.className = 'badge critical';
                } else {
                    badge.textContent = 'STRUCTURALLY SAFE';
                    badge.className = 'badge safe';
                }

                document.getElementById('severity-val').textContent = data.severity;
                document.getElementById('confidence-val').textContent = data.confidence;
                document.getElementById('thickness-val').textContent = data.thickness_mm;
                
                // Add timestamp to prevent caching
                const t = new Date().getTime();
                document.getElementById('img-original').src = data.original_url + '?t=' + t;
                document.getElementById('img-processed').src = data.processed_url + '?t=' + t;
            })
            .catch(err => {
                console.error(err);
                alert("Server error during processing");
                resetUI();
            });
        }

        function resetUI() {
            fileInput.value = '';
            document.getElementById('results').classList.add('hidden');
            document.getElementById('loading').classList.add('hidden');
            dropZone.classList.remove('hidden');
        }
    </script>
</body>
</html>
