script.js

// Initialize Feather Icons
feather.replace();

document.addEventListener('DOMContentLoaded', function() {
const uploadBtn = document.getElementById('upload-btn');
    const pdfUpload = document.getElementById('pdf-upload');
    const resultSection = document.getElementById('result-section');
    const loadingSection = document.getElementById('loading-section');
    const downloadBtn = document.getElementById('download-btn');
    
    // Mock data structure for demonstration
    let extractedData = {
        bank_name: "",
        account_name: "",
        account_number: "",
        transaction_list: []
    };

    uploadBtn.addEventListener('click', () => {
        pdfUpload.click();
    });

    pdfUpload.addEventListener('change', async (e) => {
        const file = e.target.files[0];
        if (!file) return;

        // Show loading state
        resultSection.classList.add('hidden');
        loadingSection.classList.remove('hidden');

        // Simulate processing delay (in real app, this would be API call)
        setTimeout(() => {
            processPDF(file);
        }, 2000);
    });

    function processPDF(file) {
        // In a real app, this would send the file to your Python backend
        // For demo, we'll use mock data
        extractedData = {
            bank_name: "Global Bank International",
            account_name: "John Doe",
            account_number: "XXXX-XXXX-7890",
            transaction_list: [
                {
                    date: "2023-05-15",
                    description: "Salary Deposit",
                    debit: null,
                    credit: 4500.00,
                    currency: "USD",
                    balance: 4875.32
                },
                {
                    date: "2023-05-16",
                    description: "Amazon Online Shopping",
                    debit: 125.99,
                    credit: null,
                    currency: "USD",
                    balance: 4749.33
                },
                {
                    date: "2023-05-17",
                    description: "Starbucks Coffee",
                    debit: 5.75,
                    credit: null,
                    currency: "USD",
                    balance: 4743.58
                },
                {
                    date: "2023-05-18",
                    description: "Electric Bill Payment",
                    debit: 85.50,
                    credit: null,
                    currency: "USD",
                    balance: 4658.08
                },
                {
                    date: "2023-05-19",
                    description: "Interest Earned",
                    debit: null,
                    credit: 12.34,
                    currency: "USD",
                    balance: 4670.42
                }
            ]
        };

        displayResults(extractedData);
    }

    function displayResults(data) {
        // Update bank info
        document.getElementById('bank-name').textContent = data.bank_name;
        document.getElementById('account-name').textContent = data.account_name;
        document.getElementById('account-number').textContent = data.account_number;

        // Populate transactions table
        const tbody = document.getElementById('transactions-body');
        tbody.innerHTML = '';

        data.transaction_list.forEach(transaction => {
            const row = document.createElement('tr');
            row.className = 'hover:bg-gray-50';

            const formatCurrency = (value) => {
                if (value === null || value === undefined) return '-';
                return value.toLocaleString('en-US', {
                    style: 'currency',
                    currency: transaction.currency || 'USD'
                });
            };

            row.innerHTML = `
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${transaction.date}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${transaction.description}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm ${transaction.debit ? 'text-red-600' : 'text-gray-500'}">${formatCurrency(transaction.debit)}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm ${transaction.credit ? 'text-green-600' : 'text-gray-500'}">${formatCurrency(transaction.credit)}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${transaction.currency}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${formatCurrency(transaction.balance)}</td>
            `;

            tbody.appendChild(row);
        });

        // Show results and hide loading
        loadingSection.classList.add('hidden');
        resultSection.classList.remove('hidden');
    }

    downloadBtn.addEventListener('click', () => {
        // Create JSON file download
        const dataStr = JSON.stringify(extractedData, null, 2);
        const dataBlob = new Blob([dataStr], { type: 'application/json' });
        const url = URL.createObjectURL(dataBlob);
        
        const link = document.createElement('a');
        link.href = url;
        link.download = `bank_statement_${new Date().toISOString().split('T')[0]}.json`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    });
});