/* Pólix — Login / autenticación (prototipo, sin backend) */
const TEMP_CODE = "POLIX2026"; // código temporal que entrega la correduría
const ALLOWED_EMAIL = "federico@correduria.uy"; // único usuario habilitado en el piloto

const normEmail = (e) => (e || "").trim().toLowerCase();
function getStoredPass() { try { return localStorage.getItem("brida_pass") || ""; } catch (e) { return ""; } }
function setStoredPass(p) { try { localStorage.setItem("brida_pass", p); } catch (e) {} }

function PwInput({ value, onChange, placeholder, autoFocus }) {
  const [show, setShow] = React.useState(false);
  return (
    <div className="pw-wrap">
      <input className="input" type={show ? "text" : "password"} value={value} autoFocus={autoFocus}
        placeholder={placeholder} onChange={(e) => onChange(e.target.value)} />
      <button type="button" className="pw-toggle" tabIndex={-1} onClick={() => setShow((s) => !s)} aria-label="Mostrar contraseña">
        <Icon name="eye" size={17} />
      </button>
    </div>
  );
}

function strength(pw) {
  let s = 0;
  if (pw.length >= 6) s++;
  if (pw.length >= 10) s++;
  if (/[A-Z]/.test(pw) && /[a-z]/.test(pw)) s++;
  if (/\d/.test(pw) || /[^A-Za-z0-9]/.test(pw)) s++;
  return s; // 0..4
}
function PwStrength({ pw }) {
  const s = strength(pw);
  const colors = ["var(--danger)", "var(--danger)", "var(--warn)", "oklch(0.65 0.14 110)", "var(--ok)"];
  const label = ["", "Débil", "Floja", "Buena", "Fuerte"][s];
  return (
    <>
      <div className="pw-bars">{[0, 1, 2, 3].map((i) => <span key={i} style={{ background: i < s ? colors[s] : "var(--bg-2)" }} />)}</div>
      {pw && <div className="hint" style={{ marginTop: 6, color: colors[s], fontWeight: 700 }}>{label}</div>}
    </>
  );
}

function Auth({ onAuthed }) {
  const [view, setView] = React.useState("login"); // login | nueva | recuperar
  return (
    <div className="auth">
      <div className="auth-brand">
        <div>
          <Wordmark size={94} tone="dark" />
          <div className="a-sub">Gestión para corredores de seguros — clientes, pólizas, siniestros y multicotización en un solo lugar.</div>
        </div>
        <div className="auth-feats">
          <div className="f"><span className="fi"><Icon name="sparkle" size={17} /></span>Cotizá en varias compañías a la vez</div>
          <div className="f"><span className="fi"><Icon name="clock" size={17} /></span>Controlá los vencimientos del mes</div>
          <div className="f"><span className="fi"><Icon name="download" size={17} /></span>Importá tu cartera desde Excel</div>
        </div>
        <div className="auth-foot">© 2026 Brida · Montevideo, Uruguay</div>
      </div>
      <div className="auth-form-wrap">
        {view === "login" && <LoginForm onAuthed={onAuthed} onForgot={() => setView("recuperar")} onFirst={() => setView("nueva")} />}
        {view === "nueva" && <NuevaPass onAuthed={onAuthed} onBack={() => setView("login")} first />}
        {view === "recuperar" && <Recuperar onAuthed={onAuthed} onBack={() => setView("login")} />}
      </div>
    </div>
  );
}

function LoginForm({ onAuthed, onForgot, onFirst }) {
  const [email, setEmail] = React.useState("");
  const [pass, setPass] = React.useState("");
  const [err, setErr] = React.useState("");

  function submit(e) {
    e.preventDefault();
    if (!email.includes("@")) return setErr("Ingresá un email válido.");
    if (!pass) return setErr("Ingresá tu contraseña.");
    if (normEmail(email) !== ALLOWED_EMAIL) return setErr("Email o contraseña incorrectos.");
    const stored = getStoredPass();
    if (stored) {
      // ya definió su contraseña personal
      if (pass === stored) return onAuthed();
      if (pass.toUpperCase() === TEMP_CODE) return onFirst(); // volver a definirla
      return setErr("Email o contraseña incorrectos.");
    }
    // primer ingreso: solo con el código que entrega la correduría
    if (pass.toUpperCase() === TEMP_CODE) return onFirst();
    return setErr("Es tu primer ingreso: usá el código que te entregó la correduría.");
  }
  return (
    <form className="auth-card" onSubmit={submit}>
      <div className="auth-mobile-logo"><Logo size={40} /></div>
      <h2>Ingresá a tu cuenta</h2>
      <p className="lead">Usá el email y la contraseña que te entregó la correduría.</p>
      {err && <div className="auth-error"><Icon name="xCircle" size={16} />{err}</div>}
      <div className="field"><label>Email</label>
        <input className="input" type="email" autoFocus value={email} placeholder="nombre@correduría.uy" onChange={(e) => { setEmail(e.target.value); setErr(""); }} />
      </div>
      <div className="field">
        <div className="between"><label>Contraseña</label><button type="button" className="auth-link" onClick={onForgot}>¿La olvidaste?</button></div>
        <PwInput value={pass} onChange={(v) => { setPass(v); setErr(""); }} placeholder="••••••••" />
      </div>
      <button className="btn btn-primary" type="submit" style={{ width: "100%", padding: "11px", marginTop: 6 }}>Ingresar<Icon name="chevronRight" size={16} /></button>
    </form>
  );
}

