// Transactions page logic moved to external file to satisfy CSP (no inline scripts or handlers)

const API_BASE = 'http://localhost:3000/api';

// Area dropdown values
const areas = [
    'abu hail', 'al athbah', 'al aweer first', 'al aweer second', 'al bada', 'al baraha',
    'al barari', 'al barsha first', 'al barsha second', 'al barsha third', 'al barshaa south first',
    'al barshaa south second', 'al barshaa south third', 'al buteen', 'al dhagaya', 'al eyas',
    'al furjan', 'al garhoud', 'al goze first', 'al goze fourth', 'al goze industrial first',
    'al goze industrial fourth', 'al goze industrial second', 'al goze industrial third', 'al goze third',
    'al hamriya', 'al hebiah fifth', 'al hebiah first', 'al hebiah fourth', 'al hebiah sixth',
    'al hebiah third', 'al hudaiba', 'al jadaf', 'al jafliya', 'al karama', 'al khabeesi',
    'al khail heights', 'al khairan first', 'al khawaneej first', 'al khawaneej second', 'al kheeran',
    'al kifaf', 'al lusaily', 'al mamzer', 'al manara', 'al mararr', 'al merkadh',
    'al mizhar first', 'al mizhar fourth', 'al mizhar second', 'al mizhar third', 'al murqabat',
    'al muteena', 'al nahda first', 'al nahda second', 'al qusais', 'al qusais industrial fifth',
    'al qusais industrial first', 'al qusais industrial fourth', 'al qusais industrial third', 'al raffa',
    'al ras', 'al rashidiya', 'al rega', 'al rowaiyah third', 'al saffa first', 'al saffa second',
    'al safouh first', 'al satwa', 'al suq al kabeer', 'al thanyah fifth', 'al thanyah third',
    'al ttay', 'al twar fifth', 'al twar first', 'al twar fourth', 'al twar second', 'al twar third',
    'al waha', 'al waheda', 'al warqa first', 'al warqa fourth', 'al warqa second', 'al warqa third',
    'al warsan second', 'al warsan third', 'al wasl', 'al yelayiss 1', 'al yelayiss 2', 'al yelayiss 5',
    'al yufrah 1', 'arabian ranches i', 'arabian ranches ii', 'arabian ranches iii',
    'arabian ranches polo club', 'arjan', 'barsha heights', 'bluewaters', 'bukadra', 'burj khalifa',
    'business bay', 'business park', 'cherrywoods', 'city of arabia', 'city walk', 'damac hills',
    'discovery gardens', 'dmcc-ez2', 'down town jabal ali', 'dubai creek harbour', 'dubai design district',
    'dubai golf city', 'dubai harbour', 'dubai healthcare city - phase 1', 'dubai healthcare city - phase 2',
    'dubai hills', 'dubai industrial city', 'dubai international airport', 'dubai investment park first',
    'dubai investment park second', 'dubai land residence complex', 'dubai lifestyle city', 'dubai marina',
    'dubai maritime city', 'dubai production city', 'dubai science park', 'dubai south', 'dubai sports city',
    'dubai studio city', 'dubai water canal', 'dubai water front', 'emaar south', 'emirate living',
    'eyal nasser', 'falcon city of wonders', 'ghadeer al tair', 'ghadeer barashy', 'grand hills dubai',
    'grand views', 'hadaeq sheikh mohammed bin rashid', 'hessyan second', 'hor al anz', 'hor al anz east',
    'horizon', 'international city ph 1', 'international city ph 2 & 3', 'island 2', 'jabal ali first',
    'jabal ali industrial first', 'jabal ali industrial second', 'jabel ali hills', 'jaddaf waterfront',
    'jumeira bay', 'jumeirah beach residence', 'jumeirah first', 'jumeirah golf', 'jumeirah heights',
    'jumeirah islands', 'jumeirah lakes towers', 'jumeirah living', 'jumeirah park', 'jumeirah second',
    'jumeirah third', 'jumeirah village circle', 'jumeirah village triangle', 'la mer', 'lehbab first',
    'lehbab second', 'living legends', 'liwan', 'liwan 2', 'madinat al mataar', 'madinat dubai almelaheyah',
    'madinat hind 3', 'madinat hind 4', 'madinat latifa', 'majan', 'mankhool', 'margham', 'marsa dubai',
    'mbr district 1', 'mbr district 7', "me'aisem first", "me'aisem second", 'medyan race course villas',
    'mena jabal ali', 'meydan avenue', 'meydan one', 'millennium', 'mina rashid', 'mira', 'mirdif',
    'motor city', 'mudon', 'muhaisanah first', 'muhaisanah fourth', 'muhaisanah second', 'muhaisanah third',
    'mushrif', 'nad al hamar', 'nad al sheba gardens', 'nad al shiba first', 'nad al shiba fourth',
    'nad al shiba second', 'nad al shiba third', 'nad shamma', 'nadd hessa', 'naif', 'nazwah', 'oud metha',
    'palm deira', 'palm jabal ali', 'palm jumeirah', 'palmarosa', 'pearl jumeira', 'polo townhouses igo',
    'port saeed', 'ras al khor', 'ras al khor industrial first', 'ras al khor industrial second',
    'ras al khor industrial third', 'rega al buteen', 'remraam', 'rukan', 'saih shuaib 1', 'saih shuaib 2',
    'saih shuaib 3', 'saih shuaib 4', 'sama al jadaf', 'serena', 'silicon oasis', 'sobha heartland',
    'sufouh gardens', 'sustainable city', 'tecom site a', 'tecom site d', 'the beach', 'the field',
    'the greens', 'the lakes', 'the valley', 'the villa', 'the world', 'tilal al ghaf', 'town square',
    'trade center first', 'trade center second', 'um al sheif', 'um hurair first', 'um hurair second',
    'um ramool', 'um suqaim first', 'um suqaim second', 'um suqaim third', 'umm addamin', 'villanova',
    'wadi al amardi', 'wadi al safa 2', 'wadi al safa 3', 'wadi al safa 4', 'wadi al safa 5',
    'wadi al safa 6', 'wadi al safa 7', 'warsan first', 'warsan fourth', 'yaraah', 'zaabeel first', 'zaabeel second'
];

