/* ===========================================================================
   VESTIRÉ STUDIO — auth screens (customer login / register / admin) -> window
   =========================================================================== */
const { useState } = React;

function AuthShell({ ctx, children }) {
  return (
    <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", padding: 24, background: "var(--paper)" }}>
      <div className="card col anim-fade" style={{ width: 440, maxWidth: "100%", padding: "26px 34px 36px", gap: 22 }}>
        {ctx && (
          <div>
            <span className="lnk" style={{ color: "var(--muted)" }} onClick={() => ctx.nav("home")}>
              <Icon name="arrowL" size={14} />Back to store
            </span>
          </div>
        )}
        <div style={{ display: "flex", justifyContent: "center", margin: "6px 0 4px" }}><Logo size={24} /></div>
        {children}
      </div>
    </div>
  );
}

function AuthError({ msg }) {
  if (!msg) return null;
  return <div className="pad16" style={{ background: "var(--cancelled-bg)", color: "var(--cancelled)", fontSize: 13, borderRadius: "var(--r-sm)" }}>{msg}</div>;
}

function PasswordField({ label = "Password", value, onChange, autoFocus }) {
  const [show, setShow] = useState(false);
  return (
    <Field label={label}>
      <div style={{ position: "relative" }}>
        <input className="input" type={show ? "text" : "password"} value={value} onChange={onChange}
               autoFocus={autoFocus} style={{ paddingRight: 60 }} />
        <button type="button" onClick={() => setShow((s) => !s)} aria-label={show ? "Hide password" : "Show password"}
          style={{ position: "absolute", right: 10, top: "50%", transform: "translateY(-50%)", background: "none",
                   border: "none", color: "var(--accent-2)", fontSize: 12, fontWeight: 600, cursor: "pointer", letterSpacing: ".03em" }}>
          {show ? "Hide" : "Show"}
        </button>
      </div>
    </Field>
  );
}

/* ---- CUSTOMER LOGIN ------------------------------------------------------ */
function CLogin({ ctx }) {
  const [id, setId] = useState("");
  const [pw, setPw] = useState("");
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);
  async function submit(e) {
    if (e) e.preventDefault();
    setBusy(true); setErr("");
    try { await ctx.login(id, pw); } catch (ex) { setErr(ex.message); setBusy(false); }
  }
  return (
    <AuthShell ctx={ctx}>
      <div className="col gap6 center" style={{ alignItems: "center" }}>
        <h2 className="disp" style={{ fontSize: 30 }}>Welcome back</h2>
        <p className="muted" style={{ fontSize: 13.5 }}>Sign in to rent, buy and track your requests.</p>
      </div>
      <AuthError msg={err} />
      <form className="col gap14" onSubmit={submit}>
        <Field label="Username or email"><input className="input" value={id} onChange={(e) => setId(e.target.value)} autoFocus /></Field>
        <PasswordField value={pw} onChange={(e) => setPw(e.target.value)} />
        <Btn variant="accent" size="lg" block type="submit" disabled={busy}>{busy ? "Signing in…" : "Sign in"}</Btn>
      </form>
      <div className="center muted" style={{ fontSize: 13 }}>
        New here? <span className="lnk" style={{ display: "inline-flex" }} onClick={() => ctx.nav("register")}>Create an account</span>
      </div>
      <div className="divider" />
      <div className="center"><span className="lnk" style={{ display: "inline-flex", color: "var(--muted)" }} onClick={() => ctx.nav("adminLogin")}>Studio admin sign in</span></div>
    </AuthShell>
  );
}

/* ---- REGISTER ------------------------------------------------------------ */
function CRegister({ ctx }) {
  const [f, setF] = useState({ fullname: "", username: "", email: "", password: "", phone: "", address: "", gender: "Female" });
  const set = (k) => (e) => setF((p) => ({ ...p, [k]: e.target.value }));
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);
  async function submit(e) {
    if (e) e.preventDefault();
    setBusy(true); setErr("");
    try { await ctx.register(f); } catch (ex) { setErr(ex.message); setBusy(false); }
  }
  return (
    <AuthShell ctx={ctx}>
      <div className="col gap6 center" style={{ alignItems: "center" }}>
        <h2 className="disp" style={{ fontSize: 30 }}>Create your account</h2>
        <p className="muted" style={{ fontSize: 13.5 }}>Join Vestiré Studio to reserve gowns.</p>
      </div>
      <AuthError msg={err} />
      <form className="col gap12" onSubmit={submit}>
        <Field label="Full name"><input className="input" value={f.fullname} onChange={set("fullname")} required /></Field>
        <div className="form-grid">
          <Field label="Username"><input className="input" value={f.username} onChange={set("username")} required /></Field>
          <Field label="Email"><input className="input" type="email" value={f.email} onChange={set("email")} required /></Field>
        </div>
        <PasswordField value={f.password} onChange={set("password")} />
        <div className="form-grid">
          <Field label="Phone"><input className="input" value={f.phone} onChange={set("phone")} /></Field>
          <Field label="Gender"><select className="select" value={f.gender} onChange={set("gender")}><option>Female</option><option>Male</option><option>Other</option></select></Field>
        </div>
        <Field label="Address"><input className="input" value={f.address} onChange={set("address")} /></Field>
        <Btn variant="accent" size="lg" block type="submit" disabled={busy}>{busy ? "Creating…" : "Create account"}</Btn>
      </form>
      <div className="center muted" style={{ fontSize: 13 }}>
        Already have an account? <span className="lnk" style={{ display: "inline-flex" }} onClick={() => ctx.nav("login")}>Sign in</span>
      </div>
    </AuthShell>
  );
}

/* ---- ADMIN LOGIN --------------------------------------------------------- */
function CAdminLogin({ ctx }) {
  const [email, setEmail] = useState("");
  const [pw, setPw] = useState("");
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);
  async function submit(e) {
    if (e) e.preventDefault();
    setBusy(true); setErr("");
    try { await ctx.adminLogin(email, pw); } catch (ex) { setErr(ex.message); setBusy(false); }
  }
  return (
    <AuthShell ctx={ctx}>
      <div className="col gap6 center" style={{ alignItems: "center" }}>
        <h2 className="disp" style={{ fontSize: 30 }}>Studio admin</h2>
        <p className="muted" style={{ fontSize: 13.5 }}>Manage gowns, requests and customers.</p>
      </div>
      <AuthError msg={err} />
      <form className="col gap14" onSubmit={submit}>
        <Field label="Admin email"><input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} autoFocus /></Field>
        <PasswordField value={pw} onChange={(e) => setPw(e.target.value)} />
        <Btn variant="primary" size="lg" block type="submit" disabled={busy}>{busy ? "Signing in…" : "Enter admin"}</Btn>
      </form>
      <div className="center"><span className="lnk" style={{ display: "inline-flex", color: "var(--muted)" }} onClick={() => ctx.nav("login")}>Back to customer sign in</span></div>
    </AuthShell>
  );
}

Object.assign(window, { AuthShell, CLogin, CRegister, CAdminLogin });