fix ui perfectly

let balance = 1000;
let correctPIN = "1234";
let enteredPIN = "";
let currentScreen = "PIN"; // PIN, MENU, VIEW, DEPOSIT, WITHDRAW, HISTORY, EXIT

let displayText;
let keypadButtons = [];
let actionButtons = [];
let inputField, submitButton;

const ATM_WIDTH = 500;
const ATM_HEIGHT = 700;
const SCREEN_WIDTH = 400;
const SCREEN_HEIGHT = 200;

let transactionHistory = [];

function setup() {
  createCanvas(ATM_WIDTH, ATM_HEIGHT);
  background('#1e272e');
  drawATMStructure();
  createDisplay();
  createKeypad();
  createActionButtons();
  updateDisplay();
}

function draw() {
  // No continuous drawing needed
}

// Draw ATM body and screen
function drawATMStructure() {
  // ATM Body is the canvas background
  fill('#485460');
  noStroke();
  rect(0, 0, ATM_WIDTH, ATM_HEIGHT, 20);
}

// Create Display Screen
function createDisplay() {
  displayText = createDiv('Enter PIN:');
  displayText.class('display');
  displayText.position((width - SCREEN_WIDTH) / 2, 50);
  displayText.size(SCREEN_WIDTH, SCREEN_HEIGHT);
  displayText.style('background-color', '#dcdde1');
  displayText.style('border-radius', '10px');
  displayText.style('box-shadow', 'inset 0 0 10px rgba(0,0,0,0.2)');
  displayText.style('padding', '20px');
  displayText.style('overflow', 'auto');
}

// Update Display based on current screen
function updateDisplay(message = "") {
  if (currentScreen === "PIN") {
    displayText.html('Enter PIN:');
    removeInputElements();
    showKeypadButtons();
    hideActionButtons();
  } else if (currentScreen === "MENU") {
    displayText.html(`
      <h2>Main Menu</h2>
      <ul style="list-style: none; padding: 0; font-size: 18px;">
        <li>1. View Balance</li>
        <li>2. Deposit Funds</li>
        <li>3. Withdraw Funds</li>
        <li>4. Transaction History</li>
        <li>5. Exit</li>
      </ul>
    `);
    removeInputElements();
    showActionButtons();
    hideKeypadButtons();
  } else if (currentScreen === "VIEW") {
    displayText.html(`<h2>Current Balance</h2><p style="font-size: 24px;">$${balance.toFixed(2)}

`);
    removeInputElements();
    showActionButtons();
    hideKeypadButtons();
  } else if (currentScreen === "DEPOSIT") {
    displayText.html(`
Deposit Funds

Enter amount to deposit:

`);
    createInputTransaction("DEPOSIT");
    showKeypadButtons();
    hideActionButtons();
  } else if (currentScreen === "WITHDRAW") {
    displayText.html(`
Withdraw Funds

Enter amount to withdraw:

`);
    createInputTransaction("WITHDRAW");
    showKeypadButtons();
    hideActionButtons();
  } else if (currentScreen === "HISTORY") {
    updateDisplayHistory();
    hideKeypadButtons();
    showActionButtons();
  } else if (currentScreen === "EXIT") {
    displayText.html(`
Thank You!

Transaction complete.

`);
    removeInputElements();
    hideKeypadButtons();
    hideActionButtons();
    setTimeout(resetATM, 3000);
  } else if (message !== "") {
    displayText.html(`

${message}

`);
  }
}

