// Auth: users + login + session
// Passwords stored as SHA-256 hex (not sent anywhere; this is a client-only app)

const AUTH_KEY = "mab_auth_v1";
const SESSION_KEY = "mab_session_v1";

async function sha256(str) {
  const buf = new TextEncoder().encode(str);
  const hash = await crypto.subtle.digest("SHA-256", buf);
  return Array.from(new Uint8Array(hash)).map(b => b.toString(16).padStart(2, "0")).join("");
}

async function defaultAuth() {
  // Seed: single ADMIN account. Password = MAB26$
  const username = "admin";
  const hash = await sha256("MAB26$" + "::" + username);
  return {
    users: [{
      id: "u-admin",
      username,
      name: "Administrador MAB",
      role: "admin",
      hash,
      createdAt: new Date().toISOString().slice(0, 10),
    }],
    createdAt: new Date().toISOString(),
  };
}

function loadAuth() {
  try {
    const raw = localStorage.getItem(AUTH_KEY);
    if (raw) return JSON.parse(raw);
  } catch (e) {}
  return null;
}
function saveAuth(a) { localStorage.setItem(AUTH_KEY, JSON.stringify(a)); }

async function ensureAuth() {
  let a = loadAuth();
  if (!a || !a.users || a.users.length === 0) {
    a = await defaultAuth();
    saveAuth(a);
  }
  return a;
}

function loadSession() {
  try { return JSON.parse(localStorage.getItem(SESSION_KEY) || "null"); } catch(e){ return null; }
}
function saveSession(s) {
  if (s) localStorage.setItem(SESSION_KEY, JSON.stringify(s));
  else localStorage.removeItem(SESSION_KEY);
}

async function createUser(auth, { username, name, password, role }) {
  username = username.trim().toLowerCase();
  if (!username || !password) throw new Error("Usuario y contraseña son obligatorios");
  if (auth.users.find(u => u.username === username)) throw new Error("Usuario ya existe");
  if (password.length < 4) throw new Error("La contraseña debe tener al menos 4 caracteres");
  const hash = await sha256(password + "::" + username);
  return {
    ...auth,
    users: [...auth.users, {
      id: uid("u"),
      username,
      name: name || username,
      role: role || "usuario",
      hash,
      createdAt: new Date().toISOString().slice(0, 10),
    }],
  };
}

async function verifyLogin(auth, username, password) {
  username = username.trim().toLowerCase();
  const u = auth.users.find(x => x.username === username);
  if (!u) return null;
  const hash = await sha256(password + "::" + username);
  return hash === u.hash ? u : null;
}

function LoginScreen({ onLogin, auth }) {
  const [user, setUser] = React.useState("");
  const [pass, setPass] = React.useState("");
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);

  async function submitLogin(e) {
    e.preventDefault();
    setErr(""); setBusy(true);
    try {
      const u = await verifyLogin(auth, user, pass);
      if (!u) { setErr("Usuario o contraseña incorrectos"); setBusy(false); return; }
      onLogin(u);
    } catch (e) { setErr(e.message); }
    setBusy(false);
  }

  return (
    <div className="login-shell">
      <div className="login-bg" />
      <div className="login-card">
        <div className="login-brand">
          <img src="assets/logo-mab.png" alt="MAB"
               onError={(e)=>{e.target.style.display="none"}} />
          <div>
            <div className="b">MAB Automatización</div>
            <div className="s">Sistema de cotizaciones</div>
          </div>
        </div>

        <form onSubmit={submitLogin} className="stack" style={{gap:14}}>
          <div>
            <h1 style={{margin:"0 0 4px",fontSize:20,letterSpacing:"-0.01em"}}>Iniciar sesión</h1>
            <p className="muted" style={{margin:0,fontSize:13}}>Accede con tu usuario MAB</p>
          </div>
          <div className="field">
            <label>Usuario</label>
            <input value={user} onChange={e => setUser(e.target.value)}
                   autoComplete="username" autoFocus required
                   inputMode="text" autoCapitalize="none" />
          </div>
          <div className="field">
            <label>Contraseña</label>
            <input type="password" value={pass}
                   onChange={e => setPass(e.target.value)}
                   autoComplete="current-password" required />
          </div>
          {err && <div className="login-err">{err}</div>}
          <button className="btn primary" style={{padding:"12px",justifyContent:"center"}} disabled={busy}>
            {busy ? "Verificando…" : "Entrar"}
          </button>
          <div className="muted" style={{fontSize:11.5,textAlign:"center",marginTop:4}}>
            ¿Sin acceso? Solicítale al administrador que cree tu usuario.
          </div>
        </form>
      </div>
      <footer className="login-foot">
        MAB Automatización SpA · © {new Date().getFullYear()}
      </footer>
    </div>
  );
}

