script.js

// ATM State Components
const ATM_STATES = {
    IDLE: 'IDLE',
    VALIDATING_CARD: 'VALIDATING_CARD',
    ENTER_PIN: 'ENTER_PIN',
    AUTHENTICATING: 'AUTHENTICATING',
    MENU: 'MENU',
    BALANCE: 'BALANCE',
    WITHDRAW: 'WITHDRAW',
    DEPOSIT: 'DEPOSIT',
    TRANSFER: 'TRANSFER',
    PROCESSING: 'PROCESSING',
    EJECT_CARD: 'EJECT_CARD',
    OUT_OF_SERVICE: 'OUT_OF_SERVICE'
};

// Internal State
let currentState = ATM_STATES.IDLE;
let atmCashAvailable = 50000;
let isOutOfService = false;
let pinAttempts = 0;
let currentInput = '';
let currentTargetAccount = '';

// Mock Database
const bankDatabase = {
    '1234-5678-9012-3456': {
        pin: '0105',
        balance: 7547.00,
        name: 'Praveen Kumar',
        valid: true
    }
};

let activeCard = null;
let transactionType = null;
let amount = 0;

// DOM Elements
const screenContent = document.getElementById('screen-content');
const screenTime = document.getElementById('screen-time');
const systemLog = document.getElementById('system-log-content');

// Hardware buttons
const btnInsertCard = document.getElementById('btn-insert-card');
const btnTakeCard = document.getElementById('btn-take-card');
const cardLight = document.getElementById('card-light');
const btnTakeCash = document.getElementById('btn-take-cash');
const btnTakeReceipt = document.getElementById('btn-take-receipt');
const printedReceipt = document.getElementById('printed-receipt');

// Keypad
const keypadButtons = document.querySelectorAll('.keypad button');

// Technician
const techTrigger = document.getElementById('technician-trigger');
const techPanel = document.getElementById('technician-panel');
const techClose = document.getElementById('tech-close');

// System Logging
function logSys(msg) {
    const time = new Date().toLocaleTimeString();
    const div = document.createElement('div');
    div.textContent = `[${time}] ${msg}`;
    systemLog.appendChild(div);
    systemLog.scrollTop = systemLog.scrollHeight;
}

// Clock update
setInterval(() => {
    screenTime.textContent = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}, 1000);

