/* global React, Icon, Wordmark */
const { useState: useStateA } = React;

const AuthNav = ({ navigate }) => (
  <div className="auth-nav">
    <div className="auth-nav-inner">
      <a href="#/" onClick={(e)=>{e.preventDefault(); navigate("/");}}><Wordmark size={20}/></a>
      <a href="#/" onClick={(e)=>{e.preventDefault(); navigate("/");}} style={{fontSize:14, color:"var(--text-muted)"}}>← Back to site</a>
    </div>
  </div>
);

const AuthShell = ({ navigate, children }) => (
  <div className="auth-wrap">
    <AuthNav navigate={navigate} />
    <main className="auth-main">
      <div className="auth-deco a"/><div className="auth-deco b"/><div className="auth-deco c"/>
      {children}
    </main>
  </div>
);

const FormError = ({ children }) => children ? (
  <div className="auth-form-error">{children}</div>
) : null;

const SignUp = ({ navigate }) => {
  const [form, setForm] = useStateA({ name: "", email: "", password: "" });
  const [err, setErr] = useStateA({});
  const [busy, setBusy] = useStateA(false);
  const [topErr, setTopErr] = useStateA("");
  const [done, setDone] = useStateA(false);

  const submit = async (e) => {
    e.preventDefault();
    const nextErr = {};
    if (!form.name.trim()) nextErr.name = "Please enter your restaurant name.";
    if (!/^\S+@\S+\.\S+$/.test(form.email)) nextErr.email = "Please enter a valid email.";
    if (form.password.length < 8) nextErr.password = "At least 8 characters.";
    setErr(nextErr);
    if (Object.keys(nextErr).length) return;

    setBusy(true); setTopErr("");
    try {
      const data = await window.Supa.signUp(form.name.trim(), form.email.trim(), form.password);
      // If email confirmation is OFF, a session exists -> go straight in.
      if (data && data.session) navigate("/dashboard");
      else setDone(true); // confirmation email required
    } catch (e2) {
      setTopErr(e2.message || "Could not create your account.");
    } finally { setBusy(false); }
  };

  if (done) return (
    <AuthShell navigate={navigate}>
      <div className="auth-card">
        <h1>Check your email</h1>
        <p className="lead">We sent a confirmation link to <strong>{form.email}</strong>. Click it to activate your 30-day free trial, then sign in.</p>
        <button className="btn btn-primary btn-lg auth-submit" onClick={()=>navigate("/signin")}>Go to sign in <Icon.arrow/></button>
      </div>
    </AuthShell>
  );

  return (
    <AuthShell navigate={navigate}>
      <form className="auth-card" onSubmit={submit}>
        <h1>Create your account</h1>
        <p className="lead">Start your 30-day free trial. No credit card required.</p>
        <FormError>{topErr}</FormError>
        <div className="field">
          <label>Restaurant name</label>
          <input type="text" value={form.name} placeholder="La Taberna del Sur" onChange={(e)=>setForm({...form, name:e.target.value})}/>
          {err.name && <div className="err">{err.name}</div>}
        </div>
        <div className="field">
          <label>Email</label>
          <input type="email" value={form.email} placeholder="you@restaurant.com" onChange={(e)=>setForm({...form, email:e.target.value})}/>
          {err.email && <div className="err">{err.email}</div>}
        </div>
        <div className="field">
          <label>Password</label>
          <input type="password" value={form.password} placeholder="••••••••" onChange={(e)=>setForm({...form, password:e.target.value})}/>
          {err.password ? <div className="err">{err.password}</div> : <div className="hint">At least 8 characters.</div>}
        </div>
        <button type="submit" className="btn btn-primary btn-lg auth-submit" disabled={busy}>
          {busy ? "Creating…" : <>Create account <Icon.arrow/></>}
        </button>
        <div className="auth-foot">Already have an account? <a href="#/signin" onClick={(e)=>{e.preventDefault(); navigate("/signin");}}>Sign in</a></div>
      </form>
    </AuthShell>
  );
};