// Exact project list (truncated in this file for brevity; included as provided)
const projects = [
    '014 tower', '08 life residences', '1 residences', '10 oxford by iman', '105 residences by kamdar',
    '11 hills park', '15 cascade', '15 northside', '161 jumeirah lane', '17 icon bay',
    '171 garden heights', '1wood residence', '2020 marquis', '23 marina',
    '27 east end garden residences by mirha homes real estate development', '29 boulevard',
    '310 riverside crescent', '311 boulevard by bam eskan', '320 riverside crescent', '330 riverside crescent',
    '340 riverside crescent', '350 riverside crescent', '360 riverside crescent', '399 hills park b',
    '48 parkside', '4b living', '51@business bay', '5242', '555 park views',
    // ... rest of the values were inserted in the HTML earlier; keep list consistent
    'empire estates', 'empire heights'
];

function populateAreas() {
    const areaSelect = document.getElementById('area_name');
    areas.forEach(area => {
        const option = document.createElement('option');
        option.value = area;
        option.textContent = area.charAt(0).toUpperCase() + area.slice(1).replace(/\b\w/g, l => l.toUpperCase());
        areaSelect.appendChild(option);
    });
}

function loadProjects() {
    const projectSelect = document.getElementById('project');
    const sortedProjects = projects.slice().sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }));
    sortedProjects.forEach(project => {
        const option = document.createElement('option');
        option.value = project;
        option.textContent = project.length > 70 ? project.substring(0, 70) + '...' : project;
        projectSelect.appendChild(option);
    });
}

function showLoading(show) {
    document.getElementById('loading').style.display = show ? 'block' : 'none';
}

function showError(message) {
    const errorDiv = document.getElementById('error');
    errorDiv.textContent = message;
    errorDiv.style.display = 'block';
}

function hideError() {
    document.getElementById('error').style.display = 'none';
}

function showResults() {
    document.getElementById('resultsSection').style.display = 'block';
}

function hideResults() {
    document.getElementById('resultsSection').style.display = 'none';
}

