script.js

const defaultExplanations = [
    {
        id: 1,
        name: "Rajesh Kumar",
        image: "./polefalldown.jpeg",
        location: "Patan Durbar Square",
        issue: "power",
        explanation: "Scheduled maintenance by Nepal Electricity Authority for transformer upgrade. Expected to resume in 2 hours.",
        timestamp: new Date(Date.now() - 30 * 60000).toISOString(),
        verifications: 12,
        isAuthorized: true,
        organization: "Nepal Electricity Authority"
    },
    {
        id: 2,
        name: "",
        image: "./traffic1.jpeg",
        location: "Jawalakhel",
        issue: "traffic",
        explanation: "Road construction on main street. Detour available through Pulchowk. Heavy traffic expected until 6 PM.",
        timestamp: new Date(Date.now() - 120 * 60000).toISOString(),
        verifications: 8,
        isAuthorized: false,
        organization: ""
    },
    {
        id: 3,
        name: "Sita Sharma",
        image: "./water.jpeg",
        location: "Kupandole",
        issue: "water",
        explanation: "Pipeline repair work by Kathmandu Upatyaka Khanepani Limited. Water supply will resume by evening.",
        timestamp: new Date(Date.now() - 180 * 60000).toISOString(),
        verifications: 15,
        isAuthorized: true,
        organization: "Kathmandu Upatyaka Khanepani Limited"
    }
];

// Load data from localStorage or use default
let explanations = [];
let verifiedIds = new Set();

function loadData() {
    const savedExplanations = localStorage.getItem('explanations');
    const savedVerifications = localStorage.getItem('verifiedIds');
    
    if (savedExplanations) {
        explanations = JSON.parse(savedExplanations);
        // Convert timestamp strings back to Date objects
        explanations = explanations.map(exp => ({
            ...exp,
            timestamp: new Date(exp.timestamp)
        }));
    } else {
        explanations = defaultExplanations.map(exp => ({
            ...exp,
            timestamp: new Date(exp.timestamp)
        }));
    }
    
    if (savedVerifications) {
        verifiedIds = new Set(JSON.parse(savedVerifications));
    }
}

function saveData() {
    // Convert Date objects to ISO strings for storage
    const explanationsToSave = explanations.map(exp => ({
        ...exp,
        timestamp: exp.timestamp.toISOString()
    }));
    localStorage.setItem('explanations', JSON.stringify(explanationsToSave));
    localStorage.setItem('verifiedIds', JSON.stringify([...verifiedIds]));
}

loadData();

let currentFilter = 'all';
let currentLocation = '';

function formatTime(date) {
    const now = new Date();
    const diff = Math.floor((now - date) / 60000);

    if (diff < 1) return 'Just now';
    if (diff < 60) return `${diff}m ago`;
    if (diff < 1440) return `${Math.floor(diff / 60)}h ago`;
    return `${Math.floor(diff / 1440)}d ago`;
}

function getIssueLabel(issue) {
    const labels = {
        power: 'Power Cut',
        internet: 'Internet',
        water: 'Water',
        traffic: 'Traffic'
    };
    return labels[issue] || issue;
}

function renderExplanations() {
    const list = document.getElementById('explanationsList');
    const filtered = explanations.filter(exp => {
        const matchesIssue = currentFilter === 'all' || exp.issue === currentFilter;
        const matchesLocation = !currentLocation ||
            exp.location.toLowerCase().includes(currentLocation.toLowerCase());
        return matchesIssue && matchesLocation;
    });

    if (filtered.length === 0) {
        list.innerHTML = `
            <div class="empty-state">
                <div class="empty-state-icon">🔍</div>
                <h3>No explanations found</h3>
                <p>Be the first to share what's happening in your area</p>
            </div>
        `;
        return;
    }

    list.innerHTML = filtered.map(exp => `
        <div class="explanation-card ${exp.isAuthorized ? 'authorized' : ''}">
            <div class="card-name">
                Posted by: ${exp.name || 'Anonymous'}
                ${exp.isAuthorized ? `<span class="verified-badge">✓ ${exp.organization}</span>` : ''}
            </div>
            <div class="card-header">
                <span class="card-issue">${getIssueLabel(exp.issue)}</span>
                <span class="card-time">${formatTime(exp.timestamp)}</span>
            </div>
            <div class="card-location">📍 ${exp.location}</div>
            <div class="card-image">
                <img src="${exp.image}" alt="Issue image">
            </div>
            <div class="card-explanation">${exp.explanation}</div>
            <div class="card-footer">
                <button class="verify-btn ${verifiedIds.has(exp.id) ? 'verified' : ''}" 
                        onclick="verifyExplanation(${exp.id})">
                    ✓ ${verifiedIds.has(exp.id) ? exp.verifications + 1 : exp.verifications} verified
                </button>
            </div>
        </div>
    `).join('');
}