function NuevaPass({ onAuthed, onBack, first }) {
  const [p1, setP1] = React.useState("");
  const [p2, setP2] = React.useState("");
  const [err, setErr] = React.useState("");
  function submit(e) {
    e.preventDefault();
    if (p1.length < 6) return setErr("La contraseña debe tener al menos 6 caracteres.");
    if (p1 !== p2) return setErr("Las contraseñas no coinciden.");
    setStoredPass(p1);
    onAuthed();
  }
  return (
    <form className="auth-card" onSubmit={submit}>
      <button type="button" className="auth-link" onClick={onBack} style={{ marginBottom: 14, display: "flex", alignItems: "center", gap: 4 }}><Icon name="chevronLeft" size={15} />Volver</button>
      <h2>{first ? "Creá tu nueva contraseña" : "Cambiá tu contraseña"}</h2>
      <p className="lead">{first ? "Es tu primer ingreso. Definí una contraseña personal para reemplazar el código temporal." : "Elegí una contraseña nueva y segura."}</p>
      {err && <div className="auth-error"><Icon name="xCircle" size={16} />{err}</div>}
      <div className="field"><label>Nueva contraseña</label>
        <PwInput value={p1} onChange={(v) => { setP1(v); setErr(""); }} placeholder="Mínimo 6 caracteres" autoFocus />
        <PwStrength pw={p1} />
      </div>
      <div className="field"><label>Repetir contraseña</label>
        <PwInput value={p2} onChange={(v) => { setP2(v); setErr(""); }} placeholder="Repetí la contraseña" />
      </div>
      <button className="btn btn-primary" type="submit" style={{ width: "100%", padding: "11px", marginTop: 6 }}><Icon name="shieldCheck" size={16} />Guardar y entrar</button>
    </form>
  );
}

function Recuperar({ onAuthed, onBack }) {
  const [step, setStep] = React.useState(0); // 0 email · 1 código + nueva
  const [email, setEmail] = React.useState("");
  const [code, setCode] = React.useState("");
  const [p1, setP1] = React.useState("");
  const [p2, setP2] = React.useState("");
  const [err, setErr] = React.useState("");

  function enviar(e) {
    e.preventDefault();
    if (!email.includes("@")) return setErr("Ingresá un email válido.");
    if (normEmail(email) !== ALLOWED_EMAIL) return setErr("No encontramos una cuenta con ese email.");
    setErr(""); setStep(1);
  }
  function restablecer(e) {
    e.preventDefault();
    if (!code.trim()) return setErr("Ingresá el código que te enviamos.");
    if (p1.length < 6) return setErr("La contraseña debe tener al menos 6 caracteres.");
    if (p1 !== p2) return setErr("Las contraseñas no coinciden.");
    setStoredPass(p1);
    onAuthed();
  }
  return (
    <form className="auth-card" onSubmit={step === 0 ? enviar : restablecer}>
      <button type="button" className="auth-link" onClick={step === 0 ? onBack : () => setStep(0)} style={{ marginBottom: 14, display: "flex", alignItems: "center", gap: 4 }}><Icon name="chevronLeft" size={15} />Volver</button>
      <div className="auth-steps"><span className={"s on"} /><span className={"s" + (step >= 1 ? " on" : "")} /></div>
      {step === 0 ? <>
        <h2>Recuperar contraseña</h2>
        <p className="lead">Ingresá tu email y te enviamos un código para restablecerla.</p>
        {err && <div className="auth-error"><Icon name="xCircle" size={16} />{err}</div>}
        <div className="field"><label>Email</label>
          <input className="input" type="email" autoFocus value={email} placeholder="nombre@correduría.uy" onChange={(e) => { setEmail(e.target.value); setErr(""); }} />
        </div>
        <button className="btn btn-primary" type="submit" style={{ width: "100%", padding: "11px", marginTop: 6 }}><Icon name="mail" size={16} />Enviar código</button>
      </> : <>
        <h2>Revisá tu correo</h2>
        <p className="lead">Enviamos un código a <b style={{ color: "var(--text)" }}>{email}</b>. Ingresalo y definí tu nueva contraseña.</p>
        {err && <div className="auth-error"><Icon name="xCircle" size={16} />{err}</div>}
        <div className="field"><label>Código de verificación</label>
          <input className="input mono" autoFocus value={code} placeholder="6 dígitos" onChange={(e) => { setCode(e.target.value); setErr(""); }} style={{ letterSpacing: "0.3em", fontSize: 16 }} />
          <span className="hint">¿No te llegó? <button type="button" className="auth-link">Reenviar código</button></span>
        </div>
        <div className="field"><label>Nueva contraseña</label>
          <PwInput value={p1} onChange={(v) => { setP1(v); setErr(""); }} placeholder="Mínimo 6 caracteres" />
          <PwStrength pw={p1} />
        </div>
        <div className="field"><label>Repetir contraseña</label>
          <PwInput value={p2} onChange={(v) => { setP2(v); setErr(""); }} placeholder="Repetí la contraseña" />
        </div>
        <button className="btn btn-primary" type="submit" style={{ width: "100%", padding: "11px", marginTop: 6 }}><Icon name="shieldCheck" size={16} />Restablecer y entrar</button>
      </>}
    </form>
  );
}

window.Auth = Auth;