// Screen Rendering
function renderScreen(state) {
    if (isOutOfService && state !== ATM_STATES.OUT_OF_SERVICE) {
        changeState(ATM_STATES.OUT_OF_SERVICE);
        return;
    }

    screenContent.className = 'screen-content';
    screenContent.innerHTML = '';

    switch (state) {
        case ATM_STATES.IDLE:
            screenContent.innerHTML = `
                <h1 class="welcome-text">Welcome</h1>
                <p class="subtitle">Please insert your card to begin.</p>
            `;
            pinAttempts = 0;
            currentInput = '';
            currentTargetAccount = '';
            cardLight.className = 'slot-light pulsing';
            btnInsertCard.classList.remove('hidden');
            btnTakeCard.classList.add('hidden');
            break;

        case ATM_STATES.VALIDATING_CARD:
            screenContent.innerHTML = `
                <h1 class="welcome-text">Processing</h1>
                <p class="subtitle">Reading card details...</p>
            `;
            // Simulate System operation: Read & Verify
            setTimeout(() => {
                logSys('System: Validating card details');
                if (activeCard && bankDatabase[activeCard].valid) {
                    logSys('System: Card validated successfully');
                    changeState(ATM_STATES.ENTER_PIN);
                } else {
                    logSys('System: Card invalid or unreadable');
                    showError('Card Error', 'Card is invalid or expired.', ATM_STATES.EJECT_CARD);
                }
            }, 1500);
            break;

        case ATM_STATES.ENTER_PIN:
            screenContent.innerHTML = `
                <h2>Enter your PIN</h2>
                <div class="screen-input-box">${'*'.repeat(currentInput.length)}<span style="opacity:0.5">_</span></div>
                <p class="subtitle" style="margin-top:15px; font-size: 0.9rem">Press ENTER when done</p>
            `;
            break;

        case ATM_STATES.AUTHENTICATING:
            screenContent.innerHTML = `
                <h1 class="welcome-text">Authenticating</h1>
                <p class="subtitle">Verifying PIN...</p>
            `;
            setTimeout(() => {
                logSys(`System: Verifying PIN (Attempt ${pinAttempts + 1})`);
                if (bankDatabase[activeCard].pin === currentInput) {
                    logSys('System: PIN verified. User authenticated.');
                    pinAttempts = 0;
                    changeState(ATM_STATES.MENU);
                } else {
                    pinAttempts++;
                    logSys(`System: PIN verification failed. Attempt ${pinAttempts}/3`);
                    currentInput = '';
                    if (pinAttempts >= 3) {
                        logSys('System: Retaining card on repeated PIN failure.');
                        showError('Card Retained', 'Too many incorrect attempts. Card retained.', ATM_STATES.IDLE);
                        activeCard = null; // Card swallowed
                    } else {
                        showError('Incorrect PIN', `Please try again. ${3 - pinAttempts} attempts left.`, ATM_STATES.ENTER_PIN);
                    }
                }
            }, 1000);
            break;

        case ATM_STATES.MENU:
            screenContent.className = 'screen-content menu-layout';
            screenContent.innerHTML = `
                <h2 style="margin-bottom: 20px; align-self: flex-start;">Select Transaction</h2>
                <div class="menu-grid">
                    <div class="menu-item" onclick="triggerMenu('WITHDRAW')">Withdraw Cash</div>
                    <div class="menu-item" onclick="triggerMenu('DEPOSIT')">Deposit Funds</div>
                    <div class="menu-item" onclick="triggerMenu('BALANCE')">Check Balance</div>
                    <div class="menu-item" onclick="triggerMenu('TRANSFER')">Transfer Funds</div>
                    <div class="menu-item" onclick="changeState(ATM_STATES.EJECT_CARD)" style="grid-column: span 2; background: rgba(220, 38, 38, 0.2); border-color: rgba(220, 38, 38, 0.4);">End Session (Return Card)</div>
                </div>
            `;
            break;

        case ATM_STATES.BALANCE:
            logSys('System: Fetching account balance');
            screenContent.innerHTML = `
                <h2>Account Balance</h2>
                <div style="font-size: 3rem; margin: 20px 0; color: var(--accent-green);">₹${bankDatabase[activeCard].balance.toFixed(2)}</div>
                <div class="menu-grid" style="margin-top: 30px;">
                    <div class="menu-item" onclick="printReceipt('Balance Inquiry')">Print Receipt</div>
                    <div class="menu-item" onclick="changeState(ATM_STATES.MENU)">Back to Menu</div>
                </div>
            `;
            break;

        case ATM_STATES.WITHDRAW:
            screenContent.innerHTML = `
                <h2>Withdraw Cash</h2>
                <p>Enter amount in multiples of 10:</p>
                <div class="screen-input-box">₹${currentInput}<span style="opacity:0.5">_</span></div>
                <div style="margin-top:30px">
                    <button class="hardware-btn" onclick="changeState(ATM_STATES.MENU)">Cancel</button>
                </div>
            `;
            break;

        case ATM_STATES.DEPOSIT:
            screenContent.innerHTML = `
                <h2>Deposit Funds</h2>
                <p>Enter amount to deposit:</p>
                <div class="screen-input-box">₹${currentInput}<span style="opacity:0.5">_</span></div>
                <div style="margin-top:30px">
                    <button class="hardware-btn" onclick="changeState(ATM_STATES.MENU)">Cancel</button>
                </div>
            `;
            break;

        case ATM_STATES.TRANSFER:
            screenContent.innerHTML = `
                <h2>Transfer Funds</h2>
                <p>${currentTargetAccount ? 'Enter Amount:' : 'Enter Target Account (4 digits):'}</p>
                <div class="screen-input-box">${currentInput}<span style="opacity:0.5">_</span></div>
                <div style="margin-top:30px">
                    <button class="hardware-btn" onclick="changeState(ATM_STATES.MENU)">Cancel</button>
                </div>
            `;
            break;

        case ATM_STATES.PROCESSING:
            screenContent.innerHTML = `
                <h1 class="welcome-text">Processing</h1>
                <p class="subtitle">Please wait...</p>
            `;
            processTransaction();
            break;

        case ATM_STATES.EJECT_CARD:
            screenContent.innerHTML = `
                <h2>Thank You</h2>
                <p class="subtitle" style="margin-top:20px; color: var(--accent-yellow)">Please take your card.</p>
            `;
            logSys('System: Ejecting card');
            cardLight.className = 'slot-light pulsing';
            btnTakeCard.classList.remove('hidden');
            break;

        case ATM_STATES.OUT_OF_SERVICE:
            screenContent.innerHTML = `
                <h1 class="welcome-text" style="color: var(--accent-red)">Out of Service</h1>
                <p class="subtitle">We apologize for the inconvenience.</p>
            `;
            cardLight.className = 'slot-light red';
            btnInsertCard.classList.add('hidden');
            break;
    }
}

