<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Energy Bill Data Extractor</title>
    <link rel="icon" type="image/jpeg" href="nesp-sun.jpg">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: white; min-height: 100vh; }
        .container { max-width: 800px; margin: 0 auto; background: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow: hidden; }
        .header { background: #000000; color: white; padding: 20px 30px; text-align: center; }
        .header-logo { display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
        .header-logo img { height: 50px; margin-right: 15px; }
        .form-container { padding: 40px; }
        .form-group { margin-bottom: 25px; }
        .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #333; }
        .file-upload-area { border: 2px dashed #ddd; border-radius: 8px; padding: 40px; text-align: center; background: #fafafa; transition: all 0.3s ease; cursor: pointer; position: relative; }
        .file-upload-area:hover { border-color: #e8a321; background: #fffbf0; }
        .file-upload-area input[type="file"] { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; }
        
        /* Mobile-specific improvements */
        @media (max-width: 768px) {
            .container { margin: 0; box-shadow: none; }
            .form-container { padding: 20px; }
            .file-upload-area { padding: 30px 20px; }
            .upload-icon { font-size: 2.5rem; }
            .submit-btn { padding: 18px 20px; font-size: 1rem; }
            .step-nav { padding: 15px; }
            .step { margin: 0 5px; min-width: 100px; }
            .step-text { font-size: 0.8rem; }
        }
        
        /* Touch-friendly improvements */
        @media (hover: none) and (pointer: coarse) {
            .file-upload-area { min-height: 120px; }
            .submit-btn { min-height: 48px; }
            .remove-btn { min-height: 36px; min-width: 60px; }
        }
        .upload-icon { font-size: 3rem; color: #e8a321; margin-bottom: 15px; }
        .submit-btn { background: #e8a321; color: white; border: none; padding: 15px 30px; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; width: 100%; transition: all 0.3s ease; margin-top: 20px; }
        .submit-btn:hover { background: #d1941e; }
                 .submit-btn:disabled { background: #ccc; cursor: not-allowed; }
         .loading { display: none; text-align: center; padding: 20px; margin-bottom: 20px; }
         .processing-overlay { 
             display: none; 
             position: fixed; 
             top: 0; 
             left: 0; 
             width: 100%; 
             height: 100%; 
             background: rgba(0, 0, 0, 0.7); 
             z-index: 1000; 
             backdrop-filter: blur(2px);
         }
         .processing-modal {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             background: white;
             padding: 40px;
             border-radius: 12px;
             text-align: center;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
             min-width: 300px;
         }
        .spinner { border: 4px solid #f3f3f3; border-top: 4px solid #e8a321; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto 15px; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .result { margin-top: 20px; padding: 20px; border-radius: 8px; display: none; }
        .result.success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
        .result.error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
        
        /* Step navigation */
        .step-nav { 
            display: flex; 
            justify-content: center; 
            margin-bottom: 30px; 
            background: #f8f9fa; 
            padding: 20px; 
            border-radius: 8px; 
            flex-wrap: wrap;
            gap: 10px;
        }
        .step { 
            display: flex; 
            align-items: center; 
            margin: 0 10px; 
            min-width: 120px;
            flex: 1;
            max-width: 200px;
        }
        .step-number { 
            width: 35px; 
            height: 35px; 
            border-radius: 50%; 
            background: #ddd; 
            color: #666; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-weight: bold; 
            margin-right: 10px; 
            flex-shrink: 0;
        }
        .step.active .step-number { background: #e8a321; color: white; }
        .step.completed .step-number { background: #28a745; color: white; }
        .step-text {
            font-size: 0.9rem;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* Step containers */
        .step-container { display: none; }
        .step-container.active { display: block; }
        
        /* Edit form */
        .edit-form { background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0; }
        .form-row { display: flex; gap: 15px; margin-bottom: 15px; }
        .form-col { flex: 1; }
        .form-col input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; }
        .form-col label { display: block; margin-bottom: 5px; font-weight: 600; color: #333; }
        
        /* Action buttons */
        .action-buttons { display: flex; justify-content: space-between; margin-top: 20px; }
        .btn { padding: 12px 24px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; }
        .btn-primary { background: #e8a321; color: white; }
        .btn-primary:hover { background: #d1941e; }
        .btn-secondary { background: #6c757d; color: white; }
        .btn-secondary:hover { background: #5a6268; }
        .btn-success { background: #28a745; color: white; }
        .btn-success:hover { background: #218838; }
        
        /* Letter preview */
        .letter-preview { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 30px; margin: 20px 0; }
        
        /* Mobile letter preview - no box, left-justified text */
        @media (max-width: 768px) {
            .letter-preview { 
                background: transparent; 
                border: none; 
                border-radius: 0; 
                padding: 0; 
                margin: 10px 0; 
                text-align: left;
            }
            
            /* Mobile button layout for Step 3 */
            .letter-preview button {
                font-size: 12px !important;
                padding: 6px 12px !important;
                min-width: 80px;
            }
            
            .letter-preview div[style*="display: flex"] {
                gap: 8px !important;
            }
            

            /* Mobile signature buttons in letter preview */
            .signature-buttons button {
                font-size: 12px !important;
                padding: 6px 10px !important;
                min-width: 80px !important;
            }
            
            .signature-buttons {
                gap: 8px !important;
            }
            
            /* Mobile solar spot layout for Step 4 */
            #step4-container div[style*="display: flex"] {
                flex-direction: column !important;
                gap: 20px !important;
            }
            
            #step4-container .solar-spot-diagram {
                order: 1 !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                min-height: 250px !important;
                width: 100% !important;
            }
            
            #step4-container .solar-spot-diagram svg {
                max-width: 100% !important;
                height: auto !important;
            }
            
            #step4-container .solar-legend {
                order: 2 !important;
                height: auto !important;
                min-height: 120px !important;
                padding: 15px !important;
                width: 100% !important;
            }
            
            #step4-container .solar-legend > div {
                display: flex !important;
                flex-direction: row !important;
                align-items: flex-start !important;
                gap: 8px !important; /* replaces margin-right on icon */
                width: 100% !important;
                margin: 4px 0 !important;
            }
            
            #step4-container .solar-legend .legend-color {
                flex: 0 0 20px !important; 
                height: 20px !important;
            }
            
            #step4-container .solar-legend span:not(.legend-color) {
                display: inline-block !important;  /* <- KEY change */
                white-space: normal !important;    /* allow wrapping */
                flex: 1 !important;
                word-wrap: break-word !important;
                overflow-wrap: break-word !important;
            }
            
            .legend-text {
                display: inline-block;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }
            
            #step4-container .results-explanation {
                order: 3 !important;
            }
            
            /* Mobile solar input fields */
            #step4-container .solar-input-row {
                flex-direction: column !important;
                gap: 15px !important;
            }
            
            #step4-container .solar-input-row > div {
                flex: none !important;
                width: 100% !important;
                display: flex !important;
                align-items: center !important;
                gap: 10px !important;
            }
            
            #step4-container .solar-input-row label {
                display: inline-block !important;
                margin-bottom: 0 !important;
                min-width: 140px !important;
                font-size: 0.9rem !important;
            }
            
            #step4-container .solar-input-row input {
                flex: 1 !important;
                width: auto !important;
                min-width: 80px !important;
                text-align: right !important;
            }
            
            /* Mobile authority form text optimization */
            #step3-container h2 {
                font-size: 1.5rem;
                margin-bottom: 10px;
                text-align: left;
            }
            
            #step3-container p {
                font-size: 0.95rem;
                line-height: 1.4;
                margin-bottom: 15px;
                text-align: left;
            }
            
            /* Ensure letter content matches introductory text width */
            .letter-preview * {
                max-width: 100% !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            
            /* Override letter template styles for mobile preview */
            .letter-preview .letter-container {
                max-width: 100% !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
            }
            
            .letter-preview .letter-header {
                flex-direction: column !important;
                gap: 15px !important;
            }
            
            .letter-preview .letter-recipient,
            .letter-preview .letter-logo {
                flex: none !important;
                width: 100% !important;
            }
            
            .letter-preview .letter-logo {
                text-align: left !important;
            }
            
            .letter-preview .customer-details {
                width: 100% !important;
                margin: 15px 0 !important;
            }
            
            .letter-preview .letter-body {
                width: 100% !important;
                text-align: left !important;
            }
            
            .letter-preview .letter-signature {
                flex-direction: column !important;
                gap: 15px !important;
            }
            
            .letter-preview .signature-right {
                text-align: left !important;
                align-items: flex-start !important;
            }
        }
        .signature-box { 
            width: 100%; 
            height: 100px; 
            border: 2px solid #e8a321; 
            border-radius: 8px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            background: #fff8e6; 
            cursor: pointer; 
            transition: all 0.3s ease; 
        }
        .signature-box:hover { background: #ffe8b3; }
        .signature-box.signed { background: #d4edda; border-color: #28a745; }
        
                 /* Missing fields warning */
         .missing-fields { background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; padding: 15px; border-radius: 6px; margin: 20px 0; }
         .missing-fields h3 { margin-bottom: 10px; color: #856404; }
         .missing-fields ul { margin-left: 20px; }
         .missing-fields li { margin-bottom: 5px; }
         
         /* Missing field highlighting */
         input[style*="border-color: #ff4444"] { 
             border-color: #ff4444 !important; 
             border-width: 2px !important; 
             background-color: #fff5f5 !important;
             box-shadow: 0 0 5px rgba(255, 68, 68, 0.3) !important;
         }
         
         /* File list styles */
         .file-list { margin-top: 20px; }
         .file-list h4 { margin-bottom: 10px; color: #333; }
         .file-items { display: flex; flex-direction: column; gap: 10px; }
         .file-item { 
             display: flex; 
             align-items: center; 
             justify-content: space-between; 
             padding: 10px; 
             background: #f8f9fa; 
             border: 1px solid #ddd; 
             border-radius: 6px; 
             font-size: 0.9rem; 
         }
         .file-item .file-info { display: flex; align-items: center; gap: 10px; }
         .file-item .file-icon { font-size: 1.2rem; }
         .file-item .file-name { font-weight: 500; color: #333; }
         .file-item .file-size { color: #666; font-size: 0.8rem; }
         .file-item .remove-btn { 
             background: #dc3545; 
             color: white; 
             border: none; 
             padding: 5px 10px; 
             border-radius: 4px; 
             cursor: pointer; 
             font-size: 0.8rem; 
             transition: background 0.3s ease; 
         }
         .file-item .remove-btn:hover { background: #c82333; }
        
        @media (max-width: 768px) {
            .container { margin: 0; box-shadow: none; }
            .form-container { padding: 20px; }
            .form-row { flex-direction: column; }
            .action-buttons { flex-direction: column; }
            
            /* Mobile step navigation */
            .step-nav {
                padding: 15px;
                gap: 5px;
            }
            .step {
                margin: 0 5px;
                min-width: 100px;
                max-width: 150px;
            }
            .step-number {
                width: 30px;
                height: 30px;
                font-size: 0.8rem;
            }
            .step-text {
                font-size: 0.8rem;
            }
            
            /* Mobile button layout for signature step */
            .signature-buttons {
                display: flex;
                justify-content: flex-start;
                gap: 10px;
                margin-top: 10px;
            }
            
            .signature-buttons button {
                padding: 10px 12px;
                font-size: 13px;
                min-width: 100px;
            }
        }
        
        @media (max-width: 480px) {
            .step-nav {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
                padding-left: 20px;
            }
            .step {
                width: 100%;
                max-width: 250px;
                justify-content: flex-start;
                align-items: center;
                position: relative;
            }
            .step-number {
                margin-right: 15px;
                flex-shrink: 0;
            }
            .step-text {
                text-align: left;
                flex: 1;
            }
            /* Align all steps to the left with some right padding */
            .step:nth-child(1),
            .step:nth-child(2),
            .step:nth-child(3) {
                justify-content: flex-start;
                padding-right: 20px;
            }
            

            .btn {
                padding: 10px 15px !important;
                font-size: 0.9rem !important;
            }

            /* Mobile camera-only styling */
            .file-upload-area {
                background: #e8f5e8 !important;
                border-color: #4CAF50 !important;
            }

            .file-upload-area .upload-icon {
                font-size: 2.5rem;
                color: #4CAF50;
            }

            .file-upload-area .upload-text {
                color: #2E7D32;
                font-weight: 600;
            }

            .file-upload-area .upload-hint {
                color: #388E3C;
                font-size: 0.85rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="header-logo">
                <img src="new-england-solar-power-logo.webp" alt="New England Solar Power Logo">
            </div>
        </div>

        <!-- Step Navigation -->
        <div class="step-nav">
            <div class="step active" id="step1">
                <div class="step-number">1</div>
                <div class="step-text">Upload Bill</div>
            </div>
            <div class="step" id="step2">
                <div class="step-number">2</div>
                <div class="step-text">Review & Edit</div>
            </div>
            <div class="step" id="step3">
                <div class="step-number">3</div>
                <div class="step-text">Sign Authority</div>
            </div>
            <div class="step" id="step4">
                <div class="step-number">4</div>
                <div class="step-text">Solar Review</div>
            </div>
        </div>

        <div class="form-container">
            <!-- Step 1: Upload Bill -->
            <div class="step-container active" id="step1-container">
                <form id="uploadForm" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="files">Upload Energy Bills</label>
                        <div class="file-upload-area" id="uploadArea">
                            <div class="upload-icon">📄</div>
                            <div class="upload-text" id="uploadText">Click to upload or drag and drop</div>
                            <div class="upload-hint" id="uploadHint">Supports PDF, JPG, PNG, WEBP (max 20MB total)</div>
                            <input type="file" id="files" name="files" multiple accept=".pdf,.jpg,.jpeg,.png,.webp,image/*,application/pdf,application/octet-stream">
                        </div>
                        
                        <!-- File list display -->
                        <div class="file-list" id="fileList" style="display: none;">
                            <h4>Selected Files:</h4>
                            <div class="file-items" id="fileItems"></div>
                        </div>
                    </div>

                    <div class="hidden-fields">
                        <!-- Phone and email come from LeadConnector contact API call, not URL parameters -->
                    </div>

                    <div class="loading" id="loading">
                        <div class="spinner"></div>
                        <p>Processing your bills...</p>
                    </div>

                    <button type="submit" class="submit-btn" id="submitBtn">
                        Send Bill Data
                    </button>
                </form>

                <div class="privacy-policy-link" id="privacyPolicyLink" style="text-align: center; margin-top: 20px; font-size: 0.9em; color: #666;">
                    <p style="margin-bottom: 10px;">We will not share your data with anyone.</p>
                    <a href="#" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
                </div>

                <div class="result" id="result"></div>
            </div>

            <!-- Step 2: Review & Edit -->
            <div class="step-container" id="step2-container">
                <h2>Review Contact Details</h2>
                <p>Please review, possibly edit and confirm the information extracted from your electricity bill:</p>
                
                <div class="edit-form" id="editForm" data-form-type="energy-bill-extraction">
                    <div class="form-row">
                        <div class="form-col">
                            <label for="edit-first-name">First Name *</label>
                            <input type="text" id="edit-first-name" name="bill_first_name" autocomplete="given-name">
                        </div>
                        <div class="form-col">
                            <label for="edit-last-name">Last Name *</label>
                            <input type="text" id="edit-last-name" name="bill_last_name" autocomplete="family-name">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-col">
                            <label for="edit-business-name">Business Name (Optional)</label>
                            <input type="text" id="edit-business-name" name="business_name" autocomplete="organization">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-col">
                            <label for="edit-street-address">Street Address *</label>
                            <input type="text" id="edit-street-address" name="site_street_address" autocomplete="street-address">
                        </div>
                        <div class="form-col">
                            <label for="edit-suburb">Suburb *</label>
                            <input type="text" id="edit-suburb" name="site_suburb" autocomplete="address-level2">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-col">
                            <label for="edit-state">State *</label>
                            <input type="text" id="edit-state" name="site_state" autocomplete="address-level1">
                        </div>
                        <div class="form-col">
                            <label for="edit-postcode">Postcode *</label>
                            <input type="text" id="edit-postcode" name="site_postcode" autocomplete="postal-code">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-col">
                            <label for="edit-nmi">NMI (National Meter Identifier) *</label>
                            <input type="text" id="edit-nmi" name="nmi" autocomplete="off">
                        </div>
                        <div class="form-col">
                            <label for="edit-phone">Phone Number *</label>
                            <input type="text" id="edit-phone" name="phone" autocomplete="tel">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-col">
                            <label for="edit-email">Email Address *</label>
                            <input type="email" id="edit-email" name="email" autocomplete="email">
                        </div>
                    </div>
                </div>

                <div class="action-buttons" style="justify-content: flex-end;">
                    <button type="button" class="btn btn-primary" onclick="proceedToAuthority()">Confirm Details</button>
                </div>
            </div>

            <!-- Step 3: Authority Form -->
            <div class="step-container" id="step3-container">
                <h2>Authority to Release Electricity Meter Data</h2>
                <p>Please review the authority letter below and add your signature:</p>
                
                <div class="letter-preview" id="letterPreview">
                    <!-- Letter content will be loaded from template -->
                </div>
                
                <!-- Signature message integrated into the form -->
                <div id="signatureMessage" style="margin: 20px 0; padding: 15px; background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; color: #856404; text-align: center; display: none;">
                    <h4 style="margin: 0 0 10px 0; color: #856404;">⚠️ Signature Required</h4>
                    <p style="margin: 0;">Please add your signature before sending the authority form.</p>
                </div>

            </div>

            <!-- Step 4: Solar Spot Calculator -->
            <div class="step-container" id="step4-container">
                <div class="success-message" style="background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724; padding: 10px; border-radius: 5px; margin-bottom: 10px;">
                    <h3 style="margin: 0; color: #155724;">Authority letter emailed successfully!</h3>
                    <p style="margin: 3px 0 0 0;">When we receive the answer, we will analyse your electricity usage in detail and set up an appointment.</p>
                </div>

                <h2 style="margin-top: 5px;">Initial Review of Your Solar System</h2>
                <p id="solar-prompt-text">
                    <!-- JS will fill this based on whether we have Google AI data -->
                </p>
                
                <div class="solar-fields" style="margin: 10px 0;">
                    <div class="solar-input-row" style="display: flex; gap: 15px; margin-bottom: 15px;">
                        <div style="flex: 1;">
                            <label for="solar-size" style="display: block; margin-bottom: 5px; font-weight: bold;">Solar System (kW)*:</label>
                            <input type="number" id="solar-size" step="0.1" min="0" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; text-align: right;" oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                        </div>
                        <div style="flex: 1;">
                            <label for="annual-import" style="display: block; margin-bottom: 5px; font-weight: bold;">Annual Import (kWh)*:</label>
                            <input type="number" id="annual-import" step="0.1" min="0" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; text-align: right;" oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                        </div>
                        <div style="flex: 1;">
                            <label for="annual-export" style="display: block; margin-bottom: 5px; font-weight: bold;">Annual Export (kWh)*:</label>
                            <input type="number" id="annual-export" step="0.1" min="0" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; text-align: right;" oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                        </div>
                    </div>
                </div>
                
                <div style="display: flex; gap: 30px; margin: 30px 0; align-items: flex-start;">
                    <div class="solar-spot-diagram" id="solar-spot-diagram" style="flex: 1; display: flex; justify-content: center; align-items: center; min-height: 250px;">
                        <!-- SVG will be rendered here by JS -->
                    </div>
                    
                    <div class="solar-legend" style="flex: 1; padding: 15px; background-color: #f8f9fa; border-radius: 5px; height: 200px; display: flex; flex-direction: column; justify-content: center;">
                        <div style="display: flex; align-items: center; margin: 4px 0;">
                            <span class="legend-color" style="width: 20px; height: 20px; background-color: #80BD00; margin-right: 10px; display: inline-block;"></span>
                            <span class="legend-text">Solar energy used on site</span>
                        </div>
                        <div style="display: flex; align-items: center; margin: 4px 0;">
                            <span class="legend-color" style="width: 20px; height: 20px; background-color: #C8C8C8; margin-right: 10px; display: inline-block;"></span>
                            <span class="legend-text">Solar energy exported & reimported later</span>
                        </div>
                        <div style="display: flex; align-items: center; margin: 4px 0;">
                            <span class="legend-color" style="width: 20px; height: 20px; background-color: #FF0000; margin-right: 10px; display: inline-block;"></span>
                            <span class="legend-text">Net imported energy from the grid</span>
                        </div>
                        <div style="display: flex; align-items: center; margin: 4px 0;">
                            <span class="legend-color" style="width: 20px; height: 20px; background-color: #FFFF00; margin-right: 10px; display: inline-block;"></span>
                            <span class="legend-text">Net exported energy from your solar system</span>
                        </div>
                    </div>
                </div>
                
                <!-- Error container for solar spot calculation -->
                <div id="solar-spot-error" style="display: none; margin: 10px 0; padding: 10px; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; color: #721c24; font-size: 0.9rem;"></div>
                
                <div class="results-explanation" id="results-explanation" style="margin: 20px 0; padding: 15px; background-color: #e7f3ff; border-left: 4px solid #007bff; border-radius: 4px;">
                    <p style="margin: 0;">Please fill in your solar system details to see your personalized analysis.</p>
                </div>
                
                <div style="margin: 20px 0; padding: 15px; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; font-size: 0.9rem; color: #6c757d;">
                    <p style="margin: 0;"><strong>*</strong> This is an estimate only from the usage we could see in your bill. The actual usage data will give a much more reliable picture. We also want to take your plans into account so that the system works for you long-term.</p>
                </div>
                
                <div style="margin-top: 30px; text-align: center;">
                    <p style="color: #666; font-size: 1rem; line-height: 1.6;">
                        <a href="https://newenglandsolarpower.com.au/the-perfect-solar-spot-and-how-to-achieve-it/" target="_blank" style="color: #007bff; text-decoration: underline;" id="solar-spot-link-1">Want to find out how to create the perfect power spot?</a>
                    </p>
                </div>
                

            </div>
        </div>
    </div>

         <!-- Processing Overlay -->
     <div class="processing-overlay" id="processingOverlay">
         <div class="processing-modal">
             <div class="spinner"></div>
             <h3 style="margin-bottom: 10px; color: #333;" id="processingTitle">Processing Your Bills</h3>
             <p style="color: #666; margin-bottom: 0;" id="processingMessage">One moment please. We are reading your electricity bill(s)...</p>
         </div>
     </div>
 

    <script>
        // Frontend logging utility - only logs in development/staging environments
        const isDevelopment = window.location.hostname === 'localhost' || 
                            window.location.hostname === '127.0.0.1' || 
                            window.location.hostname.includes('dev') ||
                            window.location.hostname.includes('staging');
        
        function frontendLog(level, category, message, ...args) {
            if (isDevelopment) {
                const timestamp = new Date().toTimeString().split(' ')[0];
                const code = Math.random().toString(36).substring(2, 6).toUpperCase();
                const formattedMessage = `[${timestamp}] [${category}] [${code}] ${message}`;
                
                switch (level.toUpperCase()) {
                    case 'ERROR':
                        console.error(formattedMessage, ...args);
                        break;
                    case 'WARN':
                        console.warn(formattedMessage, ...args);
                        break;
                    case 'INFO':
                        console.log(formattedMessage, ...args);
                        break;
                    case 'DEBUG':
                        console.log(formattedMessage, ...args);
                        break;
                    default:
                        console.log(formattedMessage, ...args);
                }
            }
        }
        
        // Convenience functions for frontend logging
        function frontendError(category, message, ...args) {
            frontendLog('ERROR', category, message, ...args);
        }
        
        function frontendWarn(category, message, ...args) {
            frontendLog('WARN', category, message, ...args);
        }
        
        function frontendInfo(category, message, ...args) {
            frontendLog('INFO', category, message, ...args);
        }
        
        function frontendDebug(category, message, ...args) {
            frontendLog('DEBUG', category, message, ...args);
        }

        // Global variables
        let extractedData = null;
        let currentStep = 1;
        let signatureData = null;
        let appSettings = null;
        

        // Load settings from server
        async function loadSettings() {
            try {
                const response = await fetch('/api/settings');
                if (response.ok) {
                    appSettings = await response.json();
                    updatePrivacyPolicyLink();
                    updateSolarSpotLinks();
                } else {
                    frontendError('SETTINGS', 'Failed to load settings');
                }
            } catch (error) {
                frontendError('SETTINGS', 'Error loading settings:', error);
            }
        }

        // Update privacy policy link with URL from settings
        function updatePrivacyPolicyLink() {
            if (appSettings && appSettings.privacy_policy_url) {
                const privacyLink = document.getElementById('privacyPolicyLink').querySelector('a');
                privacyLink.href = appSettings.privacy_policy_url;
            }
        }

        // Update solar spot links with settings from branding
        function updateSolarSpotLinks() {
            if (appSettings && appSettings.branding && appSettings.branding.marketing) {
                const solarSpotLink1 = document.getElementById('solar-spot-link-1');
                if (solarSpotLink1) {
                    if (appSettings.branding.marketing.url) {
                        solarSpotLink1.href = appSettings.branding.marketing.url;
                    }
                    if (appSettings.branding.marketing.text) {
                        solarSpotLink1.textContent = appSettings.branding.marketing.text;
                    }
                }
            }
        }

        // 🔧 INITIAL SETUP: Load settings
        loadSettings();
        
        // Update mobile UI text for camera-only
        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        if (isMobile) {
            const uploadText = document.getElementById('uploadText');
            const uploadHint = document.getElementById('uploadHint');
            if (uploadText) uploadText.textContent = 'Tap to take a photo of your bill';
            if (uploadHint) uploadHint.textContent = 'Camera only - Take a clear photo of your electricity bill';
            
            // Create a mobile-specific file input with capture attribute
            const mobileFileInput = document.createElement('input');
            mobileFileInput.type = 'file';
            mobileFileInput.accept = 'image/*';
            mobileFileInput.capture = 'environment';
            mobileFileInput.style.display = 'none';
            mobileFileInput.id = 'mobileFileInput';
            
            // Add it to the DOM
            document.body.appendChild(mobileFileInput);
            
            // Hide the original file input on mobile to prevent conflicts
            const originalFileInput = document.getElementById('files');
            if (originalFileInput) {
                originalFileInput.style.display = 'none';
            }
            
            // Add event listener for mobile file input
            mobileFileInput.addEventListener('change', (e) => {
                const files = Array.from(e.target.files);
                addFiles(files);
                // Reset the mobile file input
                e.target.value = '';
                // Reset the processing flag to allow new clicks
                isProcessingFile = false;
            });
            
            console.log('📱 Mobile file input created with capture="environment"');
        }

        // Get URL parameters
        const urlParams = new URLSearchParams(window.location.search);
        const opportunityId = decodeURIComponent(urlParams.get('oid') || '');
        const contactId = decodeURIComponent(urlParams.get('cid') || '');
        const reviewId = urlParams.get('review') || '';
        
        // Check if this is a review continuation
        let isReviewMode = false;
        let reviewData = null;
        
        // Fetch contact details and trigger LeadConnector processing if contactId/opportunityId are available
        if (contactId || opportunityId) {
            console.log('🔗 LEADCONNECTOR: Detected existing client parameters:', { contactId, opportunityId });
            
        // Fetch contact details from LeadConnector if contactId is available
        if (contactId) {
            fetch(`/get-contact-details?contactId=${contactId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.contactDetails) {
                        updateFormWithContactDetails(data.contactDetails);
                        // Store contact details for later use
                        window.contactDetails = data.contactDetails;
                            console.log('✅ LEADCONNECTOR: Contact details loaded and form updated');
                    }
                })
                .catch(error => {
                    frontendError('LEADCONNECTOR', 'Error getting contact details on page load:', error);
                });
            }
            
            // Trigger background LeadConnector processing (non-blocking)
            if (contactId || opportunityId) {
                console.log('🔄 LEADCONNECTOR: Triggering background processing...');
                fetch('/api/leadconnector/prepare', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        contactId: contactId || null,
                        opportunityId: opportunityId || null
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        console.log('✅ LEADCONNECTOR: Background processing initiated successfully');
                        // Store LeadConnector session for later use
                        window.leadConnectorSession = data.sessionId;
                    } else {
                        console.warn('⚠️ LEADCONNECTOR: Background processing failed:', data.error);
                    }
                })
                .catch(error => {
                    console.warn('⚠️ LEADCONNECTOR: Background processing error:', error);
                    // Don't block the UI for LeadConnector errors
                });
            }
        }

        // Function to load review data
        function loadReviewData() {
            console.log('🔍 Loading review data for ID:', reviewId);
            isReviewMode = true;
            
            fetch(`/api/review/${reviewId}`)
                .then(response => {
                    console.log('📡 Response status:', response.status);
                    console.log('📡 Response headers:', response.headers);
                    
                    // Handle 409 Conflict (already completed) gracefully
                    if (response.status === 409) {
                        return response.json().then(data => {
                            // Show friendly completion message
                            showCompletedReviewMessage(data);
                            throw new Error('REVIEW_COMPLETED'); // Special error to stop processing
                        });
                    }
                    
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('📡 Response data:', data);
                    if (data.success) {
                        // Check if details are already confirmed
                        if (data.detailsAlreadyConfirmed) {
                            console.log('✅ Details already confirmed, skipping to authority form');
                            console.log('📊 Review data for confirmed details:', data.reviewData);
                            console.log('📊 Extracted data for confirmed details:', data.reviewData.extractionResult);
                            reviewData = data.reviewData;
                            extractedData = reviewData.extractionResult;
                            
                            // CRITICAL FIX: Merge contact details with extracted data for authority form
                            if (reviewData.contactDetails) {
                                console.log('🔗 LEADCONNECTOR: Merging contact details with extracted data for authority form...');
                                console.log('📧 Contact email:', reviewData.contactDetails.email);
                                console.log('📱 Contact phone:', reviewData.contactDetails.phone);
                                
                                // Merge contact details into extracted data for authority form generation
                                extractedData.email = reviewData.contactDetails.email || extractedData.email || '';
                                extractedData.phone = reviewData.contactDetails.phone || extractedData.phone || '';
                                
                                console.log('✅ LEADCONNECTOR: Contact details merged into extracted data:');
                                console.log('  - Email:', extractedData.email);
                                console.log('  - Phone:', extractedData.phone);
                            } else {
                                console.warn('⚠️ LEADCONNECTOR: No contact details available in review data');
                            }
                            
                            // Store review data for later use
                            window.reviewData = reviewData;
                            window.fileUrls = reviewData.fileUrls;
                            window.uploadedFiles = reviewData.uploadedFiles;
                            
                            // Set LeadConnector parameters
                            if (reviewData.leadConnectorParams) {
                                window.leadConnectorParams = reviewData.leadConnectorParams;
                                console.log('🔗 LeadConnector parameters from review:', reviewData.leadConnectorParams);
                                
                                const { cid, oid } = reviewData.leadConnectorParams;
                                if (cid && oid) {
                                    // Set contact and opportunity IDs for existing client flow
                                    window.contactId = cid;
                                    window.opportunityId = oid;
                                    console.log('🔗 Set existing client IDs from review:', { contactId: cid, opportunityId: oid });
                                }
                            }
                            
                            // Skip directly to authority form
                            goToStep(3);
                            return;
                        }
                        
                        // Normal flow - details not yet confirmed
                        reviewData = data.reviewData;
                        console.log('✅ Review data loaded:', reviewData);
                        
                        // Populate form with extracted data
                        extractedData = reviewData.extractionResult;
                        console.log('📝 Extracted data to populate:', extractedData);
                        
                        // CRITICAL FIX: Merge contact details with extracted data for authority form
                        if (reviewData.contactDetails) {
                            console.log('🔗 LEADCONNECTOR: Merging contact details with extracted data for authority form...');
                            console.log('📧 Contact email:', reviewData.contactDetails.email);
                            console.log('📱 Contact phone:', reviewData.contactDetails.phone);
                            
                            // Merge contact details into extracted data for authority form generation
                            extractedData.email = reviewData.contactDetails.email || extractedData.email || '';
                            extractedData.phone = reviewData.contactDetails.phone || extractedData.phone || '';
                            
                            console.log('✅ LEADCONNECTOR: Contact details merged into extracted data:');
                            console.log('  - Email:', extractedData.email);
                            console.log('  - Phone:', extractedData.phone);
                        } else {
                            console.warn('⚠️ LEADCONNECTOR: No contact details available in review data');
                        }
                        
                        // Map data keys to element IDs
                        const fieldMapping = {
                            'bill_first_name': 'edit-first-name',
                            'bill_last_name': 'edit-last-name',
                            'business_name': 'edit-business-name',
                            'site_street_address': 'edit-street-address',
                            'site_suburb': 'edit-suburb',
                            'site_state': 'edit-state',
                            'site_postcode': 'edit-postcode',
                            'nmi': 'edit-nmi',
                            'phone': 'edit-phone',
                            'email': 'edit-email',
                            // Additional fields that may be present in extraction data
                            'energy_retailer': null, // Not mapped to form field
                            'energy_supplier': null, // Not mapped to form field
                            'bill_frequency': null, // Not mapped to form field
                            'tariff_name': null, // Not mapped to form field
                            'export_credit_kwh': null, // Not mapped to form field
                            'import_bill_kwh': null, // Not mapped to form field
                            'fixed_charge_day': null, // Not mapped to form field
                            'solar_meter_charge_day': null, // Not mapped to form field
                            'price_of_import_kwh': null, // Not mapped to form field
                            'price_of_export_kwh': null, // Not mapped to form field
                            'demand_charge': null, // Not mapped to form field
                            'annual_export_kwh': null, // Not mapped to form field
                            'annual_import_kwh': null, // Not mapped to form field
                            'annual_bill': null, // Not mapped to form field
                            'ai_follow_up_notes': null // Not mapped to form field
                        };
                        
                        Object.keys(extractedData).forEach(key => {
                            const elementId = fieldMapping[key];
                            if (elementId) {
                                const input = document.getElementById(elementId);
                                if (input && extractedData[key]) {
                                    input.value = extractedData[key];
                                    console.log(`✅ Populated ${elementId} with:`, extractedData[key]);
                                } else {
                                    console.log(`⚠️ Input not found or no value for: ${key} (element ID: ${elementId})`);
                                }
                            } else {
                                // Only log warning for fields that are not explicitly mapped as null
                                if (fieldMapping.hasOwnProperty(key)) {
                                    console.log(`ℹ️ Field not mapped to form: ${key} (intentionally not displayed)`);
                                } else {
                                    console.log(`⚠️ No mapping found for field: ${key}`);
                                }
                            }
                        });
                        
                        // Store review data for later use
                        window.reviewData = reviewData;
                        window.fileUrls = reviewData.fileUrls;
                        window.uploadedFiles = reviewData.uploadedFiles;
                        
                        // CRITICAL FIX: Ensure global extractedData includes merged contact details
                        window.extractedData = extractedData;
                        console.log('✅ LEADCONNECTOR: Global extractedData updated with merged contact details for authority form');
                        
                        // Store LeadConnector parameters if available
                        if (reviewData.leadConnectorParams) {
                            window.leadConnectorParams = reviewData.leadConnectorParams;
                            console.log('🔗 LeadConnector parameters from review:', reviewData.leadConnectorParams);
                            
                            // For existing clients in review flow, trigger LeadConnector processing
                            const { cid, oid } = reviewData.leadConnectorParams;
                            if (cid || oid) {
                                console.log('🔄 LEADCONNECTOR: Triggering background processing for existing client in review flow...');
                                
                                // First, prepare the LeadConnector session
                                fetch('/api/leadconnector/prepare', {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                    },
                                    body: JSON.stringify({
                                        contactId: cid || null,
                                        opportunityId: oid || null
                                    })
                                })
                                .then(response => response.json())
                                .then(data => {
                                    if (data.success) {
                                        console.log('✅ LEADCONNECTOR: Background processing initiated successfully for review flow');
                                        window.leadConnectorSession = data.sessionId;
                                        
                                        // Now trigger the processing with the stored bill data
                                        if (reviewData.extractionResult && reviewData.fileUrls) {
                                            console.log('🔄 LEADCONNECTOR: Processing bill data for existing client in review flow...');
                                            console.log('📎 LEADCONNECTOR: File URLs being sent:', reviewData.fileUrls);
                                            
                                            fetch('/api/leadconnector/process', {
                                                method: 'POST',
                                                headers: {
                                                    'Content-Type': 'application/json',
                                                },
                                                body: JSON.stringify({
                                                    sessionId: data.sessionId,
                                                    extractionResult: reviewData.extractionResult,
                                                    fileUrls: reviewData.fileUrls
                                                })
                                            })
                                            .then(response => response.json())
                                            .then(processData => {
                                                if (processData.success) {
                                                    console.log('✅ LEADCONNECTOR: Bill processing completed successfully for existing client in review flow');
                                                    window.leadConnectorResult = processData.result;
                                                } else {
                                                    console.warn('⚠️ LEADCONNECTOR: Bill processing failed for existing client in review flow:', processData.error);
                                                }
                                            })
                                            .catch(error => {
                                                console.warn('⚠️ LEADCONNECTOR: Bill processing error for existing client in review flow:', error);
                                            });
                                        } else {
                                            console.warn('⚠️ LEADCONNECTOR: No extraction result or file URLs available for review flow processing');
                                        }
                                    } else {
                                        console.warn('⚠️ LEADCONNECTOR: Background processing failed for review flow:', data.error);
                                    }
                                })
                                .catch(error => {
                                    console.warn('⚠️ LEADCONNECTOR: Background processing error for review flow:', error);
                                });
                            }
                        }
                        
                        // Populate phone and email from contact details if available
                        if (reviewData.contactDetails) {
                            console.log('👤 Contact details found in review data:', reviewData.contactDetails);
                            
                            // Extract phone and email from contact details
                            let phone = null;
                            let email = null;
                            
                            // Check standard fields first
                            if (reviewData.contactDetails.phone) {
                                phone = reviewData.contactDetails.phone;
                            } else if (reviewData.contactDetails.mobile) {
                                phone = reviewData.contactDetails.mobile;
                            }
                            
                            if (reviewData.contactDetails.email) {
                                email = reviewData.contactDetails.email;
                            }
                            
                            // Check custom fields if standard fields are empty
                            if (!phone && reviewData.contactDetails.custom_fields) {
                                const customFields = reviewData.contactDetails.custom_fields;
                                phone = customFields.phone || customFields.mobile || customFields.Phone || customFields.Mobile;
                            }
                            
                            if (!email && reviewData.contactDetails.custom_fields) {
                                const customFields = reviewData.contactDetails.custom_fields;
                                email = customFields.email || customFields.Email;
                            }
                            
                            // Populate form fields if values are found
                            if (phone) {
                                const phoneElement = document.getElementById('edit-phone');
                                if (phoneElement) {
                                    phoneElement.value = phone;
                                    console.log('✅ Populated phone from contact details:', phone);
                                }
                            }
                            
                            if (email) {
                                const emailElement = document.getElementById('edit-email');
                                if (emailElement) {
                                    emailElement.value = email;
                                    console.log('✅ Populated email from contact details:', email);
                                }
                            }
                            
                            // Store contact details for later use
                            window.contactDetails = reviewData.contactDetails;
                        } else {
                            console.log('ℹ️ No contact details found in review data');
                        }
                        
                        // Hide file upload section and show data confirmation
                        const uploadArea = document.getElementById('uploadArea');
                        const step1 = document.getElementById('step1');
                        const step2 = document.getElementById('step2');
                        
                        if (uploadArea) {
                            uploadArea.style.display = 'none';
                            console.log('✅ Hidden upload area');
                        } else {
                            console.log('⚠️ Upload area element not found');
                        }
                        
                        if (step1) {
                            step1.classList.remove('active');
                            step1.classList.add('completed');
                            console.log('✅ Updated step1 classes');
                        } else {
                            console.log('⚠️ Step1 element not found');
                        }
                        
                        if (step2) {
                            step2.classList.add('active');
                            console.log('✅ Updated step2 classes');
                        } else {
                            console.log('⚠️ Step2 element not found');
                        }
                        
                        // Update step navigation - go to step 2
                        if (typeof goToStep === 'function') {
                            goToStep(2);
                            console.log('✅ Navigated to step 2');
                        } else {
                            console.log('⚠️ goToStep function not found');
                        }
                        
                        console.log('✅ Review mode activated - form populated and ready for confirmation');
                    } else {
                        console.error('❌ Failed to load review data:', data.error);
                        alert('Failed to load review data: ' + (data.error || 'Unknown error'));
                    }
                })
                .catch(error => {
                    if (error.message === 'REVIEW_COMPLETED') {
                        // This is expected - review was already completed
                        console.log('ℹ️ Review was already completed, showing completion message');
                        return;
                    }
                    
                    console.error('❌ Error loading review data:', error);
                    console.error('❌ Error details:', error.message);
                    alert('Error loading review data. Please try again.');
                });
        }
        
        // Function to show friendly completion message
        function showCompletedReviewMessage(data) {
            // Hide the upload area and show completion message
            const uploadArea = document.getElementById('uploadArea');
            const step1 = document.getElementById('step1');
            const step2 = document.getElementById('step2');
            const step3 = document.getElementById('step3');
            const step4 = document.getElementById('step4');
            
            if (uploadArea) uploadArea.style.display = 'none';
            
            // Mark all steps as completed
            if (step1) {
                step1.classList.remove('active');
                step1.classList.add('completed');
            }
            if (step2) {
                step2.classList.remove('active');
                step2.classList.add('completed');
            }
            if (step3) {
                step3.classList.remove('active');
                step3.classList.add('completed');
            }
            if (step4) {
                step4.classList.remove('active');
                step4.classList.add('completed');
            }
            
            // Create completion message
            const completionMessage = `
                <div style="text-align: center; padding: 40px; max-width: 600px; margin: 0 auto;">
                    <div style="margin-bottom: 30px;">
                        <h2 style="color: #28a745; margin-bottom: 20px;">✅ Authority Letter Already Sent!</h2>
                        <p style="font-size: 1.1rem; line-height: 1.6; color: #666;">
                            Thank you for completing your authority letter! Your signed authority form has already been sent to Essential Energy.
                        </p>
                        <p style="font-size: 1rem; line-height: 1.6; color: #666; margin-top: 15px;">
                            We will analyse your electricity usage data and contact you to discuss your solar options.
                        </p>
                    </div>
                    
                    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0;">
                        <h3 style="color: #333; margin-bottom: 15px;">What happens next?</h3>
                        <ul style="text-align: left; line-height: 1.6; color: #666;">
                            <li>Essential Energy will process your authority request</li>
                            <li>We'll receive your electricity usage data</li>
                            <li>A specialist will analyse your consumption patterns</li>
                            <li>We'll contact you to discuss your solar options</li>
                        </ul>
                    </div>
                    
                    <div style="margin-top: 30px;">
                        <div style="margin-top: 20px; text-align: center;">
                            <p style="color: #666; font-size: 1rem; line-height: 1.6;">
                                <a href="${appSettings?.branding?.marketing?.url || 'https://newenglandsolarpower.com.au/the-perfect-solar-spot-and-how-to-achieve-it/'}" target="_blank" style="color: #007bff; text-decoration: underline;">${appSettings?.branding?.marketing?.text || 'Want to find out how to create the perfect power spot?'}</a>
                            </p>
                        </div>
                    </div>
                </div>
            `;
            
            // Replace the main content with completion message
            const formContainer = document.querySelector('.form-container');
            if (formContainer) {
                formContainer.innerHTML = completionMessage;
            }
            
            // Show solar analysis if available
            if (data.solarAnalysis) {
                setTimeout(() => {
                    showSolarAnalysis(data.solarAnalysis);
                }, 1000);
            }
        }
        
        // Load review data if review ID is present
        if (reviewId) {
            loadReviewData();
        }

        // File upload handling
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('files');
        const submitBtn = document.getElementById('submitBtn');
        const loading = document.getElementById('loading');
        const result = document.getElementById('result');
        const processingOverlay = document.getElementById('processingOverlay');
        const uploadText = document.getElementById('uploadText');
        const uploadHint = document.getElementById('uploadHint');

        let selectedFiles = [];


        // Drag and drop functionality
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
            // Auto-dismiss any existing error messages when user drags over upload area
            hideErrorMessages();
        });

        // Flag to prevent multiple rapid clicks
        let isProcessingFile = false;
        
        // Click on upload area to trigger file selection
        uploadArea.addEventListener('click', () => {
            // Prevent multiple rapid clicks
            if (isProcessingFile) {
                return;
            }
            
            // Auto-dismiss any existing error messages when user clicks upload area
            hideErrorMessages();
            
            // Use mobile file input on mobile devices
            if (isMobile) {
                const mobileFileInput = document.getElementById('mobileFileInput');
                if (mobileFileInput) {
                    isProcessingFile = true;
                    mobileFileInput.click();
                }
                // Don't fall back to original file input on mobile - it's hidden
            } else {
                // Use regular file input on desktop
                fileInput.click();
            }
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            const files = Array.from(e.dataTransfer.files);
            addFiles(files);
            // Auto-dismiss any existing error messages when user drops files
            hideErrorMessages();
        });

        fileInput.addEventListener('change', (e) => {
            const files = Array.from(e.target.files);
            addFiles(files);
            // Auto-dismiss any existing error messages when user selects new files
            hideErrorMessages();
        });

        function addFiles(files) {
            files.forEach(file => {
                if (isValidFile(file)) {
                    selectedFiles.push(file);
                }
            });
            updateFileList();
            updateSubmitButton();
        }
        
        function updateFileList() {
            const fileList = document.getElementById('fileList');
            const fileItems = document.getElementById('fileItems');
            
            if (selectedFiles.length === 0) {
                fileList.style.display = 'none';
                return;
            }
            
            fileList.style.display = 'block';
            fileItems.innerHTML = '';
            
            selectedFiles.forEach((file, index) => {
                const fileItem = document.createElement('div');
                fileItem.className = 'file-item';
                
                const fileIcon = getFileIcon(file.type);
                const fileSize = formatFileSize(file.size);
                
                // Shorten filename to ensure Remove button is visible
                const shortFileName = file.name.length > 30 ? file.name.substring(0, 27) + '...' : file.name;
                
                fileItem.innerHTML = `
                    <div class="file-info">
                        <span class="file-icon">${fileIcon}</span>
                        <div>
                            <div class="file-name" title="${file.name}">${shortFileName}</div>
                            <div class="file-size">${fileSize}</div>
                        </div>
                    </div>
                    <button type="button" class="remove-btn" onclick="removeFile(${index})">Remove</button>
                `;
                
                fileItems.appendChild(fileItem);
            });
            
            // Scroll to bottom to keep Send Bill Data button visible
            if (selectedFiles.length > 0) {
                setTimeout(() => {
                    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
                }, 100);
            }
        }
        
        function removeFile(index) {
            selectedFiles.splice(index, 1);
            updateFileList();
            updateSubmitButton();
            // Auto-dismiss any existing error messages when user removes files
            hideErrorMessages();
        }
        
        function getFileIcon(fileType) {
            if (fileType === 'application/pdf') return '📄';
            if (fileType.includes('image')) return '🖼️';
            return '📁';
        }
        
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        function isValidFile(file) {
            const validTypes = ['application/pdf', 'image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
            const maxSize = 10 * 1024 * 1024; // 10MB

            if (!validTypes.includes(file.type)) {
                alert(`Invalid file type: ${file.name}. Please upload PDF or image files only.`);
                return false;
            }

            if (file.size > maxSize) {
                alert(`File too large: ${file.name}. Maximum size is 10MB.`);
                return false;
            }

            return true;
        }

                 function updateSubmitButton() {
             submitBtn.disabled = selectedFiles.length === 0;
         }
 
         function disableInteractions() {
             uploadArea.style.pointerEvents = 'none';
             fileInput.disabled = true;
             
             // Disable mobile file input if it exists
             const mobileFileInput = document.getElementById('mobileFileInput');
             if (mobileFileInput) {
                 mobileFileInput.disabled = true;
             }
             
             // Disable all remove buttons
             const removeButtons = document.querySelectorAll('.remove-btn');
             removeButtons.forEach(btn => {
                 btn.disabled = true;
                 btn.style.opacity = '0.5';
                 btn.style.cursor = 'not-allowed';
             });
         }
 
         function enableInteractions() {
             uploadArea.style.pointerEvents = 'auto';
             fileInput.disabled = false;
             
             // Enable mobile file input if it exists
             const mobileFileInput = document.getElementById('mobileFileInput');
             if (mobileFileInput) {
                 mobileFileInput.disabled = false;
             }
             
             // Enable all remove buttons
             const removeButtons = document.querySelectorAll('.remove-btn');
             removeButtons.forEach(btn => {
                 btn.disabled = false;
                 btn.style.opacity = '1';
                 btn.style.cursor = 'pointer';
             });
         }

        // Form submission
        document.getElementById('uploadForm').addEventListener('submit', async (e) => {
            e.preventDefault();

            // Handle review mode - skip file upload and go directly to confirmation
            if (isReviewMode && reviewData) {
                console.log('🔍 Review mode detected - proceeding to confirmation');
                
                // Use the extracted data from review data
                extractedData = reviewData.extractionResult;
                console.log('📝 Using extracted data from review:', extractedData);
                
                // Store the extracted data for the confirmation step
                window.extractedData = extractedData;
                
                // Move to step 2 (confirmation)
                document.getElementById('step1').classList.remove('active');
                document.getElementById('step1').classList.add('completed');
                document.getElementById('step2').classList.add('active');
                if (typeof goToStep === 'function') {
                    goToStep(2);
                }
                
                return;
            }

            if (selectedFiles.length === 0) {
                alert('Please select at least one file to upload.');
                return;
            }
            
            // Auto-dismiss any existing error messages when user submits form
            hideErrorMessages();

                         submitBtn.disabled = true;
             submitBtn.textContent = 'Processing...';
             
             // Set processing overlay message for bill extraction
             const processingTitle = document.getElementById('processingTitle');
             const processingMessage = document.getElementById('processingMessage');
             processingTitle.textContent = 'Processing Your Bills';
             processingMessage.textContent = 'One moment please. We are reading your electricity bill(s)...';
             
             processingOverlay.style.display = 'block';
             result.style.display = 'none';
             disableInteractions();

            const formData = new FormData();
            selectedFiles.forEach(file => {
                formData.append('files', file);
            });
            
            // Use LeadConnector parameters from review data if available, otherwise from URL
            let oidToUse = opportunityId;
            let cidToUse = contactId;
            
            if (isReviewMode && reviewData && reviewData.leadConnectorParams) {
                oidToUse = reviewData.leadConnectorParams.oid || opportunityId;
                cidToUse = reviewData.leadConnectorParams.cid || contactId;
                console.log('🔗 Using LeadConnector parameters from review data:', { oid: oidToUse, cid: cidToUse });
            }
            
            // Phone and email come from LeadConnector contact API call, not URL parameters
            formData.append('oid', oidToUse);
            formData.append('cid', cidToUse);
            
            // Add session ID if available (for file naming)
            if (window.sessionId) {
                formData.append('sessionId', window.sessionId);
                console.log('📋 Adding session ID to upload:', window.sessionId);
            }

            try {
                const xhr = new XMLHttpRequest();

                xhr.addEventListener('load', async () => {
                    if (xhr.status === 200) {
                                                try {
                            const data = JSON.parse(xhr.responseText);
                            

                            // Check if we have extraction result (new format) or result (old format)
                            const extractionData = data.extractionResult || data.result;
                            
                            if (extractionData && Object.keys(extractionData).length > 0) {
                                processingOverlay.style.display = 'none';
                                submitBtn.disabled = false;
                                submitBtn.textContent = 'Send Bill Data';
                                enableInteractions();
                                extractedData = extractionData;
                                
                                // Store LeadConnector parameters for later use
                                window.leadConnectorParams = data.leadConnectorParams || {};
                                
                                // Store file URLs for new clients (needed for bill attachments)
                                if (data.fileUrls) {
                                    window.fileUrls = data.fileUrls;
                                    console.log('📎 File URLs stored for new client:', data.fileUrls);
                                }
                                
                                // Store uploaded files for cleanup
                                if (data.uploadedFiles) {
                                    window.uploadedFiles = data.uploadedFiles;
                                    console.log('📁 Uploaded files stored for cleanup:', data.uploadedFiles);
                                }
                                
                                // Store session ID for tracking
                                if (data.sessionId) {
                                    window.sessionId = data.sessionId;
                                    console.log('📋 Session ID stored for tracking:', data.sessionId);
                                }
                                
                                // Handle immediate LeadConnector result (now decoupled - will be null for existing clients)
                                if (data.leadConnectorResult) {
                                    window.immediateLeadConnectorResult = data.leadConnectorResult;
                                }
                                
                                // For existing clients, LeadConnector processing happens in background
                                if (cidToUse || oidToUse) {
                                    console.log('🔄 LEADCONNECTOR: Processing will continue in background for existing client');
                                    
                                    // Trigger LeadConnector processing with extraction result
                                    if (window.leadConnectorSession) {
                                        console.log('🔄 LEADCONNECTOR: Triggering opportunity update...');
                                        console.log('📎 LEADCONNECTOR: File URLs being sent:', data.fileUrls);
                                        fetch('/api/leadconnector/process', {
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'application/json',
                                            },
                                            body: JSON.stringify({
                                                sessionId: data.sessionId,
                                                extractionResult: extractedData,
                                                fileUrls: data.fileUrls || {}
                                            })
                                        })
                                        .then(response => response.json())
                                        .then(processData => {
                                            if (processData.success) {
                                                console.log('✅ LEADCONNECTOR: Opportunity update completed successfully');
                                                window.leadConnectorResult = processData.result;
                                            } else {
                                                console.warn('⚠️ LEADCONNECTOR: Opportunity update failed:', processData.error);
                                            }
                                        })
                                        .catch(error => {
                                            console.warn('⚠️ LEADCONNECTOR: Opportunity update error:', error);
                                            // Don't block the UI for LeadConnector errors
                                        });
                                    } else {
                                        console.warn('⚠️ LEADCONNECTOR: No session ID available for opportunity update');
                                    }
                                }
                            
                            // Load contact details if contactId is available and we don't have them cached
                            if (contactId && !window.contactDetails) {
                                console.log('📞 Loading contact details for validation...');
                                // Load contact details before checking missing fields
                                try {
                                    const contactResponse = await fetch(`/get-contact-details?contactId=${contactId}`);
                                    const contactData = await contactResponse.json();
                                    if (contactData.success && contactData.contactDetails) {
                                        window.contactDetails = contactData.contactDetails;
                                        console.log('✅ Contact details loaded for validation:', window.contactDetails);
                                    } else {
                                        console.log('❌ Failed to load contact details:', contactData);
                                    }
                                } catch (contactError) {
                                    console.error('❌ Error loading contact details for validation:', contactError);
                                }
                            } else if (window.contactDetails) {
                                console.log('📞 Using cached contact details for validation:', window.contactDetails);
                            }
                            
                            // Always go to Step 2 with extracted data (filled or empty)
                            populateEditForm(extractedData);
                            goToStep(2);
                            
                            // Redirect to unified review URL for session persistence
                            if (data.sessionId) {
                                const baseUrl = window.location.origin;
                                const reviewUrl = `${baseUrl}/?review=${data.sessionId}`;
                                console.log('🔄 REDIRECT: Redirecting to unified review URL:', reviewUrl);
                                
                                // Use replace to avoid back button issues
                                window.history.replaceState({}, '', reviewUrl);
                            }
                                                                                     } else {
                                processingOverlay.style.display = 'none';
                                submitBtn.disabled = false;
                                submitBtn.textContent = 'Send Bill Data';
                                enableInteractions();
                                showResult('error', `Error: ${data.error || 'No extraction data received'}`);
                            }
                                                                  } catch (parseError) {
                             processingOverlay.style.display = 'none';
                             submitBtn.disabled = false;
                             submitBtn.textContent = 'Send Bill Data';
                             enableInteractions();
                             showResult('error', `Error parsing response: ${parseError.message}`);
                         }
                                         } else {
                        processingOverlay.style.display = 'none';
                        submitBtn.disabled = false;
                        submitBtn.textContent = 'Send Bill Data';
                        enableInteractions();
                        
                        // Enhanced error handling for specific status codes
                        let errorMessage = `Upload failed with status: ${xhr.status}`;
                        
                        try {
                            const errorData = JSON.parse(xhr.responseText);
                            if (errorData.error) {
                                errorMessage = errorData.error;
                                
                                // Add mobile-specific hints if available
                                if (errorData.mobileHint) {
                                    errorMessage += '\n\n' + errorData.mobileHint;
                                }
                                
                                // Handle specific error codes
                                if (errorData.errorCode === 'FILE_TOO_LARGE') {
                                    errorMessage = 'File is too large. Please select a smaller file (under 10MB).';
                                } else if (errorData.errorCode === 'INVALID_FILE_TYPE') {
                                    errorMessage = 'Invalid file type. Please select a PDF or image file (JPG, PNG, WEBP).';
                                    if (errorData.mobileHint && errorData.mobileHint.includes('Google Drive')) {
                                        errorMessage = 'Invalid file type. Google Drive files are supported, but please ensure you select a PDF or image file (JPG, PNG, WEBP).';
                                    }
                                } else if (errorData.errorCode === 'NO_FILES') {
                                    errorMessage = 'No files selected. Please choose a file to upload.';
                                } else if (errorData.errorCode === 'UPLOAD_TIMEOUT') {
                                    errorMessage = 'Upload timed out. Please try again with a smaller file or better connection.';
                                } else if (errorData.errorCode === 'PROCESSING_TIMEOUT') {
                                    errorMessage = 'Processing timed out. Please try again.';
                                }
                            }
                        } catch (parseError) {
                            frontendError('UPLOAD', 'Error parsing error response:', parseError);
                        }
                        
                        showResult('error', errorMessage);
                    }
                 });
 
                                 xhr.addEventListener('error', (event) => {
                                            frontendError('UPLOAD', 'Upload error:', event);
                    processingOverlay.style.display = 'none';
                    submitBtn.disabled = false;
                    submitBtn.textContent = 'Send Bill Data';
                    enableInteractions();
                    
                    // Enhanced error message for mobile users
                    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
                    let errorMessage = 'Upload failed. Please check your connection and try again.';
                    
                    if (isMobile) {
                        errorMessage = 'Upload failed. This might be due to:\n' +
                                     '• Poor internet connection\n' +
                                     '• File size too large\n' +
                                     '• File type not supported\n' +
                                     'Please try again with a smaller file or better connection.';
                    }
                    
                    showResult('error', errorMessage);
                });

                // Set timeout for the request (5 minutes)
                xhr.timeout = 300000; // 5 minutes
                
                xhr.addEventListener('timeout', () => {
                                            frontendError('UPLOAD', 'Upload timeout');
                    processingOverlay.style.display = 'none';
                    submitBtn.disabled = false;
                    submitBtn.textContent = 'Send Bill Data';
                    enableInteractions();
                    showResult('error', 'Upload timed out. Please try again with a smaller file or better connection.');
                });
                
                xhr.open('POST', '/upload');
                xhr.send(formData);

                         } catch (error) {
                 processingOverlay.style.display = 'none';
                 submitBtn.disabled = false;
                 submitBtn.textContent = 'Send Bill Data';
                 enableInteractions();
                 showResult('error', `Network error: ${error.message}`);
             }
        });

        function checkMissingFieldsFromForm() {
            const mandatoryFields = [
                'bill_first_name',
                'bill_last_name',
                'email',
                'phone',
                'site_street_address',
                'site_suburb',
                'site_state',
                'site_postcode',
                'nmi'
            ];
            
            const formElements = {
                'bill_first_name': 'edit-first-name',
                'bill_last_name': 'edit-last-name',
                'email': 'edit-email',
                'phone': 'edit-phone',
                'site_street_address': 'edit-street-address',
                'site_suburb': 'edit-suburb',
                'site_state': 'edit-state',
                'site_postcode': 'edit-postcode',
                'nmi': 'edit-nmi'
            };
            
            const missing = [];
            mandatoryFields.forEach(field => {
                const elementId = formElements[field];
                const element = document.getElementById(elementId);
                if (element) {
                    const value = element.value;
                    if (!value || value.trim() === '') {
                        missing.push(field);
                    }
                } else {
                    console.warn(`⚠️ Form element not found: ${elementId} for field: ${field}`);
                    missing.push(field);
                }
            });
            
            return missing;
        }


        function getNestedValue(obj, path) {
            return path.split('.').reduce((current, key) => {
                return current && current[key] !== undefined ? current[key] : null;
            }, obj);
        }


        function showMissingFieldsForm(extractedData, followUpNotes) {
            // Update labels to show all fields as required
            const phoneLabel = 'Phone Number *';
            const emailLabel = 'Email Address *';
            // Get contact details for phone/email population
            let contactPhone = '';
            let contactEmail = '';
            
            // Check if we already have contact details cached
            if (window.contactDetails) {
                contactPhone = window.contactDetails.phone || window.contactDetails['contact.phone'] || '';
                contactEmail = window.contactDetails.email || window.contactDetails['contact.email'] || '';
                
                // Check custom fields for phone and email
                if (window.contactDetails.customFields && Array.isArray(window.contactDetails.customFields)) {
                    window.contactDetails.customFields.forEach(field => {
                        if (field.key === 'phone' && field.value && !contactPhone) {
                            contactPhone = field.value;
                        }
                        if (field.key === 'email' && field.value && !contactEmail) {
                            contactEmail = field.value;
                        }
                    });
                }
            }
            
            // Fetch contact details from LeadConnector if contactId is available and we don't have them cached
            if (contactId && !window.contactDetails) {
                fetch(`/get-contact-details?contactId=${contactId}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.success && data.contactDetails) {
                            window.contactDetails = data.contactDetails;
                            updateFormWithContactDetails(data.contactDetails);
                        }
                    })
                    .catch(error => {
                        frontendError('LEADCONNECTOR', 'Error getting contact details for missing fields page:', error);
                    });
            }

            const result = document.getElementById('result');
            result.className = 'result';
            result.style.display = 'block';

            const manualForm = document.createElement('div');
            manualForm.className = 'edit-form';
            manualForm.setAttribute('data-form-type', 'energy-bill-extraction');
            manualForm.innerHTML = `
                <h3>Review and Complete Information</h3>
                <p>Fields that were successfully extracted are pre-filled below. Please complete any missing required fields:</p>
                <div id="missing-fields-warning" style="display: none;" class="missing-fields">
                    <h3>⚠️ Some Information Missing</h3>
                    <p>The following required information is still missing:</p>
                    <ul id="missing-fields-list"></ul>
                </div>
                <div class="form-row">
                    <div class="form-col">
                        <label for="manual-first-name">First Name *</label>
                        <input type="text" id="manual-first-name" name="bill_first_name" value="${extractedData.bill_first_name || ''}" autocomplete="given-name">
                    </div>
                    <div class="form-col">
                        <label for="manual-last-name">Last Name *</label>
                        <input type="text" id="manual-last-name" name="bill_last_name" value="${extractedData.bill_last_name || ''}" autocomplete="family-name">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-col">
                        <label for="manual-business-name">Business Name (Optional)</label>
                        <input type="text" id="manual-business-name" name="business_name" value="${extractedData.business_name || ''}" autocomplete="organization">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-col">
                        <label for="manual-street-address">Street Address *</label>
                        <input type="text" id="manual-street-address" name="site_street_address" value="${extractedData.site_street_address || ''}" autocomplete="street-address">
                    </div>
                    <div class="form-col">
                        <label for="manual-suburb">Suburb *</label>
                        <input type="text" id="manual-suburb" name="site_suburb" value="${extractedData.site_suburb || ''}" autocomplete="address-level2">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-col">
                        <label for="manual-state">State *</label>
                        <input type="text" id="manual-state" name="site_state" value="${extractedData.site_state || ''}" autocomplete="address-level1">
                    </div>
                    <div class="form-col">
                        <label for="manual-postcode">Postcode *</label>
                        <input type="text" id="manual-postcode" name="site_postcode" value="${extractedData.site_postcode || ''}" autocomplete="postal-code">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-col">
                        <label for="manual-nmi">NMI (National Meter Identifier) *</label>
                        <input type="text" id="manual-nmi" name="nmi" value="${extractedData.nmi || ''}" autocomplete="off">
                    </div>
                    <div class="form-col">
                        <label for="manual-phone">${phoneLabel}</label>
                        <input type="text" id="manual-phone" name="phone" value="${contactPhone || extractedData.phone || extractedData['contact.phone'] || ''}" autocomplete="tel">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-col">
                        <label for="manual-email">${emailLabel}</label>
                        <input type="email" id="manual-email" name="email" value="${contactEmail || extractedData.email || extractedData['contact.email'] || ''}" autocomplete="email">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-col">
                        <button type="button" class="btn btn-primary" onclick="proceedWithManualData()">Confirm Details</button>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-col">
                        <button type="button" class="btn btn-secondary" onclick="goToStep(2)">Skip to Review</button>
                    </div>
                </div>
            `;

            result.appendChild(manualForm);
            
            // Add real-time validation listeners
            addRealTimeValidationListeners();
        }

        function showStep2ValidationWarning(missingFields) {
            const fieldNames = {
                'bill_first_name': 'First Name',
                'bill_last_name': 'Last Name',
                'email': 'Email Address',
                'phone': 'Phone Number',
                'site_street_address': 'Street Address',
                'site_suburb': 'Suburb',
                'site_state': 'State',
                'site_postcode': 'Postcode',
                'nmi': 'NMI (National Meter Identifier)'
            };
            
            const missingFieldNames = missingFields.map(field => fieldNames[field] || field);
            const message = `Please fill in the following required fields: ${missingFieldNames.join(', ')}`;
            
            // Show warning message above the form
            const warningDiv = document.createElement('div');
            warningDiv.className = 'missing-fields';
            warningDiv.id = 'step2-validation-warning';
            warningDiv.style.marginBottom = '20px';
            warningDiv.innerHTML = `
                <h3>⚠️ Missing Required Information</h3>
                <p>The following required fields are still empty:</p>
                <ul id="missing-fields-list">
                    ${missingFields.map(field => `<li data-field="${field}"><strong>${fieldNames[field]}</strong></li>`).join('')}
                </ul>
                <p>Please complete all required fields before proceeding.</p>
            `;
            
            // Insert warning before the edit form
            const editForm = document.getElementById('editForm');
            if (editForm && editForm.parentNode) {
                editForm.parentNode.insertBefore(warningDiv, editForm);
            }
            
            // Scroll to the warning
            warningDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
        
        function updateStep2ValidationWarning() {
            const warningDiv = document.getElementById('step2-validation-warning');
            if (!warningDiv) return;
            
            // Get current form values
            const formElements = {
                'bill_first_name': 'edit-first-name',
                'bill_last_name': 'edit-last-name',
                'email': 'edit-email',
                'phone': 'edit-phone',
                'site_street_address': 'edit-street-address',
                'site_suburb': 'edit-suburb',
                'site_state': 'edit-state',
                'site_postcode': 'edit-postcode',
                'nmi': 'edit-nmi'
            };
            
            const fieldNames = {
                'bill_first_name': 'First Name',
                'bill_last_name': 'Last Name',
                'email': 'Email Address',
                'phone': 'Phone Number',
                'site_street_address': 'Street Address',
                'site_suburb': 'Suburb',
                'site_state': 'State',
                'site_postcode': 'Postcode',
                'nmi': 'NMI (National Meter Identifier)'
            };
            
            // Check which fields are still missing
            const currentMissingFields = [];
            Object.keys(formElements).forEach(fieldKey => {
                const elementId = formElements[fieldKey];
                const element = document.getElementById(elementId);
                if (element && (!element.value || element.value.trim() === '')) {
                    currentMissingFields.push(fieldKey);
                }
            });
            
            // Update the warning list
            const missingFieldsList = warningDiv.querySelector('#missing-fields-list');
            if (missingFieldsList) {
                if (currentMissingFields.length === 0) {
                    // All fields are filled, remove the warning
                    warningDiv.remove();
                } else {
                    // Update the list with remaining missing fields
                    missingFieldsList.innerHTML = currentMissingFields.map(field => 
                        `<li data-field="${field}"><strong>${fieldNames[field]}</strong></li>`
                    ).join('');
                }
            }
        }

        function showMissingFieldsWarning(missingFields, followUpNotes, extractedData) {
            // Update labels to show all fields as required
            const phoneLabel = 'Phone Number *';
            const emailLabel = 'Email Address *';
            // Get contact details for phone/email population
            let contactPhone = '';
            let contactEmail = '';
            
            // Check if we already have contact details cached
            if (window.contactDetails) {
                contactPhone = window.contactDetails.phone || window.contactDetails['contact.phone'] || '';
                contactEmail = window.contactDetails.email || window.contactDetails['contact.email'] || '';
                
                // Check custom fields for phone and email
                if (window.contactDetails.customFields && Array.isArray(window.contactDetails.customFields)) {
                    window.contactDetails.customFields.forEach(field => {
                        if (field.key === 'phone' && field.value && !contactPhone) {
                            contactPhone = field.value;
                        }
                        if (field.key === 'email' && field.value && !contactEmail) {
                            contactEmail = field.value;
                        }
                    });
                }
            }
            
            // Fetch contact details from LeadConnector if contactId is available and we don't have them cached
            if (contactId && !window.contactDetails) {
                fetch(`/get-contact-details?contactId=${contactId}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.success && data.contactDetails) {
                            window.contactDetails = data.contactDetails;
                            updateFormWithContactDetails(data.contactDetails);
                        }
                    })
                    .catch(error => {
                        frontendError('LEADCONNECTOR', 'Error getting contact details for missing fields page:', error);
                    });
            }
            const missingFieldsNames = {
                'bill_first_name': 'First Name',
                'bill_last_name': 'Last Name',
                'email': 'Email',
                'phone': 'Phone',
                'site_street_address': 'Street Address',
                'site_suburb': 'Suburb',
                'site_state': 'State',
                'site_postcode': 'Postcode',
                'nmi': 'NMI (National Meter Identifier)'
            };

            let warningHtml = `
                <div class="missing-fields">
                    <h3>⚠️ Some Information Missing</h3>
                    <p>The following required information could not be extracted from your uploaded document:</p>
                    <ul>
                        ${missingFields.map(field => `<li><strong>${missingFieldsNames[field]}</strong></li>`).join('')}
                    </ul>
                    ${followUpNotes ? `<p><strong>Please note:</strong> ${followUpNotes}</p>` : ''}
                    <p>Please either:</p>
                    <ul>
                        <li>Upload a different electricity bill that contains this information, or</li>
                        <li>Enter the missing details manually below</li>
                    </ul>
                </div>
            `;

            const result = document.getElementById('result');
            result.className = 'result error';
            result.innerHTML = warningHtml;
            result.style.display = 'block';

            const manualForm = document.createElement('div');
            manualForm.className = 'edit-form';
            manualForm.setAttribute('data-form-type', 'energy-bill-extraction');
            manualForm.innerHTML = `
                <h3>Review and Complete Information</h3>
                <p>Fields that were successfully extracted are pre-filled below. Please complete the missing required fields:</p>
                <div class="form-row">
                    <div class="form-col">
                        <label for="manual-first-name">First Name *</label>
                                                    <input type="text" id="manual-first-name" name="bill_first_name" value="${extractedData.bill_first_name || ''}" autocomplete="given-name">
                        </div>
                        <div class="form-col">
                            <label for="manual-last-name">Last Name *</label>
                            <input type="text" id="manual-last-name" name="bill_last_name" value="${extractedData.bill_last_name || ''}" autocomplete="family-name">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-col">
                        <label for="manual-business-name">Business Name (Optional)</label>
                                                    <input type="text" id="manual-business-name" name="business_name" value="${extractedData.business_name || ''}" autocomplete="organization">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-col">
                        <label for="manual-street-address">Street Address *</label>
                                                    <input type="text" id="manual-street-address" name="site_street_address" value="${extractedData.site_street_address || ''}" autocomplete="street-address">
                        </div>
                        <div class="form-col">
                            <label for="manual-suburb">Suburb *</label>
                            <input type="text" id="manual-suburb" name="site_suburb" value="${extractedData.site_suburb || ''}" autocomplete="address-level2">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-col">
                        <label for="manual-state">State *</label>
                                                    <input type="text" id="manual-state" name="site_state" value="${extractedData.site_state || ''}" autocomplete="address-level1">
                        </div>
                        <div class="form-col">
                            <label for="manual-postcode">Postcode *</label>
                            <input type="text" id="manual-postcode" name="site_postcode" value="${extractedData.site_postcode || ''}" autocomplete="postal-code">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-col">
                        <label for="manual-nmi">NMI (National Meter Identifier) *</label>
                        <input type="text" id="manual-nmi" name="nmi" value="${extractedData.nmi || ''}" autocomplete="off">
                    </div>
                    <div class="form-col">
                        <label for="manual-phone">${phoneLabel}</label>
                        <input type="text" id="manual-phone" name="phone" value="${contactPhone || extractedData.phone || extractedData['contact.phone'] || ''}" autocomplete="tel">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-col">
                        <label for="manual-email">${emailLabel}</label>
                        <input type="email" id="manual-email" name="email" value="${contactEmail || extractedData.email || extractedData['contact.email'] || ''}" autocomplete="email">
                    </div>
                </div>
                <div class="action-buttons" style="justify-content: space-between; gap: 15px;">
                    <button type="button" class="btn btn-secondary" onclick="resetUpload()">Upload Different Bill</button>
                    <button type="button" class="btn btn-primary" onclick="proceedWithManualData()">Confirm Details</button>
                </div>
            `;
            result.appendChild(manualForm);
            
            // Add event listeners to manual input fields to auto-dismiss error messages
            addManualInputEventListeners();
        }

        function addRealTimeValidationListeners() {
            const mandatoryFields = [
                'bill_first_name',
                'bill_last_name',
                'email',
                'phone',
                'site_street_address',
                'site_suburb',
                'site_state',
                'site_postcode',
                'nmi'
            ];
            
            const fieldNames = {
                'bill_first_name': 'First Name',
                'bill_last_name': 'Last Name',
                'email': 'Email',
                'phone': 'Phone',
                'site_street_address': 'Street Address',
                'site_suburb': 'Suburb',
                'site_state': 'State',
                'site_postcode': 'Postcode',
                'nmi': 'NMI (National Meter Identifier)'
            };
            
            mandatoryFields.forEach(field => {
                const input = document.getElementById(`manual-${field.replace('_', '-')}`);
                if (input) {
                    input.addEventListener('input', () => {
                        updateMissingFieldsWarning();
                    });
                }
            });
        }
        
        function updateMissingFieldsWarning() {
            const mandatoryFields = [
                'bill_first_name',
                'bill_last_name',
                'email',
                'phone',
                'site_street_address',
                'site_suburb',
                'site_state',
                'site_postcode',
                'nmi'
            ];
            
            const fieldNames = {
                'bill_first_name': 'First Name',
                'bill_last_name': 'Last Name',
                'email': 'Email',
                'phone': 'Phone',
                'site_street_address': 'Street Address',
                'site_suburb': 'Suburb',
                'site_state': 'State',
                'site_postcode': 'Postcode',
                'nmi': 'NMI (National Meter Identifier)'
            };
            
            const missingFields = [];
            mandatoryFields.forEach(field => {
                const input = document.getElementById(`manual-${field.replace('_', '-')}`);
                if (input && (!input.value || input.value.trim() === '')) {
                    missingFields.push(field);
                }
            });
            
            const warningDiv = document.getElementById('missing-fields-warning');
            const missingFieldsList = document.getElementById('missing-fields-list');
            
            if (missingFields.length > 0) {
                missingFieldsList.innerHTML = missingFields.map(field => 
                    `<li><strong>${fieldNames[field]}</strong></li>`
                ).join('');
                warningDiv.style.display = 'block';
            } else {
                warningDiv.style.display = 'none';
            }
        }

        function proceedWithManualData() {
            const manualData = {
                'bill_first_name': document.getElementById('manual-first-name').value.trim(),
                'bill_last_name': document.getElementById('manual-last-name').value.trim(),
                'business_name': document.getElementById('manual-business-name').value.trim(),
                'site_street_address': document.getElementById('manual-street-address').value.trim(),
                'site_suburb': document.getElementById('manual-suburb').value.trim(),
                'site_state': document.getElementById('manual-state').value.trim(),
                'site_postcode': document.getElementById('manual-postcode').value.trim(),
                'nmi': document.getElementById('manual-nmi').value.trim(),
                'phone': document.getElementById('manual-phone').value.trim(),
                'email': document.getElementById('manual-email').value.trim()
            };

            // Check if all mandatory fields are filled in the form
            const mandatoryFields = [
                'bill_first_name',
                'bill_last_name',
                'email',
                'phone',
                'site_street_address',
                'site_suburb',
                'site_state',
                'site_postcode',
                'nmi'
            ];
            
            const missingFields = mandatoryFields.filter(field => !manualData[field] || manualData[field] === '');
            
            if (missingFields.length === 0) {
                // All mandatory fields are filled, update extractedData and proceed
                Object.keys(manualData).forEach(key => {
                    if (manualData[key]) {
                        extractedData[key] = manualData[key];
                    }
                });
                
                // Clear the result div completely and proceed to Step 2
                const result = document.getElementById('result');
                result.style.display = 'none';
                result.innerHTML = '';
                
                populateEditForm(extractedData);
                goToStep(2);
            } else {
                // Show validation message for missing mandatory fields
                updateMissingFieldsWarning();
            }
        }


        function setNestedValue(obj, path, value) {
            const keys = path.split('.');
            const lastKey = keys.pop();
            const target = keys.reduce((current, key) => {
                if (!current[key]) current[key] = {};
                return current[key];
            }, obj);
            target[lastKey] = value;
        }

        function resetUpload() {
            selectedFiles = [];
            updateFileList();
            updateSubmitButton();
            result.style.display = 'none';
            document.getElementById('uploadForm').reset();
        }

        function populateEditForm(data) {
            // Extract values directly from the flat data structure
            const firstName = data.bill_first_name || '';
            const lastName = data.bill_last_name || '';
            const businessName = data.business_name || '';
            const streetAddress = data.site_street_address || '';
            const suburb = data.site_suburb || '';
            const state = data.site_state || '';
            const postcode = data.site_postcode || '';
            const nmi = data.nmi || '';
            const phone = data.phone || '';
            const email = data.email || '';
            
            document.getElementById('edit-first-name').value = firstName;
            document.getElementById('edit-last-name').value = lastName;
            document.getElementById('edit-business-name').value = businessName;
            document.getElementById('edit-street-address').value = streetAddress;
            document.getElementById('edit-suburb').value = suburb;
            document.getElementById('edit-state').value = state;
            document.getElementById('edit-postcode').value = postcode;
            document.getElementById('edit-nmi').value = nmi;
            document.getElementById('edit-phone').value = phone;
            document.getElementById('edit-email').value = email;
            
            // Add event listeners to edit form inputs to auto-dismiss error messages
            addEditFormEventListeners();
            
            // Add validation warning clearing on input
            addStep2ValidationListeners();
            
            // If we have LeadConnector params, try to get contact details for phone/email
            if (window.leadConnectorParams?.contactId) {
                getContactDetailsForForm(window.leadConnectorParams.contactId);
            }
        }

        function getContactDetailsForForm(contactId) {
            // Check if we already have contact details cached
            if (window.contactDetails) {
                updateFormWithContactDetails(window.contactDetails);
                return;
            }
            
            fetch(`/get-contact-details?contactId=${contactId}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success && data.contactDetails) {
                    updateFormWithContactDetails(data.contactDetails);
                    // Store contact details for later use in confirm-details
                    window.contactDetails = data.contactDetails;
                }
            })
            .catch(error => {
                                    frontendError('LEADCONNECTOR', 'Error getting contact details for form:', error);
            });
        }
        
        function transformDataStructure(data) {
            const transformed = {
                email: data.email || '',
                phone: formatPhoneNumber(data.phone || ''),
                contact: {}
            };
            
            // Transform flat contact fields to nested structure
            Object.keys(data).forEach(key => {
                if (key.startsWith('contact.')) {
                    const fieldName = key.replace('contact.', '');
                    transformed.contact[fieldName] = data[key];
                }
            });
            
            return transformed;
        }
        
        function formatPhoneNumber(phone) {
            if (!phone) return '';
            
            // Remove any non-digit characters
            let cleaned = phone.replace(/\D/g, '');
            
            // If it starts with 61, replace with 0
            if (cleaned.startsWith('61')) {
                cleaned = '0' + cleaned.substring(2);
            }
            
            return cleaned;
        }

        function proceedToAuthority() {
            // Auto-dismiss any existing error messages when user proceeds to authority
            hideErrorMessages();
            
            console.log('🔍 proceedToAuthority - extractedData:', extractedData);
            console.log('🔍 proceedToAuthority - isReviewMode:', isReviewMode);
            console.log('🔍 proceedToAuthority - window.reviewData:', window.reviewData);
            
            // In review mode, we should use the existing extracted data from the review
            if (isReviewMode && window.reviewData) {
                console.log('🔍 Review mode - using existing extracted data from review');
                // Use the extracted data as-is from the review
                // No need to update from form elements since we're in review mode
            } else {
                // Normal mode - update the extracted data with form values
                const formElements = {
                    'bill_first_name': 'edit-first-name',
                    'bill_last_name': 'edit-last-name',
                    'business_name': 'edit-business-name',
                    'site_street_address': 'edit-street-address',
                    'site_suburb': 'edit-suburb',
                    'site_state': 'edit-state',
                    'site_postcode': 'edit-postcode',
                    'nmi': 'edit-nmi',
                    'phone': 'edit-phone',
                    'email': 'edit-email'
                };
                
                // Safely update extracted data with form values
                Object.keys(formElements).forEach(key => {
                    const elementId = formElements[key];
                    const element = document.getElementById(elementId);
                    if (element) {
                        extractedData[key] = element.value;
                        console.log(`✅ Updated ${key} with value:`, element.value);
                    } else {
                        console.warn(`⚠️ Form element not found: ${elementId} for field: ${key}`);
                        // Keep existing value if element not found
                    }
                });
            }

            // 🔍 VALIDATION: Check for missing required fields before proceeding
            const missingFields = checkMissingFieldsFromForm();
            if (missingFields.length > 0) {
                console.log('❌ VALIDATION: Missing required fields, showing validation warning');
                showStep2ValidationWarning(missingFields);
                return; // Stop processing if validation fails
            }
            console.log('✅ VALIDATION: All required fields present, proceeding to authority');

            // INSTANT: Show authority template immediately
            loadLetterTemplate();
            goToStep(3);
            
            // BACKGROUND: Process LeadConnector integration without blocking the UI
            processLeadConnectorIntegrationInBackground();
        }

        function processLeadConnectorIntegrationInBackground() {
            console.log('🔍 processLeadConnectorIntegrationInBackground - extractedData:', extractedData);
            console.log('🔍 processLeadConnectorIntegrationInBackground - window.extractedData:', window.extractedData);
            
            // Ensure extractedData is not null/undefined
            if (!extractedData) {
                console.error('❌ extractedData is null or undefined');
                return;
            }
            
            // Ensure leadConnectorParams has the correct structure for review mode
            let leadConnectorParams = window.leadConnectorParams || {};
            
            // In review mode, convert oid/cid to opportunityId/contactId if needed
            if (isReviewMode && window.reviewData && window.reviewData.leadConnectorParams) {
                const reviewParams = window.reviewData.leadConnectorParams;
                leadConnectorParams = {
                    ...leadConnectorParams,
                    opportunityId: reviewParams.oid || leadConnectorParams.opportunityId,
                    contactId: reviewParams.cid || leadConnectorParams.contactId
                };
                console.log('🔗 Converted review params to LeadConnector format:', leadConnectorParams);
            }
            
            const confirmData = {
                extractedData: extractedData,
                leadConnectorParams: leadConnectorParams,
                contactDetails: window.contactDetails || null,
                fileUrls: window.fileUrls || null,
                uploadedFiles: window.uploadedFiles || null,
                sessionId: window.sessionId || null // Include session ID for tracking
            };
            
            console.log('📤 Sending confirm data to server:', {
                extractedDataKeys: Object.keys(extractedData || {}),
                extractedDataValues: extractedData,
                leadConnectorParams: leadConnectorParams,
                hasContactDetails: !!window.contactDetails,
                hasFileUrls: !!window.fileUrls,
                hasUploadedFiles: !!window.uploadedFiles
            });

            fetch('/confirm-details', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(confirmData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Store LeadConnector result for authority form
                    window.leadConnectorResult = data.leadConnector;
                    
                    // Store solar analysis data for Step 4
                    if (data.solarAnalysis) {
                        window.solarAnalysisData = data.solarAnalysis;
                    }
                    
                    // Update form with contact details if available (non-blocking)
                    if (data.contactDetails) {
                        updateFormWithContactDetails(data.contactDetails);
                    }
                    
                    // Store new contact and opportunity IDs for new clients
                    if (data.isNewClient && data.newContactId && data.newOpportunityId) {
                        window.isNewClient = true; // Set flag for new client
                        if (!window.leadConnectorParams) {
                            window.leadConnectorParams = {};
                        }
                        window.leadConnectorParams.contactId = data.newContactId;
                        window.leadConnectorParams.opportunityId = data.newOpportunityId;
                        console.log('📝 LEADCONNECTOR: Stored new client IDs:', {
                            contactId: data.newContactId,
                            opportunityId: data.newOpportunityId
                        });
                    }
                } else {
                    frontendError('LEADCONNECTOR', 'Background integration failed:', data.error);
                    // Don't show alert to user since this is background processing
                }
            })
            .catch(error => {
                                    frontendError('LEADCONNECTOR', 'Background network error:', error);
                // Don't show alert to user since this is background processing
            });
        }

        function updateFormWithContactDetails(contactDetails) {
            // Extract phone and email from contact details
            let phone = contactDetails.phone || contactDetails['contact.phone'] || '';
            let email = contactDetails.email || contactDetails['contact.email'] || '';
            
            // Check custom fields for phone and email
            if (contactDetails.customFields && Array.isArray(contactDetails.customFields)) {
                contactDetails.customFields.forEach(field => {
                    if (field.key === 'phone' && field.value && !phone) {
                        phone = field.value;
                    }
                    if (field.key === 'email' && field.value && !email) {
                        email = field.value;
                    }
                });
            }
            
            // Update phone and email fields in all forms (Step 2 and Some Information Missing)
            const phoneFields = [
                document.getElementById('edit-phone'),
                document.getElementById('manual-phone')
            ];
            
            const emailFields = [
                document.getElementById('edit-email'),
                document.getElementById('manual-email')
            ];
            
            // Update phone fields if they exist and are empty
            phoneFields.forEach(field => {
                if (field && phone && !field.value) {
                    field.value = phone;
                }
            });
            
            // Update email fields if they exist and are empty
            emailFields.forEach(field => {
                if (field && email && !field.value) {
                    field.value = email;
                }
            });
        }

        function loadLetterTemplate() {
            console.log('📝 Loading letter template...');
            fetch('/api/letter-template')
                .then(response => {
                    console.log('📡 Template response status:', response.status);
                    return response.text();
                })
                .then(html => {
                    console.log('📄 Template HTML loaded, length:', html.length);
                    console.log('📄 Template HTML preview:', html.substring(0, 500));
                    const letterPreview = document.getElementById('letterPreview');
                    letterPreview.innerHTML = html;
                    
                    // Debug: Check what elements are actually in the DOM
                    setTimeout(() => {
                        console.log('🔍 DOM Debug - Elements found:');
                        console.log('  customerNMI:', document.getElementById('customerNMI'));
                        console.log('  customerPremises:', document.getElementById('customerPremises'));
                        console.log('  customerNameBody:', document.getElementById('customerNameBody'));
                        console.log('  customerAddressBody:', document.getElementById('customerAddressBody'));
                        console.log('  letterPreview.innerHTML length:', letterPreview.innerHTML.length);
                        console.log('  letterPreview.innerHTML contains customerNMI:', letterPreview.innerHTML.includes('customerNMI'));
                        
                        console.log('⏰ Template loaded, calling populateLetterWithData...');
                        populateLetterWithData();
                    }, 500); // Increased to 500ms to ensure DOM is fully ready
                })
                .catch(error => {
                    console.error('❌ Error loading letter template:', error);
                    frontendError('TEMPLATE', 'Error loading letter template:', error);
                    // Fallback to simple letter
                    populateSimpleLetter();
                });
        }
        
        function populateLetterWithData() {
            console.log('🔄 Attempting to populate letter with data...');
            console.log('📊 Extracted data:', extractedData);
            
            // Check if template has loaded by looking for key elements
            const letterPreview = document.getElementById('letterPreview');
            const hasTemplateContent = letterPreview && letterPreview.innerHTML && 
                (letterPreview.innerHTML.includes('customerNMI') || letterPreview.innerHTML.includes('LetterTemplate'));
            
            // Also check if specific elements exist in the DOM
            const customerNMI = document.getElementById('customerNMI');
            const customerPremises = document.getElementById('customerPremises');
            const hasRequiredElements = customerNMI && customerPremises;
            
            if (!hasTemplateContent || !hasRequiredElements) {
                console.warn('⚠️ Template content or required elements not yet loaded, waiting...');
                setTimeout(populateLetterWithData, 300);
                return;
            }
            
            // Use the reliable manual population process directly
            console.log('🔄 Using reliable manual population process...');
            populateLetterManually().then(() => {
                // Initialize signature canvas after manual population
                setTimeout(() => {
                    console.log('🎨 Initializing signature canvas after manual population...');
                    initInlineSignatureCanvas();
                }, 100);
            }).catch(error => {
                console.error('❌ Error in manual population:', error);
            });
        }
        
        async function populateLetterManually() {
            // Ensure we have extractedData
            if (!extractedData) {
                console.error('❌ extractedData is null in populateLetterManually');
                return;
            }
            
            console.log('📝 MANUAL: Starting data-driven letter population...');
            console.log('📊 MANUAL: Using extracted data:', extractedData);
            
            try {
                // Fetch company branding information
                console.log('📝 MANUAL: Fetching branding data...');
                const brandingResponse = await fetch('/api/branding');
                if (!brandingResponse.ok) {
                    throw new Error(`Failed to fetch branding: ${brandingResponse.status}`);
                }
                const branding = await brandingResponse.json();
                console.log('📝 MANUAL: Fetched branding data:', branding);
                
                // Set current date with proper formatting
                const today = new Date();
                const yesterday = new Date(today);
                yesterday.setDate(today.getDate() - 1);
                
                const months = ['January', 'February', 'March', 'April', 'May', 'June', 
                              'July', 'August', 'September', 'October', 'November', 'December'];
                
                const dateStr = today.getDate() + ' ' + months[today.getMonth()] + ' ' + today.getFullYear();
                const yesterdayStr = yesterday.getDate() + ' ' + months[yesterday.getMonth()] + ' ' + yesterday.getFullYear();
                
                // Create the complete letter HTML using our data
                const letterHTML = `
                    <style>
                        body {
                            font-family: 'Times New Roman', serif;
                            line-height: 1.6;
                            margin: 0;
                            padding: 20px;
                            background: white;
                        }
                        
                        .letter-container {
                            max-width: 800px;
                            margin: 0 auto;
                            background: white;
                            padding: 40px;
                            box-shadow: 0 0 10px rgba(0,0,0,0.1);
                        }
                        
                        .letter-header {
                            display: flex;
                            justify-content: space-between;
                            margin-bottom: 30px;
                        }
                        
                        .letter-recipient {
                            flex: 1;
                        }
                        
                        .letter-logo {
                            text-align: right;
                            flex: 1;
                        }
                        
                        .letter-logo img {
                            height: 60px;
                            max-width: 300px;
                            width: auto;
                        }
                        
                        .letter-company-info {
                            font-size: 0.9rem;
                            color: #666;
                            margin-top: 10px;
                        }
                        
                        .letter-subject {
                            font-weight: bold;
                            margin-bottom: 20px;
                            text-decoration: underline;
                        }
                        
                        .letter-body {
                            margin-bottom: 30px;
                            text-align: justify;
                        }
                        
                        .letter-signature {
                            margin-top: 40px;
                        }
                        
                        .signature-section {
                            margin-bottom: 20px;
                        }
                        
                        .signature-field {
                            margin-top: 15px;
                            min-height: 80px;
                            border-bottom: 2px solid #000;
                            position: relative;
                        }
                        
                        .signature-buttons {
                            display: flex;
                            justify-content: flex-end;
                            margin-top: 10px;
                            gap: 10px;
                        }
                        
                        .signature-button {
                            background: #e8a321;
                            color: white;
                            border: none;
                            padding: 8px 16px;
                            border-radius: 6px;
                            cursor: pointer;
                            font-weight: 600;
                            font-size: 14px;
                        }
                        
                        .signature-details {
                            text-align: left;
                            margin-top: 15px;
                        }
                        
                        .signature-details p {
                            margin: 2px 0;
                            font-size: 0.9rem;
                        }
                        
                        .customer-details {
                            background: #f8f9fa;
                            padding: 15px;
                            border-radius: 8px;
                            margin-bottom: 20px;
                            border-left: 4px solid #e8a321;
                        }
                        
                        .customer-details p {
                            margin: 5px 0;
                        }
                        
                        .nmi-highlight {
                            background: #fff3cd;
                            padding: 2px 6px;
                            border-radius: 4px;
                            font-weight: bold;
                        }
                        
                        /* Mobile responsive styles */
                        @media (max-width: 768px) {
                            .letter-container {
                                padding: 20px;
                                margin: 0;
                                box-shadow: none;
                            }
                            .letter-header {
                                flex-direction: column;
                                gap: 20px;
                            }
                            .letter-logo {
                                display: none;
                            }
                            .letter-recipient {
                                flex: none;
                                width: 100%;
                            }
                            .customer-details {
                                padding: 10px;
                                font-size: 0.9rem;
                            }
                            .letter-body {
                                font-size: 0.9rem;
                            }
                            .signature-details {
                                font-size: 0.9rem;
                            }
                        }
                    </style>
                    
                    <div class="letter-container">
                        <div class="letter-header">
                            <div class="letter-recipient">
                                <strong>Essential Energy</strong><br>
                                Attention: Customer Data Services<br>
                            </div>
                            <div class="letter-logo">
                                <img src="/${branding.logos.main}" alt="${branding.company_name}">
                                <div class="letter-company-info">
                                    ${branding.abn}<br>
                                    ${branding.address_street}, ${branding.address_city}, ${branding.address_state} ${branding.address_postcode}<br>
                                    ${branding.phone}<br>
                                    ${branding.website}<br>
                                    ${branding.emails.sender}
                                </div>
                            </div>
                        </div>
                        
                        <div class="letter-subject">
                            <strong>Re: Authority to Release Electricity Meter Data for Consumption and Export</strong>
                        </div>
                        
                        <div class="customer-details" id="customerDetails">
                            <p><strong>NMI:</strong> <span class="nmi-highlight" id="customerNMI">${extractedData.nmi || ''}</span></p>
                            <p><strong>Premises:</strong> <span id="customerPremises">${(extractedData.site_street_address || '') + ', ' + (extractedData.site_suburb || '') + ', ' + (extractedData.site_state || '') + ' ' + (extractedData.site_postcode || '')}</span></p>
                        </div>
                        
                        <div class="letter-body" id="letterBody">
                            Dear Sir or Madam,<br><br>
                            
                            I, <span id="customerNameBody">${(extractedData.bill_first_name || '') + ' ' + (extractedData.bill_last_name || '')}</span><span id="businessNameSection">${extractedData.business_name && extractedData.business_name.trim() ? ' of ' + extractedData.business_name : ''}</span> of <span id="customerAddressBody">${(extractedData.site_street_address || '') + ', ' + (extractedData.site_suburb || '') + ', ' + (extractedData.site_state || '') + ' ' + (extractedData.site_postcode || '')}</span>, hereby authorise ${branding.company_name} (${branding.abn}) to access and receive all electricity meter data - both consumption and export - for the above‐listed NMI for the last two years to <span id="yesterdayDate">${yesterdayStr}</span>.<br><br>
                            
                            I confirm that I am the account holder for the premises specified above and that the NMI quoted has been taken from my most recent electricity bill.<br><br>
                            
                            Please provide the requested data to:<br>
                            <strong>${branding.company_name}</strong>, Email: ${branding.emails.reply}<br>
                            Contact: ${branding.contact_person}, Phone: ${branding.phone}<br><br>
                            
                            Should you require any further information to process this request, do not hesitate to contact me on <span id="customerPhoneBody">${extractedData.phone || ''}</span> or <span id="customerEmailBody">${extractedData.email || ''}</span>.
                        </div>
                        
                        <div class="letter-signature">
                            <div class="signature-section">
                                <p>Yours faithfully</p>
                                <div class="signature-field" id="signatureBox" style="width: 100%; height: 100px; border: 2px solid #e8a321; border-radius: 8px; background: #fff8e6; position: relative;">
                                    <canvas id="inlineSignatureCanvas" style="width: 100%; height: 100%; border-radius: 6px; cursor: crosshair; touch-action: none;"></canvas>
                                </div>
                                <div class="signature-buttons">
                                    <button type="button" onclick="goToStep(2)" style="background: #6c757d; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px;">Back</button>
                                    <button type="button" onclick="clearInlineSignature()" style="background: #6c757d; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px;">Clear</button>
                                    <button type="button" onclick="sendAuthorityForm()" style="background: #e8a321; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px;">Send Authority</button>
                                </div>
                            </div>
                            <div class="signature-details">
                                <p id="customerSignatureNameDate">${(extractedData.bill_first_name || '') + ' ' + (extractedData.bill_last_name || '') + ', ' + dateStr}</p>
                            </div>
                        </div>
                    </div>
                `;
                
                // Replace the letterPreview content with our populated letter
                const letterPreview = document.getElementById('letterPreview');
                if (letterPreview) {
                    letterPreview.innerHTML = letterHTML;
                    console.log('✅ MANUAL: Letter populated successfully with data-driven approach');
                } else {
                    console.error('❌ MANUAL: letterPreview element not found');
                }
                
            } catch (error) {
                console.error('❌ MANUAL: Error in data-driven population:', error);
                // Fallback to simple letter
                populateSimpleLetter();
            }
        }

        function populateSimpleLetter() {
            const today = new Date();
            const dateStr = today.getDate() + ' ' + (today.getMonth() + 1) + ' ' + today.getFullYear();
            
            const letterHtml = `
                <div style="font-family: 'Times New Roman', serif; line-height: 1.6;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 30px;">
                        <div>
                            <strong>Essential Energy</strong><br>
                            Attention: Customer Data Services
                        </div>
                        <div style="text-align: right;">
                            <img src="nesp-logo.jpg" alt="New England Solar Power" style="height: 60px;">
                            <div style="font-size: 0.9rem; color: #666;">
                                ABN 86 687 447 249<br>
                                110 Taylor St, Armidale NSW 2350<br>
                                (02) 6772 6233
                            </div>
                        </div>
                    </div>
                    
                    <div style="text-align: right; margin-bottom: 20px; font-weight: bold;">
                        ${dateStr}
                    </div>
                    
                    <div style="font-weight: bold; margin-bottom: 20px; text-decoration: underline;">
                        Re: Authority to Release Electricity Meter Data for Consumption and Export
                    </div>
                    
                    <div style="margin-bottom: 30px;">
                        Dear Sir or Madam,<br><br>
                        I, ${extractedData.bill_first_name} ${extractedData.bill_last_name}, of ${extractedData.site_street_address}, ${extractedData.site_suburb}, ${extractedData.site_state} ${extractedData.site_postcode}, hereby authorise New England Solar Power (ABN 86 687 447 249) to access and receive all electricity meter data—both consumption and export—for the above-listed NMI for the last two years to ${dateStr}.<br><br>
                        I confirm that I am the account holder for the premises specified above and that the NMI quoted has been taken from my most recent electricity bill.<br><br>
                        Please provide the requested data to:<br>
                        New England Solar Power, Email: info@newenglandsolarpower.com.au<br>
                        Contact: Cameron Lawrence, Phone: 02 6772 6233<br><br>
                        Should you require any further information to process this request, do not hesitate to contact me on ${extractedData.phone} or ${extractedData.email}.
                    </div>
                    
                    <div style="margin-top: 40px;">
                        <div style="margin-bottom: 20px;">
                            <p>Yours faithfully</p>
                            <div class="signature-box" id="signatureBox" style="width: 100%; height: 100px; border: 2px solid #e8a321; border-radius: 8px; background: #fff8e6; position: relative;">
                                <canvas id="inlineSignatureCanvas" style="width: 100%; height: 100%; border-radius: 6px; cursor: crosshair; touch-action: none;"></canvas>
                            </div>
                            <div class="signature-buttons" style="display: flex; justify-content: space-between; margin-top: 10px; gap: 10px;">
                                <button type="button" onclick="goToStep(2)" style="background: #6c757d; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px;">Cancel</button>
                                <div style="display: flex; gap: 10px;">
                                    <button type="button" onclick="clearInlineSignature()" style="background: #6c757d; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px;">Clear</button>
                                    <button type="button" onclick="testSignatureCanvas()" style="background: #17a2b8; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px;">Test</button>
                                    <button type="button" onclick="sendAuthorityForm()" style="background: #e8a321; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px;">Send Authority</button>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 15px;">
                            <p>${extractedData.bill_first_name} ${extractedData.bill_last_name}, ${dateStr}</p>
                        </div>
                    </div>
                </div>
            `;
            
            document.getElementById('letterPreview').innerHTML = letterHtml;
            
            // Initialize signature canvas after letter is populated
            setTimeout(() => {
                initInlineSignatureCanvas();
            }, 50);
        }

        function goToStep(step) {
            document.querySelectorAll('.step-container').forEach(container => {
                container.classList.remove('active');
            });

            document.getElementById(`step${step}-container`).classList.add('active');

            document.querySelectorAll('.step').forEach((stepEl, index) => {
                stepEl.classList.remove('active', 'completed');
                if (index + 1 < step) {
                    stepEl.classList.add('completed');
                } else if (index + 1 === step) {
                    // For Step 4, mark it as completed immediately instead of active
                    if (step === 4) {
                        stepEl.classList.add('completed');
                    } else {
                        stepEl.classList.add('active');
                    }
                }
            });

            currentStep = step;
            
            // Scroll to top when going to Step 3 (Authority Letter)
            if (step === 3) {
                window.scrollTo({ top: 0, behavior: 'smooth' });
                // Note: Signature canvas will be initialized after template loads and letter is populated
                // This prevents the "canvas not found" error that occurs when trying to initialize too early
            }
            
            // Initialize solar calculator when going to Step 4
            if (step === 4) {
                window.scrollTo({ top: 0, behavior: 'smooth' });
                initializeSolarCalculator();
            }
        }

        // Inline Signature functionality
        function initInlineSignatureCanvas() {
            console.log('🔄 Initializing signature canvas...');
            
            const canvas = document.getElementById('inlineSignatureCanvas');
            if (!canvas) {
                console.error('❌ Signature canvas not found - this is expected if template is still loading');
                return;
            }
            
            console.log('✅ Canvas element found');
            
            const ctx = canvas.getContext('2d');
            if (!ctx) {
                console.error('❌ Could not get canvas context');
                return;
            }
            
            console.log('✅ Canvas context obtained');
            
            let isDrawing = false;
            let lastX = 0;
            let lastY = 0;

            // Set canvas size to match display size with proper scaling
            const rect = canvas.getBoundingClientRect();
            const devicePixelRatio = window.devicePixelRatio || 1;
            
            console.log('📏 Canvas rect:', rect);
            console.log('📱 Device pixel ratio:', devicePixelRatio);
            
            // Set the canvas size in memory (scaled up for retina displays)
            canvas.width = rect.width * devicePixelRatio;
            canvas.height = rect.height * devicePixelRatio;
            
            // Scale the drawing context so everything draws at the correct size
            ctx.scale(devicePixelRatio, devicePixelRatio);
            
            // Set the canvas CSS size
            canvas.style.width = rect.width + 'px';
            canvas.style.height = rect.height + 'px';

            // Clear any existing content
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Set drawing style
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 2;
            ctx.lineCap = 'round';
            ctx.lineJoin = 'round';

            console.log('🎨 Drawing style set');

            // Mouse events
            canvas.addEventListener('mousedown', startDrawing);
            canvas.addEventListener('mousemove', draw);
            canvas.addEventListener('mouseup', stopDrawing);
            canvas.addEventListener('mouseout', stopDrawing);

            // Touch events for mobile
            canvas.addEventListener('touchstart', handleTouchStart, { passive: false });
            canvas.addEventListener('touchmove', handleTouchMove, { passive: false });
            canvas.addEventListener('touchend', stopDrawing);

            console.log('📱 Event listeners added');

            function getCoordinates(e) {
                const rect = canvas.getBoundingClientRect();
                let clientX, clientY;
                
                if (e.type.includes('touch')) {
                    // Touch event
                    const touch = e.touches[0] || e.changedTouches[0];
                    clientX = touch.clientX;
                    clientY = touch.clientY;
                } else {
                    // Mouse event
                    clientX = e.clientX;
                    clientY = e.clientY;
                }
                
                const coords = {
                    x: clientX - rect.left,
                    y: clientY - rect.top
                };
                
                console.log('📍 Coordinates:', coords);
                return coords;
            }

            function startDrawing(e) {
                console.log('✏️ Start drawing');
                e.preventDefault();
                isDrawing = true;
                const coords = getCoordinates(e);
                [lastX, lastY] = [coords.x, coords.y];
                
                // Hide the signature message when user starts drawing
                const signatureMessage = document.getElementById('signatureMessage');
                if (signatureMessage) {
                    signatureMessage.style.display = 'none';
                }
                
                // Start a new path
                ctx.beginPath();
                ctx.moveTo(lastX, lastY);
            }

            function draw(e) {
                if (!isDrawing) return;
                console.log('✏️ Drawing');
                e.preventDefault();
                
                const coords = getCoordinates(e);
                
                // Draw line to current position
                ctx.lineTo(coords.x, coords.y);
                ctx.stroke();
                
                // Update last position
                [lastX, lastY] = [coords.x, coords.y];
            }

            function handleTouchStart(e) {
                console.log('📱 Touch start');
                e.preventDefault();
                startDrawing(e);
            }

            function handleTouchMove(e) {
                console.log('📱 Touch move');
                e.preventDefault();
                draw(e);
            }

            function stopDrawing() {
                console.log('✏️ Stop drawing');
                isDrawing = false;
            }
            
            console.log('✅ Signature canvas initialized successfully');
        }

        // Debug function to test signature canvas
        function testSignatureCanvas() {
            const canvas = document.getElementById('inlineSignatureCanvas');
            if (!canvas) {
                console.error('❌ Signature canvas not found for testing');
                return false;
            }
            
            const ctx = canvas.getContext('2d');
            if (!ctx) {
                console.error('❌ Could not get canvas context');
                return false;
            }
            
            console.log('✅ Canvas found and context available');
            console.log('Canvas dimensions:', canvas.width, 'x', canvas.height);
            console.log('Canvas style dimensions:', canvas.style.width, 'x', canvas.style.height);
            console.log('Device pixel ratio:', window.devicePixelRatio);
            
            // Test drawing a simple line
            ctx.strokeStyle = '#ff0000';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(10, 10);
            ctx.lineTo(50, 50);
            ctx.stroke();
            
            console.log('✅ Test drawing completed');
            return true;
        }

        function clearSignature() {
            const canvas = document.getElementById('signatureCanvas');
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        function clearInlineSignature() {
            const canvas = document.getElementById('inlineSignatureCanvas');
            if (!canvas) {
                console.error('Signature canvas not found for clearing');
                return;
            }
            
            const ctx = canvas.getContext('2d');
            const rect = canvas.getBoundingClientRect();
            const devicePixelRatio = window.devicePixelRatio || 1;
            
            // Clear the entire canvas
            ctx.clearRect(0, 0, rect.width * devicePixelRatio, rect.height * devicePixelRatio);
            
            console.log('✅ Signature cleared successfully');
        }

        function validateSignature() {
            const canvas = document.getElementById('inlineSignatureCanvas');
            if (!canvas) {
                console.error('Signature canvas not found for validation');
                return false;
            }
            
            // Check if there's actually a signature drawn
            const ctx = canvas.getContext('2d');
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;
            let hasSignature = false;
            
            // Check if any pixels are drawn (not transparent)
            for (let i = 3; i < data.length; i += 4) {
                if (data[i] > 0) { // Alpha channel > 0 means pixel is drawn
                    hasSignature = true;
                    break;
                }
            }
            
            if (!hasSignature) {
                // Show the integrated signature message
                const signatureMessage = document.getElementById('signatureMessage');
                if (signatureMessage) {
                    signatureMessage.style.display = 'block';
                }
                
                // Scroll to the signature field
                const signatureBox = document.getElementById('signatureBox');
                if (signatureBox) {
                    signatureBox.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
                
                return false;
            }
            
            return true;
        }


        function saveSignature() {
            const canvas = document.getElementById('signatureCanvas');
            signatureData = canvas.toDataURL();
            
            const signatureBox = document.getElementById('signatureBox');
            const signatureButton = document.getElementById('signatureButton');
            
            if (signatureBox && signatureButton) {
                signatureBox.classList.add('signed');
                signatureBox.innerHTML = '<img src="' + signatureData + '" style="max-width: 180px; max-height: 80px; object-fit: contain; position: absolute; bottom: 0; left: 0;">';
                signatureButton.style.display = 'none'; // Hide the button after signing
            }
            
            closeSignatureModal();
            
            // Automatically continue the process
            sendAuthorityForm();
        }

        function sendAuthorityForm() {
            // Check if we have a saved signature OR if there's a valid signature on canvas
            if (!signatureData && !validateSignature()) {
                return;
            }
            
            // If we don't have saved signature data but validation passed, save it now
            if (!signatureData) {
                const canvas = document.getElementById('inlineSignatureCanvas');
                signatureData = canvas.toDataURL('image/png');
                console.log('✅ Signature saved successfully');
            }

            // For new clients, ensure LeadConnector IDs are available before sending authority form
            if (window.isNewClient && (!window.leadConnectorParams?.contactId || !window.leadConnectorParams?.opportunityId)) {
                console.log('⏳ LEADCONNECTOR: Waiting for contact/opportunity creation to complete...');
                // Wait a bit and try again
                setTimeout(() => {
                    if (window.leadConnectorParams?.contactId && window.leadConnectorParams?.opportunityId) {
                        console.log('✅ LEADCONNECTOR: IDs available, sending authority form...');
                        sendAuthorityForm();
                    } else {
                        console.warn('⚠️ LEADCONNECTOR: Still waiting for IDs, retrying in 1 second...');
                        setTimeout(() => {
                            if (window.leadConnectorParams?.contactId && window.leadConnectorParams?.opportunityId) {
                                console.log('✅ LEADCONNECTOR: IDs available on retry, sending authority form...');
                                sendAuthorityForm();
                            } else {
                                console.error('❌ LEADCONNECTOR: Failed to get IDs after retries, sending without LeadConnector integration');
                                // Send anyway but log the issue
                                sendAuthorityFormInternal();
                            }
                        }, 1000);
                    }
                }, 500);
                return;
            }

            // Call the internal function to actually send the authority form
            sendAuthorityFormInternal();
        }

        function sendAuthorityFormInternal() {
            // Show processing overlay with authority-specific message
            const processingTitle = document.getElementById('processingTitle');
            const processingMessage = document.getElementById('processingMessage');
            processingTitle.textContent = 'Emailing Your Authority Letter';
            processingMessage.textContent = 'Sending your signed authority letter to Essential Energy...';
            processingOverlay.style.display = 'block';

            const authorityData = {
                extractedData: extractedData,
                signature: signatureData,
                letterContent: document.getElementById('letterPreview').innerHTML,
                opportunityId: window.leadConnectorParams?.opportunityId || '',
                contactId: window.leadConnectorParams?.contactId || '',
                phone: window.leadConnectorParams?.phone || '',
                sessionId: window.sessionId || null
            };

            console.log('📤 AUTHORITY: Sending authority form with data:', {
                hasContactId: !!authorityData.contactId,
                hasOpportunityId: !!authorityData.opportunityId,
                contactId: authorityData.contactId,
                opportunityId: authorityData.opportunityId
            });

            // Send the authority form in the background but don't wait for it
            fetch('/send-authority', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(authorityData)
            })
            .then(response => response.json())
            .then(data => {
                // Don't show processing overlay result - go directly to success
                
                // Mark review as completed when authority form is sent
                if (isReviewMode && reviewId) {
                    console.log('🔍 Review mode - marking review as completed after sending authority');
                    fetch(`/api/review/${reviewId}/complete`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            leadConnectorParams: window.leadConnectorParams || {},
                            contactDetails: window.contactDetails || null,
                            solarAnalysis: window.solarAnalysisData || null
                        })
                    })
                    .then(response => response.json())
                    .then(completeData => {
                        if (completeData.success) {
                            console.log('✅ Review marked as completed after sending authority');
                        } else {
                            console.error('❌ Failed to mark review as completed:', completeData.error);
                        }
                    })
                    .catch(error => {
                        console.error('❌ Error marking review as completed:', error);
                    });
                }
            })
            .catch(error => {
                // Don't show error to user - just log it
                                    frontendError('AUTHORITY', 'Network error:', error);
            });

            // Immediately show success message without waiting for backend
            setTimeout(() => {
                processingOverlay.style.display = 'none';
                showSuccessMessage();
            }, 1500); // Show success after 1.5 seconds
        }

        function showSuccessMessage() {
            // Turn step 3 green by adding completed class
            const step3Element = document.querySelector('.step:nth-child(3)');
            if (step3Element) {
                step3Element.classList.remove('active');
                step3Element.classList.add('completed');
            }
            
            // Go to Step 4 instead of showing final success message
            setTimeout(() => {
                goToStep(4);
            }, 1000); // Short delay to show the success briefly
        }

        function hideErrorMessages() {
            const result = document.getElementById('result');
            if (result && result.style.display === 'block') {
                result.style.display = 'none';
            }
        }

        function hideErrorMessagesOnly() {
            const result = document.getElementById('result');
            if (result && result.style.display === 'block') {
                // Only hide if it's an actual error message, not the missing details form
                const hasMissingDetailsForm = result.querySelector('.edit-form');
                if (!hasMissingDetailsForm) {
                    result.style.display = 'none';
                }
            }
        }

        function clearValidationMessage() {
            // Clear any validation-related state or messages
            // Since validation messages are shown via alert(), this mainly serves
            // to prevent console errors and provide a hook for future validation UI
            console.log('🔍 VALIDATION: Clearing validation state');
        }

        function addManualInputEventListeners() {
            // Add event listeners to all manual input fields to auto-dismiss error messages
            const manualInputs = document.querySelectorAll('#manual-first-name, #manual-last-name, #manual-business-name, #manual-street-address, #manual-suburb, #manual-state, #manual-postcode, #manual-nmi, #manual-phone, #manual-email');
            manualInputs.forEach(input => {
                input.addEventListener('input', () => {
                    // Only hide error messages, not the missing details form
                    hideErrorMessagesOnly();
                    // Clear validation message when user starts typing
                    clearValidationMessage();
                });
                input.addEventListener('focus', () => {
                    // Only hide error messages, not the missing details form
                    hideErrorMessagesOnly();
                    // Clear validation message when user focuses on a field
                    clearValidationMessage();
                });
            });
        }

        function addEditFormEventListeners() {
            // Add event listeners to all edit form input fields to auto-dismiss error messages
            const editInputs = document.querySelectorAll('#edit-first-name, #edit-last-name, #edit-business-name, #edit-street-address, #edit-suburb, #edit-state, #edit-postcode, #edit-nmi, #edit-phone, #edit-email');
            editInputs.forEach(input => {
                input.addEventListener('input', () => {
                    hideErrorMessages();
                });
                input.addEventListener('focus', () => {
                    hideErrorMessages();
                });
            });
        }
        
        function addStep2ValidationListeners() {
            // Add event listeners to update validation warnings as user types
            const editInputs = document.querySelectorAll('#edit-first-name, #edit-last-name, #edit-business-name, #edit-street-address, #edit-suburb, #edit-state, #edit-postcode, #edit-nmi, #edit-phone, #edit-email');
            editInputs.forEach(input => {
                input.addEventListener('input', () => {
                    updateStep2ValidationWarning();
                });
                input.addEventListener('focus', () => {
                    updateStep2ValidationWarning();
                });
            });
        }

        function showResult(type, message) {
            result.className = `result ${type}`;
            result.innerHTML = `<p>${message}</p>`;
            result.style.display = 'block';
        }

        // Solar Calculator Functions
        let solarData = null;
        let solarSpot = null;

        function initializeSolarCalculator() {
            
            // Populate energy data from extracted data
            if (extractedData) {
                document.getElementById('annual-import').value = extractedData.annual_import_kwh || 0;
                document.getElementById('annual-export').value = extractedData.annual_export_kwh || 0;
            }
            
            // Calculate minimum solar kW based on export
            const annualExport = extractedData ? (extractedData.annual_export_kwh || 0) : 0;
            const minSolarKw = annualExport / 1300;
            
            // Check if we have pre-analyzed solar data from Step 2
            if (window.solarAnalysisData && window.solarAnalysisData.hasSolarData) {
                // Use the pre-analyzed data
                solarData = window.solarAnalysisData.solarData;
                
                // Pre-fill the fields
                document.getElementById('solar-size').value = solarData.solar_kW;
                
                // Update prompt text
                document.getElementById('solar-prompt-text').innerHTML = 
                    `Our records indicate that you might have a <strong>${solarData.solar_kW} kW</strong> solar system. Please change to the correct details if this out outdated.`;
                
                // Use pre-calculated solar spot if available
                if (window.solarAnalysisData.solarSpot) {
                    solarSpot = window.solarAnalysisData.solarSpot;
                    renderSolarSpot();
                }
                
                // Apply minimum solar kW logic
                const currentSolarSize = parseFloat(document.getElementById('solar-size').value) || 0;
                const finalSolarSize = Math.max(currentSolarSize, minSolarKw);
                
                if (currentSolarSize < minSolarKw) {
                    document.getElementById('solar-size').value = finalSolarSize.toFixed(1);
                    
                    // Update the prompt text to reflect the minimum requirement
                    const promptElement = document.getElementById('solar-prompt-text');
                    if (promptElement) {
                        promptElement.innerHTML = `Our records indicate that you might have installed a <strong>${finalSolarSize.toFixed(1)} kW</strong> solar system. Please change to the correct details.`;
                    }
                }
                
                // Trigger initial calculation
                setTimeout(updateSolarSpot, 100);
                
            } else {
                // Fallback to original API call if no pre-analyzed data
                analyzeSolarSystem().then(() => {
                    // After getting AI response, set the minimum or use AI result if larger
                    const currentSolarSize = parseFloat(document.getElementById('solar-size').value) || 0;
                    const finalSolarSize = Math.max(currentSolarSize, minSolarKw);
                    
                    if (currentSolarSize < minSolarKw) {
                        document.getElementById('solar-size').value = finalSolarSize.toFixed(1);
                        
                        // Update the prompt text to reflect the minimum requirement
                        const promptElement = document.getElementById('solar-prompt-text');
                        if (promptElement) {
                            promptElement.innerHTML = `Our records indicate that you might have installed a <strong>${finalSolarSize.toFixed(1)} kW</strong> solar system. Please change to the correct details.`;
                        }
                    }
                    
                    // Trigger initial calculation
                    setTimeout(updateSolarSpot, 100);
                });
            }
            
            // Add event listeners for real-time calculation with debounce
            let solarSpotTimeout;
            document.getElementById('solar-size').addEventListener('input', () => {
                clearTimeout(solarSpotTimeout);
                solarSpotTimeout = setTimeout(() => {
                    updateSolarSpot();
                }, 500);
            });
            
            // Add event listeners for annual import and export fields
            document.getElementById('annual-import').addEventListener('input', () => {
                clearTimeout(solarSpotTimeout);
                solarSpotTimeout = setTimeout(() => {
                    updateSolarSpot();
                }, 500);
            });
            
            document.getElementById('annual-export').addEventListener('input', () => {
                clearTimeout(solarSpotTimeout);
                solarSpotTimeout = setTimeout(() => {
                    updateSolarSpot();
                }, 500);
            });
        }

        function analyzeSolarSystem() {
            const requestData = {
                contactDetails: window.contactDetails,
                extractedData: extractedData
            };
            
            return fetch('/analyze-solar', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.hasSolarData && data.solarData) {
                    solarData = data.solarData;
                    
                    // Pre-fill the fields
                    document.getElementById('solar-size').value = solarData.solar_kW;
                    
                    // Update prompt text
                    document.getElementById('solar-prompt-text').innerHTML = 
                        `Our records indicate that you might have installed a <strong>${solarData.solar_kW} kW</strong> solar system. Please change to the correct details.`;
                    
                    // Calculate and display solar spot
                    if (data.solarSpot) {
                        solarSpot = data.solarSpot;
                        renderSolarSpot();
                    }
                } else {
                    // No solar data available
                    document.getElementById('solar-prompt-text').innerHTML = 
                        'Enter the size of your solar system.';
                }
                
                return data; // Return the data for chaining
            })
            .catch(error => {
                                    frontendError('SOLAR', 'Error analyzing solar system:', error);
                document.getElementById('solar-prompt-text').innerHTML = 
                    'Enter the size of your solar system.';
                throw error; // Re-throw for proper error handling
            });
        }

        function updateSolarSpot() {
            const solarSizeInput = document.getElementById('solar-size').value;
            const annualImportInput = document.getElementById('annual-import').value;
            const annualExportInput = document.getElementById('annual-export').value;
            
            // Parse values and handle NaN/empty values properly
            const solarSize = parseFloat(solarSizeInput) || 0;
            const annualImport = parseFloat(annualImportInput) || 0;
            const annualExport = parseFloat(annualExportInput) || 0;
            
            // Additional validation to ensure we have valid numbers
            if (isNaN(solarSize) || isNaN(annualImport) || isNaN(annualExport)) {
                frontendError('SOLAR', 'Invalid input values detected. Please ensure all fields contain valid numbers.');
                return;
            }
            
            // Ensure all values are finite numbers (not Infinity or -Infinity)
            if (!isFinite(solarSize) || !isFinite(annualImport) || !isFinite(annualExport)) {
                frontendError('SOLAR', 'Invalid input values detected. Please ensure all fields contain valid numbers.');
                return;
            }
            
            // Calculate minimum solar kW based on export
            const minSolarKw = annualExport / 1300;
            const finalSolarSize = Math.max(solarSize, minSolarKw);
            
            // Update field if value was below minimum
            if (solarSize < minSolarKw) {
                document.getElementById('solar-size').value = finalSolarSize.toFixed(1);
            }
            
            // Update solar data
            solarData = {
                solar_kW: finalSolarSize
            };
            
            // Calculate solar spot immediately on frontend
            const clientSideSpot = calculateSolarSpotClientSide(solarData, annualImport, annualExport);
            if (clientSideSpot) {
                solarSpot = clientSideSpot;
                renderSolarSpot();
            }
            
            // Also send to backend for LeadConnector update
            calculateSolarSpot(solarData, annualImport, annualExport);
        }
        
        function displaySolarAnalysis() {
            // 📈 SOLAR ANALYSIS DISPLAY: Show solar analysis data and populate inputs
            console.log('📈 SOLAR: Displaying solar analysis');
            
            // Show Step 4 container
            goToStep(4);
            
            // Pre-populate fields if solar analysis data is available
            if (window.solarAnalysisData) {
                updateSolarInputs(window.solarAnalysisData);
            }
            
            // Pre-populate from extracted data if available
            if (extractedData) {
                if (extractedData.annual_import_kwh) {
                    document.getElementById('annual-import').value = extractedData.annual_import_kwh;
                }
                if (extractedData.annual_export_kwh) {
                    document.getElementById('annual-export').value = extractedData.annual_export_kwh;
                }
            }
            
            console.log('✅ SOLAR: Solar analysis display completed');
        }

        function updateSolarInputs(solarAnalysisData) {
            // 📊 SOLAR INPUTS: Update solar input fields with analysis data
            console.log('📊 SOLAR: Updating solar inputs with data:', solarAnalysisData);
            
            if (!solarAnalysisData) {
                console.log('⚠️ SOLAR: No solar analysis data available');
                return;
            }
            
            // Update solar system size if available
            if (solarAnalysisData.solarData && solarAnalysisData.solarData.solar_kW) {
                const solarSizeInput = document.getElementById('solar-size');
                if (solarSizeInput) {
                    solarSizeInput.value = solarAnalysisData.solarData.solar_kW;
                    console.log('✅ SOLAR: Updated solar size to', solarAnalysisData.solarData.solar_kW, 'kW');
                }
            }
            
            // Update prompt text if analysis indicates a specific size
            if (solarAnalysisData.solarData && solarAnalysisData.solarData.solar_kW) {
                const promptElement = document.getElementById('solar-prompt-text');
                if (promptElement) {
                    promptElement.innerHTML = `Our records indicate that you might have installed a <strong>${solarAnalysisData.solarData.solar_kW} kW</strong> solar system. Please change to the correct details.`;
                }
            }
            
            // Show solar spot diagram if available
            if (solarAnalysisData.solarSpot) {
                window.solarSpot = solarAnalysisData.solarSpot;
                // Trigger rendering if the render function exists
                if (typeof renderSolarSpot === 'function') {
                    renderSolarSpot();
                }
            }
            
            console.log('✅ SOLAR: Solar inputs updated successfully');
        }

        function calculateSolarSpotClientSide(solarData, annualImportKwh, annualExportKwh) {
            try {
                // Use the same settings as backend
                const kwhPerKw = 1300;
                
                // Calculate expected annual production (no degradation calculation)
                const expectedProduction = solarData.solar_kW * kwhPerKw;
                
                // Calculate solar spot components based on new formula
                // B1 = production (expectedProduction), B2 = Total Import (annualImportKwh), B3 = Total Export (annualExportKwh)
                
                // Calculate green percentage: (B1-B3)/((B1-B3)+min(B1,B2,B3)+if(B3>B2,B3-B2,B2-B3))
                const B1 = expectedProduction;
                const B2 = annualImportKwh;
                const B3 = annualExportKwh;
                
                const greenNumerator = B1 - B3;
                const greenDenominator = (B1 - B3) + Math.min(B1, B2, B3) + (B3 > B2 ? B3 - B2 : B2 - B3);
                const solarUsedPercent = greenNumerator / greenDenominator * 100;
                
                // Calculate grey percentage: (min(B1,B2,B3)+(B1-B3))/((B1-B3)+min(B1,B2,B3)+if(B3>B2,B3-B2,B2-B3))
                const greyNumerator = Math.min(B1, B2, B3) + (B1 - B3);
                const greyDenominator = (B1 - B3) + Math.min(B1, B2, B3) + (B3 > B2 ? B3 - B2 : B2 - B3);
                const solarReimportedPercent = greyNumerator / greyDenominator * 100;
                
                // Determine outer circle color and set percentages
                const isYellow = annualImportKwh < annualExportKwh;
                const netImportPercent = isYellow ? 0 : 100; // Red = 100%, Yellow = 0%
                const netExportPercent = isYellow ? 100 : 0; // Yellow = 100%, Red = 0%
                
                return {
                    netImportPercent: Math.max(0, netImportPercent),
                    netExportPercent: Math.max(0, netExportPercent),
                    solarUsedPercent: Math.max(0, solarUsedPercent),
                    solarReimportedPercent: Math.max(0, solarReimportedPercent),
                    expectedProduction: expectedProduction,
                    solarData: solarData
                };
                
            } catch (error) {
                                    frontendError('SOLAR', 'Error calculating solar spot client-side:', error);
                return null;
            }
        }

        function calculateSolarSpot(solarData, annualImportKwh, annualExportKwh) {
            // Clear any previous errors
            const errorContainer = document.getElementById('solar-spot-error');
            if (errorContainer) {
                errorContainer.style.display = 'none';
                errorContainer.textContent = '';
            }
            
            const requestData = {
                solarData: solarData,
                annualImportKwh: annualImportKwh,
                annualExportKwh: annualExportKwh,
                leadConnectorParams: {
                    opportunityId: opportunityId,
                    contactId: contactId
                }
            };
            
            // Enhanced logging for debugging mobile issues
            frontendInfo('SOLAR', 'Sending solar spot calculation request:', requestData);
            frontendInfo('SOLAR', 'Data types - annualImportKwh:', typeof annualImportKwh, 'annualExportKwh:', typeof annualExportKwh);
            frontendInfo('SOLAR', 'Raw input values - annualImportKwh:', annualImportKwh, 'annualExportKwh:', annualExportKwh);
            
            fetch('/update-solar-spot', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(errorData => {
                        throw new Error(`HTTP ${response.status}: ${errorData.error || 'Unknown error'}`);
                    });
                }
                return response.json();
            })
            .then(data => {
                frontendInfo('SOLAR', 'Solar spot calculation successful:', data);
                if (data.solarSpot) {
                    solarSpot = data.solarSpot;
                    renderSolarSpot();
                } else {
                    frontendWarn('SOLAR', 'No solarSpot data in response');
                }
            })
            .catch(error => {
                frontendError('SOLAR', 'Error calculating solar spot:', error.message);
                // Show user-friendly error message with more context
                const errorContainer = document.getElementById('solar-spot-error');
                if (errorContainer) {
                    let errorMessage = `Solar calculation error: ${error.message}`;
                    
                    // Add specific guidance for common mobile issues
                    if (error.message.includes('Invalid annualImportKwh') || error.message.includes('Invalid annualExportKwh')) {
                        errorMessage += '. Please ensure all fields contain valid numbers and try again.';
                    } else if (error.message.includes('HTTP 400')) {
                        errorMessage += '. Please check that all required fields are filled with valid numbers.';
                    }
                    
                    errorContainer.textContent = errorMessage;
                    errorContainer.style.display = 'block';
                }
            });
        }

        function renderSolarSpot() {
            if (!solarSpot) return;
            
            const diagramContainer = document.getElementById('solar-spot-diagram');
            
            // Calculate the radius for each circle based on percentages
            const baseRadius = 100;
            const netImportRadius = baseRadius * (solarSpot.netImportPercent / 100);
            const netExportRadius = baseRadius * (solarSpot.netExportPercent / 100);
            const solarUsedRadius = baseRadius * (solarSpot.solarUsedPercent / 100);
            const solarReimportedRadius = baseRadius * (solarSpot.solarReimportedPercent / 100);
            
            // Create SVG with the calculated percentages
            const svg = `
                <svg height="250" width="250" style="overflow: hidden; position: relative; display: block; margin: 0 auto;">
                    <circle cx="125" cy="125" r="100" fill="${solarSpot.netImportPercent > 0 ? '#FF0000' : '#FFFF00'}" stroke="" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
                    <circle cx="125" cy="125" r="${solarReimportedRadius}" fill="#C8C8C8" stroke="" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
                    <circle cx="125" cy="125" r="${solarUsedRadius}" fill="#80BD00" stroke="" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></circle>
                </svg>
            `;
            
            diagramContainer.innerHTML = svg;
            
            // Determine the largest color and update explanation
            updateSolarAnalysisExplanation();
        }

        function updateSolarAnalysisExplanation() {
            if (!solarSpot) return;
            
            const explanationContainer = document.getElementById('results-explanation');
            if (!explanationContainer) return;
            
            // Calculate the difference-based triggers
            const yellowOrRed = Math.max(solarSpot.netImportPercent, solarSpot.netExportPercent);
            const yellowOrRedTrigger = yellowOrRed - solarSpot.solarReimportedPercent;
            const greyTrigger = solarSpot.solarReimportedPercent - solarSpot.solarUsedPercent;
            const greenTrigger = solarSpot.solarUsedPercent;
            
            // Determine which color is showing in the 100% circle
            const isRedCircle = solarSpot.netImportPercent > solarSpot.netExportPercent;
            
            // Create an array of triggers for comparison
            const triggers = [
                { 
                    color: 'Grey', 
                    trigger: greyTrigger, 
                    explanation: 'The large grey area shows that your solar system is producing a good amount of energy, but you are using most of it at night. A battery will make a big difference for you.', 
                    bgColor: '#f5f5f5', 
                    borderColor: '#9e9e9e' 
                },
                { 
                    color: 'Green', 
                    trigger: greenTrigger, 
                    explanation: 'Your electricity usage is well aligned with your solar production. When we get your full usage data, we will analyse to see whether it can be refined or whether no changes are required', 
                    bgColor: '#e8f5e8', 
                    borderColor: '#4caf50' 
                }
            ];
            
            // Add the appropriate red or yellow trigger based on which color is showing
            if (isRedCircle) {
                triggers.push({
                    color: 'Red',
                    trigger: yellowOrRedTrigger,
                    explanation: 'You are buying a lot of electricity. A correctly sized solar system will reduce the costs of importing electricity substantially.',
                    bgColor: '#ffebee',
                    borderColor: '#f44336'
                });
            } else {
                triggers.push({
                    color: 'Yellow',
                    trigger: yellowOrRedTrigger,
                    explanation: 'It looks like your solar system might be larger than required as you are exporting a lot of electricity. Switching more appliances to electric or getting an EV might help.',
                    bgColor: '#fff8e1',
                    borderColor: '#ff9800'
                });
            }
            
            // Find the trigger with the highest value
            const largestTrigger = triggers.reduce((prev, current) => 
                (prev.trigger > current.trigger) ? prev : current
            );
            
            // Update the explanation with the appropriate message and background color
            explanationContainer.style.backgroundColor = largestTrigger.bgColor;
            explanationContainer.style.borderLeftColor = largestTrigger.borderColor;
            explanationContainer.innerHTML = `<p style="margin: 0;">${largestTrigger.explanation}</p>`;
        }


        function showFinalSuccessMessage() {
            // Turn step 4 green by adding completed class
            const step4Element = document.querySelector('.step:nth-child(4)');
            if (step4Element) {
                step4Element.classList.remove('active');
                step4Element.classList.add('completed');
            }
            
            // Scroll to top on both PC and mobile
            window.scrollTo({ top: 0, behavior: 'smooth' });
            
            const successHtml = `
                <div style="text-align: center; padding: 40px 20px;">
                    <h2 style="color: #28a745; margin-bottom: 15px;">Thank You!</h2>
                    <p style="font-size: 1.1rem; line-height: 1.6; color: #333; margin-bottom: 20px;">
                        Your authority letter has been sent to Essential Energy.
                    </p>
                    <p style="font-size: 1rem; line-height: 1.6; color: #666; margin-bottom: 30px;">
                        We will be in touch as soon as we receive your electricity meter data from Essential Energy. 
                        This typically takes 5-10 business days.
                    </p>
                    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0;">
                        <h4 style="margin-bottom: 10px; color: #333;">What happens next?</h4>
                        <ul style="text-align: left; margin-left: 20px; color: #666;">
                            <li>Essential Energy will process your authority request</li>
                            <li>They will send the meter data to us</li>
                            <li>We'll analyse your energy usage patterns</li>
                            <li>We'll make an appointment with you</li>
                            <li>Together, we'll review your requirements and find the best solution</li>
                        </ul>
                    </div>
                    <div style="margin-top: 30px; text-align: center;">
                        <p style="color: #666; font-size: 1rem; line-height: 1.6;">
                            <a href="${appSettings?.branding?.marketing?.url || 'https://newenglandsolarpower.com.au/the-perfect-solar-spot-and-how-to-achieve-it/'}" target="_blank" style="color: #007bff; text-decoration: underline;">${appSettings?.branding?.marketing?.text || 'Want to find out how to create the perfect power spot?'}</a>
                        </p>
                    </div>
                </div>
            `;
            
            document.getElementById('step4-container').innerHTML = successHtml;
        }

        // Initialize
        updateSubmitButton();
    </script>
    
    <!-- Mobile Debugging Tool -->

</body>
</html>