const SignIn = ({ navigate }) => {
  const [form, setForm] = useStateA({ email: "", password: "" });
  const [err, setErr] = useStateA({});
  const [busy, setBusy] = useStateA(false);
  const [topErr, setTopErr] = useStateA("");

  const submit = async (e) => {
    e.preventDefault();
    const nextErr = {};
    if (!/^\S+@\S+\.\S+$/.test(form.email)) nextErr.email = "Please enter a valid email.";
    if (form.password.length < 1) nextErr.password = "Enter your password.";
    setErr(nextErr);
    if (Object.keys(nextErr).length) return;

    setBusy(true); setTopErr("");
    try {
      await window.Supa.signIn(form.email.trim(), form.password);
      navigate("/dashboard");
    } catch (e2) {
      setTopErr(e2.message || "Could not sign in. Check your email and password.");
    } finally { setBusy(false); }
  };

  return (
    <AuthShell navigate={navigate}>
      <form className="auth-card" onSubmit={submit}>
        <h1>Welcome back</h1>
        <p className="lead">Sign in to your Scanalytics dashboard.</p>
        <FormError>{topErr}</FormError>
        <div className="field">
          <label>Email</label>
          <input type="email" value={form.email} placeholder="you@restaurant.com" onChange={(e)=>setForm({...form, email:e.target.value})}/>
          {err.email && <div className="err">{err.email}</div>}
        </div>
        <div className="field">
          <label>Password</label>
          <input type="password" value={form.password} placeholder="••••••••" onChange={(e)=>setForm({...form, password:e.target.value})}/>
          {err.password && <div className="err">{err.password}</div>}
          <div className="hint" style={{textAlign:"right"}}>
            <a href="#/reset" onClick={(e)=>{e.preventDefault(); navigate("/reset");}}>Forgot password?</a>
          </div>
        </div>
        <button type="submit" className="btn btn-primary btn-lg auth-submit" disabled={busy}>
          {busy ? "Signing in…" : <>Sign in <Icon.arrow/></>}
        </button>
        <div className="auth-foot">Don't have an account? <a href="#/signup" onClick={(e)=>{e.preventDefault(); navigate("/signup");}}>Create one</a></div>
      </form>
    </AuthShell>
  );
};

const ResetPassword = ({ navigate }) => {
  const [email, setEmail] = useStateA("");
  const [busy, setBusy] = useStateA(false);
  const [sent, setSent] = useStateA(false);
  const [topErr, setTopErr] = useStateA("");

  const submit = async (e) => {
    e.preventDefault();
    if (!/^\S+@\S+\.\S+$/.test(email)) { setTopErr("Please enter a valid email."); return; }
    setBusy(true); setTopErr("");
    try { await window.Supa.resetPassword(email.trim()); setSent(true); }
    catch (e2) { setTopErr(e2.message || "Could not send reset email."); }
    finally { setBusy(false); }
  };

  return (
    <AuthShell navigate={navigate}>
      <form className="auth-card" onSubmit={submit}>
        <h1>Reset your password</h1>
        {sent ? (
          <p className="lead">If an account exists for <strong>{email}</strong>, a reset link is on its way. Open it to set a new password.</p>
        ) : (
          <>
            <p className="lead">Enter your email and we'll send you a reset link.</p>
            <FormError>{topErr}</FormError>
            <div className="field">
              <label>Email</label>
              <input type="email" value={email} placeholder="you@restaurant.com" onChange={(e)=>setEmail(e.target.value)}/>
            </div>
            <button type="submit" className="btn btn-primary btn-lg auth-submit" disabled={busy}>
              {busy ? "Sending…" : <>Send reset link <Icon.arrow/></>}
            </button>
          </>
        )}
        <div className="auth-foot"><a href="#/signin" onClick={(e)=>{e.preventDefault(); navigate("/signin");}}>← Back to sign in</a></div>
      </form>
    </AuthShell>
  );
};

const UpdatePassword = ({ navigate }) => {
  const [pw, setPw] = useStateA("");
  const [busy, setBusy] = useStateA(false);
  const [topErr, setTopErr] = useStateA("");
  const [ok, setOk] = useStateA(false);

  const submit = async (e) => {
    e.preventDefault();
    if (pw.length < 8) { setTopErr("At least 8 characters."); return; }
    setBusy(true); setTopErr("");
    try { await window.Supa.updatePassword(pw); setOk(true); setTimeout(()=>navigate("/dashboard"), 1200); }
    catch (e2) { setTopErr(e2.message || "Could not update password. Open the reset link again."); }
    finally { setBusy(false); }
  };

  return (
    <AuthShell navigate={navigate}>
      <form className="auth-card" onSubmit={submit}>
        <h1>Set a new password</h1>
        {ok ? (
          <p className="lead">Password updated. Taking you to your dashboard…</p>
        ) : (
          <>
            <p className="lead">Choose a new password for your account.</p>
            <FormError>{topErr}</FormError>
            <div className="field">
              <label>New password</label>
              <input type="password" value={pw} placeholder="••••••••" onChange={(e)=>setPw(e.target.value)}/>
              <div className="hint">At least 8 characters.</div>
            </div>
            <button type="submit" className="btn btn-primary btn-lg auth-submit" disabled={busy}>
              {busy ? "Saving…" : <>Update password <Icon.arrow/></>}
            </button>
          </>
        )}
      </form>
    </AuthShell>
  );
};

Object.assign(window, { SignUp, SignIn, ResetPassword, UpdatePassword });