function processTransaction() {
    setTimeout(() => {
        let acc = bankDatabase[activeCard];

        if (transactionType === 'WITHDRAW') {
            logSys('System: Validating ATM cash availability');
            if (amount > atmCashAvailable) {
                logSys('System: ATM fault/Insuficcient cash');
                showError('ATM Error', 'ATM does not have enough cash.', ATM_STATES.MENU);
                return;
            }

            logSys('System: Validating withdrawal amount against balance');
            if (amount > acc.balance) {
                logSys('System: Insufficient funds in account');
                showError('Declined', 'Insufficient funds in your account.', ATM_STATES.MENU);
                return;
            }

            logSys('System: Updating account balance');
            acc.balance -= amount;
            atmCashAvailable -= amount;
            logSys(`System: Dispensing ₹${amount}. ATM balance: ₹${atmCashAvailable}`);
            recordTransaction('Withdrawal', amount);

            btnTakeCash.classList.remove('hidden');
            document.querySelector('.cash-slot').style.background = '#10b981';

            screenContent.innerHTML = `
                <h2>Please take your cash</h2>
                <div class="menu-grid" style="margin-top: 30px;">
                    <div class="menu-item" onclick="printReceipt('Withdrawal ₹'+amount)">Print Receipt</div>
                    <div class="menu-item" onclick="cleanupSlotsAndReturn()">Continue</div>
                </div>
            `;
        }
        else if (transactionType === 'DEPOSIT') {
            logSys('System: Validating deposit');
            acc.balance += amount;
            atmCashAvailable += amount;
            logSys('System: Updating account balance');
            recordTransaction('Deposit', amount);

            screenContent.innerHTML = `
                <h2>Deposit Successful</h2>
                <p>New Balance: ₹${acc.balance.toFixed(2)}</p>
                <div class="menu-grid" style="margin-top: 30px;">
                    <div class="menu-item" onclick="printReceipt('Deposit ₹'+amount)">Print Receipt</div>
                    <div class="menu-item" onclick="cleanupSlotsAndReturn()">Continue</div>
                </div>
            `;
        }
        else if (transactionType === 'TRANSFER') {
            logSys(`System: Validating target account ${currentTargetAccount}`);
            if (currentTargetAccount === '0000') {
                showError('Error', 'Invalid target account.', ATM_STATES.MENU);
                return;
            }
            logSys('System: Validating withdrawal amount against balance');
            if (amount > acc.balance) {
                showError('Declined', 'Insufficient funds for transfer.', ATM_STATES.MENU);
                return;
            }

            acc.balance -= amount;
            logSys('System: Transfer processed and balance updated');
            recordTransaction(`Transfer to ${currentTargetAccount}`, amount);

            screenContent.innerHTML = `
                <h2>Transfer Successful</h2>
                <p>Sent ₹${amount} to Account ${currentTargetAccount}</p>
                <div class="menu-grid" style="margin-top: 30px;">
                    <div class="menu-item" onclick="printReceipt('Transfer ₹'+amount)">Print Receipt</div>
                    <div class="menu-item" onclick="cleanupSlotsAndReturn()">Continue</div>
                </div>
            `;
        }
    }, 2000);
}