// Create Numeric Keypad
function createKeypad() {
  let buttonSize = 60;
  let startX = (width - (3 * buttonSize + 40)) / 2;
  let startY = 300;
  let spacing = 20;

  for (let i = 1; i <= 9; i++) {
    let btn = createButton(i.toString());
    btn.size(buttonSize, buttonSize);
    btn.style('background-color', '#7f8fa6');
    btn.style('color', '#fff');
    btn.style('border', 'none');
    btn.style('border-radius', '10px');
    btn.style('font-size', '20px');
    btn.position(startX + ((i-1)%3)*(buttonSize + spacing), startY + floor((i-1)/3)*(buttonSize + spacing));
    btn.mousePressed(() => keypadPress(i.toString()));
    btn.mouseOver(() => btn.style('background-color', '#718093'));
    btn.mouseOut(() => btn.style('background-color', '#7f8fa6'));
    keypadButtons.push(btn);
  }

  // Zero Button
  let zeroBtn = createButton('0');
  zeroBtn.size(buttonSize, buttonSize);
  zeroBtn.style('background-color', '#7f8fa6');
  zeroBtn.style('color', '#fff');
  zeroBtn.style('border', 'none');
  zeroBtn.style('border-radius', '10px');
  zeroBtn.style('font-size', '20px');
  zeroBtn.position(startX + buttonSize + spacing, startY + 3*(buttonSize + spacing));
  zeroBtn.mousePressed(() => keypadPress('0'));
  zeroBtn.mouseOver(() => zeroBtn.style('background-color', '#718093'));
  zeroBtn.mouseOut(() => zeroBtn.style('background-color', '#7f8fa6'));
  keypadButtons.push(zeroBtn);

  // Cancel Button
  let cancelBtn = createButton('Cancel');
  cancelBtn.size(buttonSize + 40, buttonSize);
  cancelBtn.style('background-color', '#e74c3c');
  cancelBtn.style('color', '#fff');
  cancelBtn.style('border', 'none');
  cancelBtn.style('border-radius', '10px');
  cancelBtn.style('font-size', '16px');
  cancelBtn.position(startX, startY + 3*(buttonSize + spacing));
  cancelBtn.mousePressed(cancelAction);
  cancelBtn.mouseOver(() => cancelBtn.style('background-color', '#c0392b'));
  cancelBtn.mouseOut(() => cancelBtn.style('background-color', '#e74c3c'));
  keypadButtons.push(cancelBtn);

  // Enter Button
  let enterBtn = createButton('Enter');
  enterBtn.size(buttonSize + 40, buttonSize);
  enterBtn.style('background-color', '#2ecc71');
  enterBtn.style('color', '#fff');
  enterBtn.style('border', 'none');
  enterBtn.style('border-radius', '10px');
  enterBtn.style('font-size', '16px');
  enterBtn.position(startX + 2*(buttonSize + spacing), startY + 3*(buttonSize + spacing));
  enterBtn.mousePressed(enterAction);
  enterBtn.mouseOver(() => enterBtn.style('background-color', '#27ae60'));
  enterBtn.mouseOut(() => enterBtn.style('background-color', '#2ecc71'));
  keypadButtons.push(enterBtn);

  hideKeypadButtons();
}

// Handle Keypad Press
function keypadPress(value) {
  if (currentScreen === "PIN") {
    if (enteredPIN.length < 4) {
      enteredPIN += value;
      updateDisplay('*'.repeat(enteredPIN.length));
    }
  } else if (currentScreen === "DEPOSIT" || currentScreen === "WITHDRAW") {
    if (!inputField.value()) {
      inputField.value(value);
    } else {
      inputField.value(inputField.value() + value);
    }
  }
}

// Create Action Buttons for Menu
function createActionButtons() {
  // View Balance
  let viewBtn = createButton('View Balance');
  viewBtn.size(150, 50);
  viewBtn.style('background-color', '#3498db');
  viewBtn.style('color', '#fff');
  viewBtn.style('border', 'none');
  viewBtn.style('border-radius', '10px');
  viewBtn.style('font-size', '16px');
  viewBtn.position((width/2) - 180, 550);
  viewBtn.mousePressed(() => {
    currentScreen = "VIEW";
    updateDisplay();
  });
  actionButtons.push(viewBtn);

  // Deposit
  let depositBtn = createButton('Deposit');
  depositBtn.size(150, 50);
  depositBtn.style('background-color', '#8e44ad');
  depositBtn.style('color', '#fff');
  depositBtn.style('border', 'none');
  depositBtn.style('border-radius', '10px');
  depositBtn.style('font-size', '16px');
  depositBtn.position((width/2) - 180, 620);
  depositBtn.mousePressed(() => {
    currentScreen = "DEPOSIT";
    updateDisplay();
  });
  actionButtons.push(depositBtn);

  // Withdraw
  let withdrawBtn = createButton('Withdraw');
  withdrawBtn.size(150, 50);
  withdrawBtn.style('background-color', '#e67e22');
  withdrawBtn.style('color', '#fff');
  withdrawBtn.style('border', 'none');
  withdrawBtn.style('border-radius', '10px');
  withdrawBtn.style('font-size', '16px');
  withdrawBtn.position((width/2) - 10, 550);
  withdrawBtn.mousePressed(() => {
    currentScreen = "WITHDRAW";
    updateDisplay();
  });
  actionButtons.push(withdrawBtn);

  // Transaction History
  let historyBtn = createButton('History');
  historyBtn.size(150, 50);
  historyBtn.style('background-color', '#f1c40f');
  historyBtn.style('color', '#fff');
  historyBtn.style('border', 'none');
  historyBtn.style('border-radius', '10px');
  historyBtn.style('font-size', '16px');
  historyBtn.position((width/2) - 10, 620);
  historyBtn.mousePressed(() => {
    currentScreen = "HISTORY";
    updateDisplay();
  });
  actionButtons.push(historyBtn);

  // Exit
  let exitBtn = createButton('Exit');
  exitBtn.size(150, 50);
  exitBtn.style('background-color', '#e74c3c');
  exitBtn.style('color', '#fff');
  exitBtn.style('border', 'none');
  exitBtn.style('border-radius', '10px');
  exitBtn.style('font-size', '16px');
  exitBtn.position((width/2) + 160, 550);
  exitBtn.mousePressed(() => {
    currentScreen = "EXIT";
    updateDisplay();
  });
  actionButtons.push(exitBtn);

  hideActionButtons();
}