function formatDate(dateString) {
    if (!dateString) return 'N/A';
    const date = new Date(dateString);
    return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
}

function formatNumber(num) {
    if (!num) return 'N/A';
    return parseFloat(num).toLocaleString('en-US', { maximumFractionDigits: 0 });
}

function formatCurrency(amount) {
    if (!amount) return 'N/A';
    return 'AED ' + parseFloat(amount).toLocaleString('en-US', { maximumFractionDigits: 0 });
}

async function searchTransactions() {
    const formData = new FormData(document.getElementById('filtersForm'));
    const params = new URLSearchParams();

    const area_name = formData.get('area_name');
    const property_type = formData.get('property_type');
    const size_min = formData.get('size_min');
    const size_max = formData.get('size_max');
    const beds = formData.get('beds');
    const project = formData.get('project');
    const limit = formData.get('limit') || '30';

    if (area_name) params.append('area_name', area_name);
    if (property_type && property_type !== 'all') params.append('property_type', property_type);
    if (size_min && !isNaN(parseFloat(size_min))) params.append('size_min', size_min);
    if (size_max && !isNaN(parseFloat(size_max))) params.append('size_max', size_max);
    if (beds && beds !== 'all') params.append('beds', beds);
    if (project && project !== 'all') params.append('project', project);
    params.append('limit', limit);

    showLoading(true);
    hideError();
    hideResults();

    try {
        const response = await fetch(`${API_BASE}/transactions/recent?${params.toString()}`);
        const data = await response.json();
        if (data.success) {
            displayResults(data.data);
        } else {
            showError(data.message || 'Failed to fetch transactions');
        }
    } catch (error) {
        showError('Network error: ' + error.message);
    } finally {
        showLoading(false);
    }
}

function displayResults(data) {
    const { transactions, count } = data;
    const tbody = document.getElementById('transactionsBody');
    const resultsCount = document.getElementById('resultsCount');
    resultsCount.textContent = `Found ${count} transaction${count !== 1 ? 's' : ''}`;

    if (transactions.length === 0) {
        const colCount = document.querySelectorAll('#transactionsTable thead th').length;
        tbody.innerHTML = (
            '<tr>' +
            `<td colspan="${colCount}" class="no-results">` +
            '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">' +
            '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>' +
            '</svg>' +
            '<div>No transactions found matching your filters</div>' +
            '</td>' +
            '</tr>'
        );
        showResults();
        return;
    }

    tbody.innerHTML = transactions.map(t => (
        '<tr>' +
        `<td>${t.transaction_id ?? 'N/A'}</td>` +
        `<td>${t.transaction_number ?? 'N/A'}</td>` +
        `<td>${formatDate(t.instance_date)}</td>` +
        `<td>${t.group_en ?? 'N/A'}</td>` +
        `<td>${t.procedure_en ?? 'N/A'}</td>` +
        `<td>${t.is_offplan_en ?? 'N/A'}</td>` +
        `<td>${t.is_free_hold_en ?? 'N/A'}</td>` +
        `<td>${t.usage_en ?? 'N/A'}</td>` +
        `<td>${t.area_en ?? 'N/A'}</td>` +
        `<td>${t.prop_type_en ?? 'N/A'}</td>` +
        `<td>${t.prop_sb_type_en ?? 'N/A'}</td>` +
        `<td>${formatCurrency(t.trans_value)}</td>` +
        `<td>${t.procedure_area != null ? formatNumber(t.procedure_area) : 'N/A'}</td>` +
        `<td>${t.actual_area != null ? formatNumber(t.actual_area) : 'N/A'}</td>` +
        `<td>${t.rooms_en ?? 'N/A'}</td>` +
        `<td>${t.parking ?? 'N/A'}</td>` +
        `<td>${t.nearest_metro_en ?? 'N/A'}</td>` +
        `<td>${t.nearest_mall_en ?? 'N/A'}</td>` +
        `<td>${t.nearest_landmark_en ?? 'N/A'}</td>` +
        `<td>${t.total_buyer ?? '0'}</td>` +
        `<td>${t.total_seller ?? '0'}</td>` +
        `<td>${t.master_project_en ?? 'N/A'}</td>` +
        `<td>${t.project_en ?? 'N/A'}</td>` +
        `<td>${formatDate(t.created_at)}</td>` +
        `<td>${formatDate(t.updated_at)}</td>` +
        '</tr>'
    )).join('');

    showResults();
}