function verifyExplanation(id) {
    if (verifiedIds.has(id)) {
        verifiedIds.delete(id);
    } else {
        verifiedIds.add(id);
    }
    saveData();
    renderExplanations();
}

function openModal() {
    document.getElementById('addModal').classList.add('active');
    const locationInput = document.getElementById('locationInput').value;
    if (locationInput) {
        document.getElementById('modalLocation').value = locationInput;
    }
}

function closeModal() {
    document.getElementById('addModal').classList.remove('active');
    document.getElementById('explanationForm').reset();
    document.getElementById('authFields').style.display = 'none';
}

// Toggle authorization fields
document.getElementById('isAuthorizedCheck').addEventListener('change', function() {
    const authFields = document.getElementById('authFields');
    if (this.checked) {
        authFields.style.display = 'block';
    } else {
        authFields.style.display = 'none';
        document.getElementById('modalOrganization').value = '';
        document.getElementById('modalAuthCode').value = '';
    }
});

// Authorization codes for different organizations
const authCodes = {
    'Nepal Electricity Authority': 'nea2025',
    'Traffic Police': 'traffic2025',
    'Kathmandu Upatyaka Khanepani Limited': 'water2025',
    'Internet Service Provider': 'isp2025'
};

document.getElementById('explanationForm').addEventListener('submit', (e) => {
    e.preventDefault();

    const imageInput = document.getElementById('modalImage');
    const imageFile = imageInput.files[0];

    if (!imageFile) {
        alert('Please upload an image!');
        return;
    }

    // Check authorization
    const isAuthorizedCheck = document.getElementById('isAuthorizedCheck').checked;
    let isAuthorized = false;
    let organization = '';

    if (isAuthorizedCheck) {
        const selectedOrg = document.getElementById('modalOrganization').value;
        const enteredCode = document.getElementById('modalAuthCode').value;

        if (!selectedOrg || !enteredCode) {
            alert('Please select organization and enter authorization code!');
            return;
        }

        if (authCodes[selectedOrg] === enteredCode) {
            isAuthorized = true;
            organization = selectedOrg;
        } else {
            alert('Invalid authorization code!');
            return;
        }
    }

    const reader = new FileReader();
    reader.onload = function(event) {
        const newExplanation = {
            id: Date.now(),
            name: document.getElementById('modalName').value.trim(),
            image: event.target.result,
            location: document.getElementById('modalLocation').value,
            issue: document.getElementById('modalIssue').value,
            explanation: document.getElementById('modalExplanation').value,
            timestamp: new Date(),
            verifications: 0,
            isAuthorized: isAuthorized,
            organization: organization
        };

        explanations.unshift(newExplanation);
        saveData();
        renderExplanations();
        closeModal();
    };

    reader.readAsDataURL(imageFile);
});

document.querySelectorAll('.issue-tag').forEach(tag => {
    tag.addEventListener('click', () => {
        document.querySelectorAll('.issue-tag').forEach(t => t.classList.remove('active'));
        tag.classList.add('active');
        currentFilter = tag.dataset.issue;
        renderExplanations();
    });
});

document.getElementById('locationInput').addEventListener('input', (e) => {
    currentLocation = e.target.value;
    renderExplanations();
});

document.getElementById('addModal').addEventListener('click', (e) => {
    if (e.target.id === 'addModal') {
        closeModal();
    }
});

renderExplanations();