// Style Action Buttons
function styleActionButton(button, color) {
  button.style('background-color', color);
  button.style('color', '#fff');
  button.style('border', 'none');
  button.style('border-radius', '10px');
  button.style('font-size', '16px');
  button.style('cursor', 'pointer');
}

// Show Keypad Buttons
function showKeypadButtons() {
  for (let btn of keypadButtons) {
    btn.show();
  }
}

// Hide Keypad Buttons
function hideKeypadButtons() {
  for (let btn of keypadButtons) {
    btn.hide();
  }
}

// Show Action Buttons
function showActionButtons() {
  for (let btn of actionButtons) {
    btn.show();
  }
}

// Hide Action Buttons
function hideActionButtons() {
  for (let btn of actionButtons) {
    btn.hide();
  }
}

// Create Input Field for Transactions
function createInputTransaction(type) {
  if (!inputField) {
    inputField = createInput('');
    inputField.position((width - 200) / 2, 270);
    inputField.size(200, 40);
    inputField.attribute('readonly', 'readonly');
    inputField.style('text-align', 'center');
    inputField.style('font-size', '18px');
    inputField.style('border', '2px solid #bdc3c7');
    inputField.style('border-radius', '5px');
  }
  showKeypadButtons();
  hideActionButtons();
}

// Remove Input Elements
function removeInputElements() {
  if (inputField) {
    inputField.remove();
    inputField = null;
  }
}

// Handle Deposit
function handleDeposit() {
  let amount = parseFloat(inputField.value());
  if (isNaN(amount) || amount <= 0) {
    updateDisplay("Invalid amount. Try again.");
  } else {
    balance += amount;
    transactionHistory.push(`Deposited $${amount.toFixed(2)}`);
    updateDisplay(`Successfully deposited $${amount.toFixed(2)}.`);
  }
  currentScreen = "MENU";
  removeInputElements();
  showActionButtons();
}

// Handle Withdraw
function handleWithdraw() {
  let amount = parseFloat(inputField.value());
  if (isNaN(amount) || amount <= 0) {
    updateDisplay("Invalid amount. Try again.");
  } else if (amount > balance) {
    updateDisplay("Insufficient funds.");
  } else {
    balance -= amount;
    transactionHistory.push(`Withdrew $${amount.toFixed(2)}`);
    updateDisplay(`Successfully withdrew $${amount.toFixed(2)}.`);
  }
  currentScreen = "MENU";
  removeInputElements();
  showActionButtons();
}

// Update Display for Transaction History
function updateDisplayHistory() {
  if (transactionHistory.length === 0) {
    displayText.html(`<h2>Transaction History</h2><p>No transactions yet.</p>`);
  } else {
    let historyHTML = `<h2>Transaction History</h2><ul style="list-style: disc; padding-left: 20px;">`;
    for (let transaction of transactionHistory) {
      historyHTML += `<li>${transaction}</li>`;
    }
    historyHTML += `</ul>`;
    displayText.html(historyHTML);
  }

  // Create Back Button if not exists
  if (!actionButtons.some(btn => btn.html() === 'Back')) {
    let backBtn = createButton('Back');
    backBtn.size(150, 50);
    backBtn.style('background-color', '#95a5a6');
    backBtn.style('color', '#fff');
    backBtn.style('border', 'none');
    backBtn.style('border-radius', '10px');
    backBtn.style('font-size', '16px');
    backBtn.position((width/2) + 160, 620);
    backBtn.mousePressed(() => {
      currentScreen = "MENU";
      updateDisplay();
      backBtn.hide();
    });
    backBtn.mouseOver(() => backBtn.style('background-color', '#7f8c8d'));
    backBtn.mouseOut(() => backBtn.style('background-color', '#95a5a6'));
    actionButtons.push(backBtn);
    backBtn.show();
  }
}

// Handle Cancel Action
function cancelAction() {
  if (currentScreen === "PIN") {
    enteredPIN = "";
    updateDisplay();
  } else if (currentScreen === "DEPOSIT" || currentScreen === "WITHDRAW") {
    currentScreen = "MENU";
    updateDisplay();
    removeInputElements();
    showActionButtons();
    hideKeypadButtons();
  }
}

// Handle Enter Action
function enterAction() {
  if (currentScreen === "PIN") {
    if (enteredPIN === correctPIN) {
      currentScreen = "MENU";
      updateDisplay();
      enteredPIN = "";
    } else {
      updateDisplay("Incorrect PIN. Try again.");
      enteredPIN = "";
    }
  } else if (currentScreen === "DEPOSIT") {
    handleDeposit();
  } else if (currentScreen === "WITHDRAW") {
    handleWithdraw();
  }
}

// Reset ATM to Initial State
function resetATM() {
  currentScreen = "PIN";
  updateDisplay();
  showKeypadButtons();
  hideActionButtons();
}

// Handle Keypad Input via Keyboard
function keyTyped() {
  if (inputField && key >= '0' && key <= '9') {
    keypadPress(key);
    return false;
  }
}