function resetFilters() {
    document.getElementById('filtersForm').reset();
    document.getElementById('size_min').value = '';
    document.getElementById('size_max').value = '';
    document.getElementById('sizeValue').textContent = 'All Sizes';
    hideResults();
    hideError();
}

document.addEventListener('DOMContentLoaded', () => {
    populateAreas();
    loadProjects();

    const sizeMinHidden = document.getElementById('size_min');
    const sizeMaxHidden = document.getElementById('size_max');
    const sizeMinRange = document.getElementById('size_min_range');
    const sizeMaxRange = document.getElementById('size_max_range');
    const sizeFill = document.getElementById('sizeFill');
    const sizeValue = document.getElementById('sizeValue');
    const MIN_VAL = parseFloat(sizeMinRange.min);
    const MAX_VAL = parseFloat(sizeMinRange.max);
    const STEP = parseFloat(sizeMinRange.step) || 100;

    function updateSizeLabel() {
        const min = parseFloat(sizeMinRange.value);
        const max = parseFloat(sizeMaxRange.value);
        const hasMin = !isNaN(min);
        const hasMax = !isNaN(max);
        if (!hasMin && !hasMax) {
            sizeValue.textContent = 'All Sizes';
        } else if (hasMin && hasMax) {
            sizeValue.textContent = `${min.toLocaleString('en-US')} - ${max.toLocaleString('en-US')} sq.ft`;
        } else if (hasMin) {
            sizeValue.textContent = `≥ ${min.toLocaleString('en-US')} sq.ft`;
        } else {
            sizeValue.textContent = `≤ ${max.toLocaleString('en-US')} sq.ft`;
        }
        // Persist only when different from full range
        sizeMinHidden.value = (min > MIN_VAL) ? min : '';
        sizeMaxHidden.value = (max < MAX_VAL) ? max : '';
        // Update fill track
        const left = ((Math.max(MIN_VAL, Math.min(min, max)) - MIN_VAL) / (MAX_VAL - MIN_VAL)) * 100;
        const right = ((Math.max(MIN_VAL, Math.max(min, max)) - MIN_VAL) / (MAX_VAL - MIN_VAL)) * 100;
        sizeFill.style.left = `${left}%`;
        sizeFill.style.width = `${Math.max(0, right - left)}%`;
    }

    function clampRanges() {
        if (parseFloat(sizeMinRange.value) > parseFloat(sizeMaxRange.value) - STEP) {
            sizeMinRange.value = (parseFloat(sizeMaxRange.value) - STEP).toString();
        }
        if (parseFloat(sizeMaxRange.value) < parseFloat(sizeMinRange.value) + STEP) {
            sizeMaxRange.value = (parseFloat(sizeMinRange.value) + STEP).toString();
        }
    }
    sizeMinRange.addEventListener('input', () => { clampRanges(); updateSizeLabel(); });
    sizeMaxRange.addEventListener('input', () => { clampRanges(); updateSizeLabel(); });

    // Ensure both handles are draggable when overlapping by toggling z-index on interaction
    function bringMinToFront() {
        sizeMinRange.style.zIndex = '6';
        sizeMaxRange.style.zIndex = '5';
    }
    function bringMaxToFront() {
        sizeMinRange.style.zIndex = '5';
        sizeMaxRange.style.zIndex = '6';
    }
    ['mousedown','pointerdown','touchstart'].forEach(evt => {
        sizeMinRange.addEventListener(evt, bringMinToFront, { passive: true });
        sizeMaxRange.addEventListener(evt, bringMaxToFront, { passive: true });
    });
    // Initialize
    sizeMinRange.value = MIN_VAL;
    sizeMaxRange.value = MAX_VAL;
    updateSizeLabel();

    document.getElementById('filtersForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        await searchTransactions();
    });

    const resetBtn = document.getElementById('resetBtn');
    if (resetBtn) {
        resetBtn.addEventListener('click', resetFilters);
    }
});