function UsersView({ auth, setAuth, session }) {
  const [open, setOpen] = React.useState(false);
  const [editId, setEditId] = React.useState(null);
  const isAdmin = session?.role === "admin";

  const remove = (id) => {
    if (!isAdmin) return;
    if (id === session.id) { alert("No puedes eliminar tu propio usuario."); return; }
    if (!confirm("¿Eliminar usuario?")) return;
    setAuth(a => ({ ...a, users: a.users.filter(u => u.id !== id) }));
  };

  return (
    <>
      <Topbar
        title="Usuarios"
        crumb="Administración"
        actions={
          isAdmin ? (
            <button className="btn primary" onClick={() => { setEditId(null); setOpen(true); }}>
              <Icon.plus /> Nuevo usuario
            </button>
          ) : null
        }
      />
      <div className="content narrow">
        {!isAdmin && (
          <div style={{padding:"14px 16px",background:"var(--accent-soft)",border:"1px solid #f2d89a",borderRadius:8,fontSize:13,marginBottom:16}}>
            Solo los usuarios con rol <b>admin</b> pueden crear o eliminar otros usuarios.
          </div>
        )}
        <div className="card">
          <div className="card-head">
            <h2>Cuentas ({auth.users.length})</h2>
            <span className="hint">Las contraseñas se guardan cifradas (SHA-256) en este dispositivo</span>
          </div>
          <div className="card-body flush" style={{overflow:"auto"}}>
            <table className="data">
              <thead>
                <tr>
                  <th>Nombre</th>
                  <th>Usuario</th>
                  <th style={{width:120}}>Rol</th>
                  <th style={{width:120}}>Creado</th>
                  <th style={{width:120}}></th>
                </tr>
              </thead>
              <tbody>
                {auth.users.map(u => (
                  <tr key={u.id}>
                    <td style={{fontWeight:600}}>
                      {u.name} {u.id === session.id && <span className="badge brand" style={{marginLeft:6}}>tú</span>}
                    </td>
                    <td className="mono">{u.username}</td>
                    <td>
                      <span className={`badge ${u.role === "admin" ? "deep" : ""}`}>{u.role}</span>
                    </td>
                    <td className="muted">{u.createdAt}</td>
                    <td>
                      <div className="row" style={{gap:4,justifyContent:"flex-end"}}>
                        {isAdmin && (
                          <>
                            <button className="btn sm" onClick={() => { setEditId(u.id); setOpen(true); }}>Editar</button>
                            <button className="btn danger icon" onClick={() => remove(u.id)}><Icon.trash /></button>
                          </>
                        )}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      {open && (
        <UserModal auth={auth} setAuth={setAuth} editId={editId}
                   onClose={() => setOpen(false)} />
      )}
    </>
  );
}

function UserModal({ auth, setAuth, editId, onClose }) {
  const editing = editId ? auth.users.find(u => u.id === editId) : null;
  const [name, setName] = React.useState(editing?.name || "");
  const [username, setUsername] = React.useState(editing?.username || "");
  const [role, setRole] = React.useState(editing?.role || "usuario");
  const [pass, setPass] = React.useState("");
  const [pass2, setPass2] = React.useState("");
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);

  async function submit(e) {
    e.preventDefault(); setErr(""); setBusy(true);
    try {
      if (editing) {
        let patch = { name, role };
        if (pass || pass2) {
          if (pass !== pass2) throw new Error("Las contraseñas no coinciden");
          if (pass.length < 4) throw new Error("Contraseña muy corta (mínimo 4)");
          patch.hash = await sha256(pass + "::" + editing.username);
        }
        setAuth(a => ({ ...a, users: a.users.map(u => u.id === editing.id ? { ...u, ...patch } : u) }));
        onClose();
      } else {
        if (pass !== pass2) throw new Error("Las contraseñas no coinciden");
        const next = await createUser(auth, { username, name, password: pass, role });
        setAuth(next);
        onClose();
      }
    } catch (e) { setErr(e.message); }
    setBusy(false);
  }

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{maxWidth: 520}}>
        <div className="modal-head">
          <h2>{editing ? "Editar usuario" : "Nuevo usuario"}</h2>
          <button className="btn ghost" onClick={onClose}>✕</button>
        </div>
        <form className="modal-body stack" style={{gap:14}} onSubmit={submit}>
          <div className="field">
            <label>Nombre completo</label>
            <input value={name} onChange={e => setName(e.target.value)} required autoFocus />
          </div>
          <div className="grid-2">
            <div className="field">
              <label>Usuario</label>
              <input value={username} onChange={e => setUsername(e.target.value)}
                     autoCapitalize="none" disabled={!!editing} required />
            </div>
            <div className="field">
              <label>Rol</label>
              <select value={role} onChange={e => setRole(e.target.value)}>
                <option value="usuario">usuario</option>
                <option value="admin">admin</option>
              </select>
            </div>
          </div>
          <div className="grid-2">
            <div className="field">
              <label>{editing ? "Nueva contraseña (opcional)" : "Contraseña"}</label>
              <input type="password" value={pass} onChange={e => setPass(e.target.value)}
                     autoComplete="new-password" {...(editing ? {} : { required: true })} />
            </div>
            <div className="field">
              <label>Confirmar</label>
              <input type="password" value={pass2} onChange={e => setPass2(e.target.value)}
                     autoComplete="new-password" {...(editing ? {} : { required: true })} />
            </div>
          </div>
          {err && <div className="login-err">{err}</div>}
          <div className="row" style={{justifyContent:"flex-end"}}>
            <button type="button" className="btn" onClick={onClose}>Cancelar</button>
            <button className="btn primary" disabled={busy}>
              {busy ? "Guardando…" : (editing ? "Guardar cambios" : "Crear usuario")}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, {
  loadAuth, saveAuth, loadSession, saveSession, defaultAuth, ensureAuth,
  LoginScreen, UsersView, UserModal, sha256, createUser, verifyLogin,
});