/* ============================================================
   INside quote generator — Acceso / autenticación
   --------------------------------------------------------------
   NOTA DE SEGURIDAD: Esto es una barrera de acceso del lado del
   navegador (apta para un prototipo / herramienta interna). NO es
   seguridad de servidor. Para producción, las contraseñas deben
   validarse en un backend y nunca viajar en el archivo. Aquí se
   guardan en el almacenamiento local del navegador.
   ============================================================ */
const AUTH_USERS_KEY = "inside_users_v1";
const AUTH_SESSION_KEY = "inside_session_v1";

const DEFAULT_USERS = [
  { id: "u-admin", name: "Administrador", email: "admin@insideelementos.com", password: "inside2026", role: "admin" },
];

function loadUsers() {
  try {
    const raw = localStorage.getItem(AUTH_USERS_KEY);
    if (raw) { const arr = JSON.parse(raw); if (Array.isArray(arr) && arr.length) return arr; }
  } catch (e) {}
  return DEFAULT_USERS.slice();
}
function saveUsers(users) { try { localStorage.setItem(AUTH_USERS_KEY, JSON.stringify(users)); } catch (e) {} }

function useAuth() {
  const [users, setUsers] = React.useState(loadUsers);
  const [session, setSession] = React.useState(() => {
    try { const raw = localStorage.getItem(AUTH_SESSION_KEY); return raw ? JSON.parse(raw) : null; } catch (e) { return null; }
  });

  React.useEffect(() => { saveUsers(users); }, [users]);
  React.useEffect(() => {
    try {
      if (session) localStorage.setItem(AUTH_SESSION_KEY, JSON.stringify(session));
      else localStorage.removeItem(AUTH_SESSION_KEY);
    } catch (e) {}
  }, [session]);

  const login = (email, password) => {
    const u = users.find((x) => x.email.trim().toLowerCase() === String(email).trim().toLowerCase());
    if (!u) return { ok: false, error: "No existe una cuenta con ese correo." };
    if (u.password !== password) return { ok: false, error: "Contraseña incorrecta." };
    setSession({ id: u.id, name: u.name, email: u.email, role: u.role });
    return { ok: true };
  };
  const logout = () => setSession(null);

  const addUser = (u) => setUsers((us) => [...us, { id: "u-" + Date.now(), role: "asesor", ...u }]);
  const updateUser = (id, patch) => setUsers((us) => us.map((u) => u.id === id ? { ...u, ...patch } : u));
  const removeUser = (id) => setUsers((us) => {
    const next = us.filter((u) => u.id !== id);
    return next.length ? next : us; // nunca dejar la app sin usuarios
  });

  // keep session name/email in sync if the logged-in user edits their own profile
  React.useEffect(() => {
    if (!session) return;
    const u = users.find((x) => x.id === session.id);
    if (u && (u.name !== session.name || u.email !== session.email || u.role !== session.role)) {
      setSession({ id: u.id, name: u.name, email: u.email, role: u.role });
    }
  }, [users]);

  return { users, session, login, logout, addUser, updateUser, removeUser };
}

// ---------- Login screen (dark, matches the enter page) ----------
function LoginScreen({ onLogin }) {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [error, setError] = React.useState("");
  const [show, setShow] = React.useState(false);

  const submit = (e) => {
    if (e) e.preventDefault();
    const res = onLogin(email, password);
    if (!res.ok) setError(res.error);
  };

  return (
    <div className="login">
      <div className="home-bg" />
      <form className="login-card" onSubmit={submit}>
        <div className="home-logo" style={{ marginBottom: 26 }}>
          <img src="cotizador/assets/logo-lockup-white.png" alt="INside Elementos Arquitectónicos" className="login-logo-img" />
        </div>

        <div className="login-eyebrow">Quote generator</div>

        <label className="login-lbl">Correo</label>
        <input className="login-inp" type="email" autoFocus value={email} autoComplete="username"
          onChange={(e) => { setEmail(e.target.value); setError(""); }} placeholder="tucorreo@insideelementos.com" />

        <label className="login-lbl">Contraseña</label>
        <div className="login-pass">
          <input className="login-inp" type={show ? "text" : "password"} value={password} autoComplete="current-password"
            onChange={(e) => { setPassword(e.target.value); setError(""); }} placeholder="••••••••" />
          <button type="button" className="login-eye" onClick={() => setShow((s) => !s)} tabIndex={-1} title={show ? "Ocultar" : "Mostrar"}>
            <window.Icon name={show ? "eyeoff" : "eye"} size={17} />
          </button>
        </div>

        {error && <div className="login-error">{error}</div>}

        <button type="submit" className="home-pill" style={{ width: "100%", marginTop: 22, justifyContent: "center", fontWeight: 600 }}>
          Entrar
        </button>

        <div className="login-foot">Acceso restringido al equipo de INside. ¿Olvidaste tu acceso? Contacta al administrador.</div>
      </form>
    </div>
  );
}

window.useAuth = useAuth;
window.LoginScreen = LoginScreen;