function recordTransaction(type, amt) {
    logSys(`System: Recording transaction: ${type}`);
    // mock DB record
}

function printReceipt(details) {
    logSys('System: Generating receipt');
    printedReceipt.innerHTML = `<b>PremiumBank</b><br><br>${details}<br><br>Avail: ₹${bankDatabase[activeCard].balance.toFixed(2)}<br><br><i>Thank You</i>`;
    printedReceipt.classList.remove('hidden');
    btnTakeReceipt.classList.remove('hidden');
    logSys('System: Hardware - Receipt printed');
}

function cleanupSlotsAndReturn() {
    btnTakeCash.classList.add('hidden');
    document.querySelector('.cash-slot').style.background = '#000';
    changeState(ATM_STATES.MENU);
}

function showError(title, msg, nextState) {
    screenContent.innerHTML = `
        <h2 style="color: var(--accent-red)">${title}</h2>
        <p>${msg}</p>
    `;
    setTimeout(() => changeState(nextState), 3000);
}

function changeState(newState) {
    currentState = newState;
    // Don't clear input when authenticating or processing — those states need it
    if (newState !== ATM_STATES.AUTHENTICATING && newState !== ATM_STATES.PROCESSING) {
        currentInput = '';
    }
    renderScreen(newState);
}

// Ensure menu scope functions are global
window.triggerMenu = function (action) {
    transactionType = action;
    changeState(ATM_STATES[action]);
};
window.changeState = changeState;
window.printReceipt = printReceipt;
window.cleanupSlotsAndReturn = cleanupSlotsAndReturn;

// Setup Keypad Events
keypadButtons.forEach(btn => {
    btn.addEventListener('click', () => {
        if (isOutOfService || currentState === ATM_STATES.PROCESSING || currentState === ATM_STATES.VALIDATING_CARD) return;

        let val = btn.textContent.trim();
        if (val === '') return;

        if (val === 'CANCEL') {
            logSys('Customer: Pressed CANCEL');
            if (currentState !== ATM_STATES.IDLE && currentState !== ATM_STATES.EJECT_CARD) {
                changeState(ATM_STATES.EJECT_CARD);
            }
        } else if (val === 'CLEAR') {
            logSys('Customer: Pressed CLEAR');
            currentInput = '';
            renderScreen(currentState);
        } else if (val === 'ENTER') {
            logSys('Customer: Pressed ENTER');
            handleEnter();
        } else if (!isNaN(val)) {
            currentInput += val;
            renderScreen(currentState);
        }
    });
});

function handleEnter() {
    if (currentState === ATM_STATES.ENTER_PIN) {
        if (currentInput.length >= 4) {
            changeState(ATM_STATES.AUTHENTICATING);
        }
    } else if (currentState === ATM_STATES.WITHDRAW || currentState === ATM_STATES.DEPOSIT) {
        let amt = parseInt(currentInput);
        if (isNaN(amt) || amt <= 0 || (currentState === ATM_STATES.WITHDRAW && amt % 10 !== 0)) {
            showError('Invalid Amount', 'Please enter a valid amount.', currentState);
            return;
        }
        amount = amt;
        changeState(ATM_STATES.PROCESSING);
    } else if (currentState === ATM_STATES.TRANSFER) {
        if (!currentTargetAccount) {
            currentTargetAccount = currentInput;
            currentInput = '';
            renderScreen(currentState);
        } else {
            amount = parseInt(currentInput);
            if (isNaN(amount) || amount <= 0) {
                showError('Invalid Amount', '', currentState);
                currentInput = '';
                return;
            }
            changeState(ATM_STATES.PROCESSING);
        }
    }
}

