// ===== DOM REFERENCES =====
const loginCard = document.getElementById("login-card");
const registerCard = document.getElementById("register-card");
const loginForm = document.getElementById("login-form");
const registerForm = document.getElementById("register-form");
const toast = document.getElementById("toast");

// ===== PAGE SWITCHING =====
document.getElementById("go-register").addEventListener("click", () => {
  loginCard.classList.remove("active");
  registerCard.classList.add("active");
  clearForm(loginForm);
});

document.getElementById("go-login").addEventListener("click", () => {
  registerCard.classList.remove("active");
  loginCard.classList.add("active");
  clearForm(registerForm);
});

// ===== PASSWORD TOGGLE =====
document.querySelectorAll(".toggle-pw").forEach((btn) => {
  btn.addEventListener("click", () => {
    const input = document.getElementById(btn.dataset.target);
    const isPassword = input.type === "password";
    input.type = isPassword ? "text" : "password";
    btn.textContent = isPassword ? "🙈" : "👁";
  });
});

// ===== VALIDATION HELPERS =====
function setError(id, msg) {
  const el = document.getElementById(id);
  const input = el.previousElementSibling?.querySelector?.("input") || el.previousElementSibling;
  el.textContent = msg;
  if (input) {
    input.classList.remove("valid");
    input.classList.add("invalid");
  }
}

function setValid(id) {
  const el = document.getElementById(id);
  const input = el.previousElementSibling?.querySelector?.("input") || el.previousElementSibling;
  el.textContent = "";
  if (input) {
    input.classList.remove("invalid");
    input.classList.add("valid");
  }
}

function clearForm(form) {
  form.reset();
  form.querySelectorAll(".error-msg").forEach((e) => (e.textContent = ""));
  form.querySelectorAll("input").forEach((i) => i.classList.remove("invalid", "valid"));
}

function showToast(message) {
  toast.textContent = message;
  toast.classList.add("show");
  setTimeout(() => toast.classList.remove("show"), 3000);
}

// ===== REAL-TIME FIELD VALIDATION =====
function attachLiveValidation(inputId, errId, validator) {
  const input = document.getElementById(inputId);
  input.addEventListener("input", () => {
    const msg = validator(input.value.trim());
    if (msg) {
      setError(errId, msg);
    } else {
      setValid(errId);
    }
  });
}

// Login fields
attachLiveValidation("login-username", "login-username-err", (v) =>
  v === "" ? "Username is required." : null
);
attachLiveValidation("login-password", "login-password-err", (v) =>
  v === "" ? "Password is required." : null
);

// Register fields
attachLiveValidation("reg-username", "reg-username-err", (v) => {
  if (v === "") return "Username is required.";
  if (v.length < 3) return "Min 3 characters.";
  if (!/^[a-zA-Z0-9_]+$/.test(v)) return "Only letters, numbers, underscores.";
  return null;
});

attachLiveValidation("reg-email", "reg-email-err", (v) => {
  if (v === "") return "Email is required.";
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) return "Enter a valid email.";
  return null;
});

attachLiveValidation("reg-password", "reg-password-err", (v) => {
  if (v === "") return "Password is required.";
  if (v.length < 6) return "Min 6 characters.";
  return null;
});

attachLiveValidation("reg-confirm", "reg-confirm-err", (v) => {
  if (v === "") return "Please confirm your password.";
  if (v !== document.getElementById("reg-password").value)
    return "Passwords do not match.";
  return null;
});

// ===== LOGIN SUBMIT =====
loginForm.addEventListener("submit", (e) => {
  e.preventDefault();
  let isValid = true;

  const username = document.getElementById("login-username").value.trim();
  const password = document.getElementById("login-password").value.trim();

  if (username === "") {
    setError("login-username-err", "Username is required.");
    isValid = false;
  } else {
    setValid("login-username-err");
  }

  if (password === "") {
    setError("login-password-err", "Password is required.");
    isValid = false;
  } else {
    setValid("login-password-err");
  }

  if (!isValid) return;

  // Simulate login
  const btn = loginForm.querySelector(".btn");
  btn.textContent = "Logging in…";
  btn.disabled = true;

  setTimeout(() => {
    showToast("✓  Login successful!");
    btn.textContent = "Log In →";
    btn.disabled = false;
    clearForm(loginForm);
  }, 1200);
});

// ===== REGISTER SUBMIT =====
registerForm.addEventListener("submit", (e) => {
  e.preventDefault();
  let isValid = true;

  const username = document.getElementById("reg-username").value.trim();
  const email = document.getElementById("reg-email").value.trim();
  const password = document.getElementById("reg-password").value;
  const confirm = document.getElementById("reg-confirm").value;

  // Username
  if (username === "") {
    setError("reg-username-err", "Username is required.");
    isValid = false;
  } else if (username.length < 3) {
    setError("reg-username-err", "Min 3 characters.");
    isValid = false;
  } else if (!/^[a-zA-Z0-9_]+$/.test(username)) {
    setError("reg-username-err", "Only letters, numbers, underscores.");
    isValid = false;
  } else {
    setValid("reg-username-err");
  }

  // Email
  if (email === "") {
    setError("reg-email-err", "Email is required.");
    isValid = false;
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    setError("reg-email-err", "Enter a valid email.");
    isValid = false;
  } else {
    setValid("reg-email-err");
  }

  // Password
  if (password === "") {
    setError("reg-password-err", "Password is required.");
    isValid = false;
  } else if (password.length < 6) {
    setError("reg-password-err", "Min 6 characters.");
    isValid = false;
  } else {
    setValid("reg-password-err");
  }

  // Confirm
  if (confirm === "") {
    setError("reg-confirm-err", "Please confirm your password.");
    isValid = false;
  } else if (confirm !== password) {
    setError("reg-confirm-err", "Passwords do not match.");
    isValid = false;
  } else {
    setValid("reg-confirm-err");
  }

  if (!isValid) return;

  // Simulate registration
  const btn = registerForm.querySelector(".btn");
  btn.textContent = "Creating account…";
  btn.disabled = true;

  setTimeout(() => {
    showToast("✓  Account created! Redirecting to login…");
    btn.textContent = "Register →";
    btn.disabled = false;
    clearForm(registerForm);

    setTimeout(() => {
      registerCard.classList.remove("active");
      loginCard.classList.add("active");
    }, 1500);
  }, 1200);
});