// Hardware Interactions
btnInsertCard.addEventListener('click', () => {
    logSys('Customer: Inserted card');
    activeCard = '1234-5678-9012-3456'; // Praveen Kumar's card
    cardLight.className = 'slot-light';
    btnInsertCard.classList.add('hidden');
    changeState(ATM_STATES.VALIDATING_CARD);
});

btnTakeCard.addEventListener('click', () => {
    logSys('Customer: Took card');
    activeCard = null;
    btnTakeCard.classList.add('hidden');
    cardLight.className = 'slot-light';
    changeState(ATM_STATES.IDLE);
});

btnTakeCash.addEventListener('click', () => {
    logSys('Customer: Took cash');
    btnTakeCash.classList.add('hidden');
    document.querySelector('.cash-slot').style.background = '#000';
});

btnTakeReceipt.addEventListener('click', () => {
    logSys('Customer: Took receipt');
    btnTakeReceipt.classList.add('hidden');
    printedReceipt.classList.add('hidden');
});

// Technician Panel Logic
let techClicks = 0;
let techTimer;

techTrigger.addEventListener('click', () => {
    techClicks++;
    clearTimeout(techTimer);
    if (techClicks >= 2) {
        techPanel.classList.remove('hidden');
        updateTechStats();
        logSys('Technician: Inspected ATM panel');
        techClicks = 0;
    } else {
        techTimer = setTimeout(() => techClicks = 0, 500);
    }
});

techClose.addEventListener('click', () => {
    techPanel.classList.add('hidden');
});

// Technician Operations bindings
document.getElementById('tech-refill-cash').addEventListener('click', () => {
    atmCashAvailable = 50000;
    logSys('Technician: Refilled cash to ₹50,000');
    updateTechStats();
});

document.getElementById('tech-repair').addEventListener('click', () => {
    logSys('Technician: Running diagnostics & repair...');
    setTimeout(() => {
        isOutOfService = false;
        logSys('Technician: ATM Repaired successfully');
        document.getElementById('tech-atm-status').textContent = 'Online';
        document.getElementById('tech-atm-status').className = 'stat-value status-online';
        if (currentState === ATM_STATES.OUT_OF_SERVICE) {
            changeState(ATM_STATES.IDLE);
        }
        updateTechStats();
    }, 1000);
});

document.getElementById('tech-restart').addEventListener('click', () => {
    logSys('Technician: Restarting ATM System...');
    techPanel.classList.add('hidden');
    changeState(ATM_STATES.OUT_OF_SERVICE);
    setTimeout(() => {
        isOutOfService = false;
        logSys('[SYSTEM] ATM Restarted successfully');
        changeState(ATM_STATES.IDLE);
    }, 2000);
});

document.getElementById('tech-toggle-service').addEventListener('click', () => {
    isOutOfService = !isOutOfService;
    logSys(`Technician: Put ATM ${isOutOfService ? 'Out of Service' : 'Back in Service'}`);
    if (isOutOfService) {
        changeState(ATM_STATES.OUT_OF_SERVICE);
    } else {
        changeState(ATM_STATES.IDLE);
    }
    updateTechStats();
});

function updateTechStats() {
    document.getElementById('tech-cash-level').textContent = `₹${atmCashAvailable.toLocaleString()}`;
    const statusEl = document.getElementById('tech-atm-status');
    if (isOutOfService) {
        statusEl.textContent = 'Offline';
        statusEl.className = 'stat-value status-offline';
    } else {
        statusEl.textContent = 'Online';
        statusEl.className = 'stat-value status-online';
    }
}

// Init
logSys('[SYSTEM] ATM Initialized Component. Awaiting Customer.');
renderScreen(ATM_STATES.IDLE);