// Authentication flow — Login, Forgot password, OTP, Reset password
// Per-persona styling (Client / Admin / Driver) + shared screens
const { useState: useStateAuth, useEffect: useEffectAuth, useMemo: useMemoAuth } = React;

const DEMO_CREDS = {
  client: { id: "ops@adukeandsons.co.uk", pw: "demo1234", label: "Email" },
  admin: { id: "folake@folfem.co", pw: "admin1234", label: "Email" },
  driver: { id: "+2348024110099", pw: "4477", label: "Phone" },
};

// ---------- Shared sub-screens ----------

const ForgotForm = ({ role, onBack, onSent, identityLabel }) => {
  const [val, setVal] = useStateAuth("");
  const submit = (e) => { e?.preventDefault(); if (val) onSent(val); };
  return (
    <>
      <button className="auth-back" onClick={onBack} type="button">
        <FFIcon name="chev" size={14} stroke={2.4} style={{ transform: "rotate(180deg)" }} />
        Back
      </button>
      <div className="auth-eyebrow">Account recovery</div>
      <h2 className="auth-h1">Reset your password</h2>
      <p className="auth-sub">
        Enter the {identityLabel.toLowerCase()} on your Folfem account. We'll send a 6-digit code to verify it's you.
      </p>
      <form className="auth-form" onSubmit={submit}>
        <div className="field">
          <label>{identityLabel}</label>
          {role === "driver" ? (
            <div className="phone-input">
              <span className="cc">🇳🇬 +234</span>
              <input value={val} onChange={(e) => setVal(e.target.value)} placeholder="802 411 0099" inputMode="tel" />
            </div>
          ) : (
            <input className="input" value={val} onChange={(e) => setVal(e.target.value)} placeholder="you@company.com" type="email" autoFocus />
          )}
        </div>
        <button className="btn btn-primary btn-lg btn-block" type="submit" disabled={!val}>
          Send verification code
        </button>
      </form>
      <p className="auth-foot">Remembered it? <a onClick={onBack}>Back to sign in</a></p>
    </>
  );
};

const OTPVerify = ({ role, identity, onBack, onVerified, onResend }) => {
  const [code, setCode] = useStateAuth("");
  const [error, setError] = useStateAuth("");
  const [cooldown, setCooldown] = useStateAuth(30);
  const sandboxCode = "245680";

  useEffectAuth(() => {
    if (cooldown <= 0) return;
    const t = setTimeout(() => setCooldown(c => c - 1), 1000);
    return () => clearTimeout(t);
  }, [cooldown]);

  const tryVerify = (val) => {
    if (val.length === 6) {
      if (val === sandboxCode) onVerified();
      else { setError("That code didn't match. Try again."); setCode(""); }
    }
  };

  const onChange = (raw) => {
    const cleaned = raw.replace(/\D/g, "").slice(0, 6);
    setError("");
    setCode(cleaned);
    tryVerify(cleaned);
  };

  return (
    <>
      <button className="auth-back" onClick={onBack} type="button">
        <FFIcon name="chev" size={14} stroke={2.4} style={{ transform: "rotate(180deg)" }} />
        Back
      </button>
      <div className="auth-eyebrow">Step 2 of 3 · Verify</div>
      <h2 className="auth-h1">Enter the 6-digit code</h2>
      <p className="auth-sub">
        We sent a code to <strong style={{ color: "var(--ink)" }}>{identity}</strong>. It expires in 10 minutes.
      </p>

      <div className="otp-boxes" style={{ margin: "8px 0 4px" }}>
        {Array.from({ length: 6 }).map((_, i) => (
          <div key={i} className={"otp-box" + (i < code.length ? " filled" : (i === code.length ? " cursor" : ""))}>
            {code[i] || ""}
          </div>
        ))}
      </div>
      <input
        className="input"
        autoFocus
        inputMode="numeric"
        placeholder="•  •  •  •  •  •"
        value={code}
        onChange={(e) => onChange(e.target.value)}
        style={{ marginTop: 10, textAlign: "center", letterSpacing: "0.5em", fontFamily: "var(--font-mono)", fontSize: 18, padding: "11px 0" }}
      />

      {error && (
        <div style={{ marginTop: 10, padding: "8px 12px", background: "var(--red-soft)", color: "var(--red-ink)", borderRadius: 6, fontSize: 12 }}>
          {error}
        </div>
      )}

      <p className="auth-foot">
        Didn't get it?{" "}
        {cooldown > 0 ? (
          <span>Resend in <span className="mono" style={{ color: "var(--ink-2)" }}>{cooldown}s</span></span>
        ) : (
          <a onClick={() => { onResend(); setCooldown(30); }}>Resend code</a>
        )}
      </p>
    </>
  );
};

const ResetForm = ({ onDone }) => {
  const [pw, setPw] = useStateAuth("");
  const [pw2, setPw2] = useStateAuth("");
  const checks = {
    length: pw.length >= 8,
    upper: /[A-Z]/.test(pw),
    digit: /\d/.test(pw),
    match: pw && pw === pw2,
  };
  const strength = [checks.length, checks.upper, checks.digit, checks.match].filter(Boolean).length;
  const ok = Object.values(checks).every(Boolean);

  return (
    <>
      <div className="auth-eyebrow">Step 3 of 3 · New password</div>
      <h2 className="auth-h1">Choose a new password</h2>
      <p className="auth-sub">Make it strong — you'll use this every time you sign in.</p>
      <form className="auth-form" onSubmit={(e) => { e.preventDefault(); if (ok) onDone(); }}>
        <div className="field">
          <label>New password</label>
          <input className="input" type="password" value={pw} onChange={(e) => setPw(e.target.value)} autoFocus />
          <div className={"auth-strength s" + strength}><span /><span /><span /><span /></div>
        </div>
        <div className="field">
          <label>Confirm password</label>
          <input className="input" type="password" value={pw2} onChange={(e) => setPw2(e.target.value)} />
        </div>
        <ul className="auth-check-list">
          {[
            ["length", "At least 8 characters"],
            ["upper", "One uppercase letter"],
            ["digit", "One number"],
            ["match", "Both passwords match"],
          ].map(([k, l]) => (
            <li key={k} className={checks[k] ? "ok" : ""}>
              <span className="dot">{checks[k] && <FFIcon name="check" size={9} stroke={2.8} />}</span>
              {l}
            </li>
          ))}
        </ul>
        <button className="btn btn-primary btn-lg btn-block" type="submit" disabled={!ok}>
          Save new password
        </button>
      </form>
    </>
  );
};

// Client account registration
const RegisterClient = ({ onBack, onRegistered }) => {
  const [company, setCompany] = useStateAuth("");
  const [name, setName] = useStateAuth("");
  const [email, setEmail] = useStateAuth("");
  const [pw, setPw] = useStateAuth("");
  const [pw2, setPw2] = useStateAuth("");
  const [agree, setAgree] = useStateAuth(false);

  const checks = {
    length: pw.length >= 8,
    upper: /[A-Z]/.test(pw),
    digit: /\d/.test(pw),
    match: pw.length > 0 && pw === pw2,
  };
  const strength = [checks.length, checks.upper, checks.digit, checks.match].filter(Boolean).length;
  const ok = company && name && email && checks.length && checks.match && agree;
  const submit = (e) => { e.preventDefault(); if (ok) onRegistered({ company: company.trim(), name: name.trim(), email: email.trim() }); };

  return (
    <form className="auth-form" onSubmit={submit}>
      <button className="auth-back" onClick={onBack} type="button">
        <FFIcon name="chev" size={14} stroke={2.4} style={{ transform: "rotate(180deg)" }} />
        Back
      </button>
      <div className="auth-eyebrow">Sender portal</div>
      <h2 className="auth-h1">Create your account</h2>
      <p className="auth-sub">Set up your Folfem sender account to book UK→Nigeria shipments and track them door-to-door.</p>

      <div className="field">
        <label>Company name</label>
        <input className="input" value={company} onChange={(e) => setCompany(e.target.value)} placeholder="e.g. Lagos Trading Co (UK) Ltd" autoFocus />
      </div>
      <div className="field">
        <label>Contact name</label>
        <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="Your full name" />
      </div>
      <div className="field">
        <label>Work email</label>
        <input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@company.com" />
      </div>
      <div className="field">
        <label>Password</label>
        <input className="input" type="password" value={pw} onChange={(e) => setPw(e.target.value)} placeholder="••••••••" />
        <div className={"auth-strength s" + strength}><span /><span /><span /><span /></div>
      </div>
      <div className="field">
        <label>Confirm password</label>
        <input className="input" type="password" value={pw2} onChange={(e) => setPw2(e.target.value)} placeholder="Re-enter password" />
      </div>

      <ul className="auth-check-list">
        {[
          ["length", "At least 8 characters"],
          ["upper", "One uppercase letter"],
          ["digit", "One number"],
          ["match", "Both passwords match"],
        ].map(([k, l]) => (
          <li key={k} className={checks[k] ? "ok" : ""}>
            <span className="dot">{checks[k] && <FFIcon name="check" size={9} stroke={2.8} />}</span>
            {l}
          </li>
        ))}
      </ul>

      <label style={{ display: "flex", gap: 8, alignItems: "flex-start", fontSize: 12, color: "var(--ink-2)", cursor: "pointer", marginTop: 4, lineHeight: 1.45 }}>
        <input type="checkbox" checked={agree} onChange={(e) => setAgree(e.target.checked)} style={{ marginTop: 2 }} />
        <span>I agree to Folfem's terms of service and privacy policy.</span>
      </label>

      <button className="btn btn-primary btn-lg btn-block" type="submit" disabled={!ok}>
        Create account
      </button>

      <p className="auth-foot">Already have an account? <a onClick={onBack}>Sign in</a></p>
    </form>
  );
};

const ResetSuccess = ({ onContinue }) => (
  <div style={{ textAlign: "center" }}>
    <div className="success-tick">
      <FFIcon name="check" size={28} stroke={2.6} />
    </div>
    <h2 className="auth-h1" style={{ textAlign: "center" }}>Password updated</h2>
    <p className="auth-sub" style={{ textAlign: "center" }}>
      You can now sign in with your new password.
    </p>
    <button className="btn btn-primary btn-lg btn-block" onClick={onContinue}>Back to sign in</button>
  </div>
);

// ---------- Persona-specific login screens ----------

const LoginClient = ({ onLogin, onForgot, onRegister, error }) => {
  const [email, setEmail] = useStateAuth("");
  const [pw, setPw] = useStateAuth("");
  const submit = (e) => { e.preventDefault(); onLogin({ id: email, pw }); };
  return (
    <form className="auth-form" onSubmit={submit}>
      <div className="auth-eyebrow">Sender portal</div>
      <h2 className="auth-h1">Welcome back</h2>
      <p className="auth-sub">Sign in to book shipments to Nigeria and track them door-to-door.</p>

      <div className="field">
        <label>Work email</label>
        <input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@company.com" autoFocus />
      </div>
      <div className="field">
        <div className="row-between">
          <label>Password</label>
          <a onClick={onForgot}>Forgot?</a>
        </div>
        <input className="input" type="password" value={pw} onChange={(e) => setPw(e.target.value)} placeholder="••••••••" />
      </div>

      {error && <div style={{ padding: "8px 12px", background: "var(--red-soft)", color: "var(--red-ink)", borderRadius: 6, fontSize: 12 }}>{error}</div>}

      <button className="btn btn-primary btn-lg btn-block" type="submit" disabled={!email || !pw}>
        Sign in
      </button>

      <div className="auth-divider">or</div>
      <button className="btn btn-block" type="button">
        <FFIcon name="mail" size={14} />Continue with single sign-on
      </button>

      <p className="auth-foot">New to Folfem? <a onClick={onRegister}>Create an account</a></p>
    </form>
  );
};

const LoginAdmin = ({ onLogin, onForgot, error }) => {
  const [email, setEmail] = useStateAuth("");
  const [pw, setPw] = useStateAuth("");
  const [remember, setRemember] = useStateAuth(true);
  const submit = (e) => { e.preventDefault(); onLogin({ id: email, pw }); };
  return (
    <form className="auth-form" onSubmit={submit}>
      <h2 className="auth-h1">Dispatch console</h2>
      <p className="auth-sub">Authorized personnel only. Activity is logged.</p>

      <div className="field">
        <label>Email</label>
        <input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="name@folfem.co" autoFocus />
      </div>
      <div className="field">
        <div className="row-between">
          <label>Password</label>
          <a onClick={onForgot}>Forgot password?</a>
        </div>
        <input className="input" type="password" value={pw} onChange={(e) => setPw(e.target.value)} />
      </div>

      <label style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 12, color: "var(--ink-2)", cursor: "pointer", marginTop: -4 }}>
        <input type="checkbox" checked={remember} onChange={(e) => setRemember(e.target.checked)} />
        Trust this device for 14 days
      </label>

      {error && <div style={{ padding: "8px 12px", background: "var(--red-soft)", color: "var(--red-ink)", borderRadius: 6, fontSize: 12 }}>{error}</div>}

      <button className="btn btn-primary btn-lg btn-block" type="submit" disabled={!email || !pw}>
        Sign in
      </button>

      <div className="mfa-note">
        <FFIcon name="bell" size={14} />
        <div>
          <strong>2-step verification</strong> is on. You'll get a push to your authenticator after password.
        </div>
      </div>
    </form>
  );
};

const LoginDriver = ({ onLogin, onForgot, error }) => {
  const [phone, setPhone] = useStateAuth("");
  const [pin, setPin] = useStateAuth("");
  const submit = (e) => { e?.preventDefault(); onLogin({ id: "+234" + phone.replace(/\D/g, ""), pw: pin }); };
  return (
    <form className="auth-form" onSubmit={submit}>
      <div className="field">
        <label>Phone number</label>
        <div className="phone-input">
          <span className="cc">🇳🇬 +234</span>
          <input value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="802 411 0099" inputMode="tel" autoFocus />
        </div>
      </div>
      <div className="field">
        <div className="row-between">
          <label>4-digit PIN</label>
          <a onClick={onForgot}>Forgot PIN?</a>
        </div>
        <input className="input mono" type="password" inputMode="numeric" maxLength={4} value={pin} onChange={(e) => setPin(e.target.value.replace(/\D/g, ""))} placeholder="••••" style={{ letterSpacing: "0.5em", fontSize: 18, textAlign: "center" }} />
      </div>

      {error && <div style={{ padding: "8px 12px", background: "var(--red-soft)", color: "var(--red-ink)", borderRadius: 6, fontSize: 12 }}>{error}</div>}

      <button className="btn btn-primary btn-lg btn-block" type="submit" disabled={!phone || pin.length !== 4}>
        Sign in
      </button>
    </form>
  );
};

// ---------- Persona shells (wrap the steps with persona chrome) ----------

const AuthFlowInner = ({ role, step, setStep, onAuthed }) => {
  const [error, setError] = useStateAuth("");
  const [identity, setIdentity] = useStateAuth("");

  // sandbox login validation — accepts demo creds OR any plausible input + "demo"-style password
  const handleLogin = ({ id, pw }) => {
    const demo = DEMO_CREDS[role];
    if (id === demo.id && pw === demo.pw) {
      setError("");
      onAuthed();
      return;
    }
    // be permissive for the POC — accept any non-empty values
    if (id && pw && pw.length >= 4) {
      setError("");
      onAuthed();
      return;
    }
    setError("Those credentials didn't match our records.");
  };

  if (step === "login") {
    if (role === "client") return <LoginClient onLogin={handleLogin} onForgot={() => setStep("forgot")} onRegister={() => setStep("register")} error={error} />;
    if (role === "admin") return <LoginAdmin onLogin={handleLogin} onForgot={() => setStep("forgot")} error={error} />;
    if (role === "driver") return <LoginDriver onLogin={handleLogin} onForgot={() => setStep("forgot")} error={error} />;
  }
  if (step === "forgot") return (
    <ForgotForm
      role={role}
      identityLabel={role === "driver" ? "Phone number" : "Email"}
      onBack={() => setStep("login")}
      onSent={(v) => { setIdentity(v); setStep("otp"); }}
    />
  );
  if (step === "otp") return (
    <OTPVerify
      role={role}
      identity={identity}
      onBack={() => setStep("forgot")}
      onVerified={() => setStep("reset")}
      onResend={() => {}}
    />
  );
  if (step === "register") return (
    <RegisterClient
      onBack={() => setStep("login")}
      onRegistered={(info) => onAuthed({ newClient: info.company })}
    />
  );
  if (step === "reset") return <ResetForm onDone={() => setStep("success")} />;
  if (step === "success") return <ResetSuccess onContinue={() => setStep("login")} />;
  return null;
};

const AuthFlow = ({ role, onAuthed }) => {
  const [step, setStep] = useStateAuth("login");

  if (role === "client") {
    return (
      <div className="auth-wrap">
        <div className="auth-client">
          <aside className="auth-marketing">
            <div className="brand-lockup">
              <span className="brand-mark" />
              Folfem
            </div>
            <h1>Ship from the UK to Nigeria, door to door.</h1>
            <p>Air, sea and land cargo, parcels and barrels, pallets and commercial freight — Folfem handles UK collection, customs clearance and last-mile delivery across Nigeria.</p>
            <div className="testimonial">
              <q>Folfem clears our cosmetics through customs and delivers to Lagos in days. We finally know where every shipment is.</q>
              <div className="who">— Bayo A., Director · Aduke &amp; Sons (UK) Ltd</div>
            </div>
            <div className="stats">
              <div className="stat"><div className="v">3<span className="unit">+</span></div><div className="k">UK &amp; Lagos offices</div></div>
              <div className="stat"><div className="v">2<span className="unit">x</span></div><div className="k">Air &amp; sea weekly</div></div>
              <div className="stat"><div className="v">98<span className="unit">%</span></div><div className="k">Cleared on time</div></div>
            </div>
          </aside>
          <div className="auth-form-side">
            <div className="auth-card-shell">
              <AuthFlowInner role={role} step={step} setStep={setStep} onAuthed={onAuthed} />
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (role === "admin") {
    return (
      <div className="auth-wrap">
        <div className="auth-admin">
          <div className="auth-admin-card">
            <span className="console-tag">Internal · v0.1</span>
            <div className="lockup">
              <span className="brand-mark" />
              <span className="nm">Folfem Dispatch</span>
            </div>
            <AuthFlowInner role={role} step={step} setStep={setStep} onAuthed={onAuthed} />
          </div>
        </div>
      </div>
    );
  }

  // Driver — phone frame
  return (
    <div className="auth-wrap">
      <div className="auth-driver">
        <div className="auth-driver-aside">
          <div className="brand" style={{ marginBottom: 14 }}>
            <span className="brand-mark" />
            Folfem <span style={{ color: "var(--muted)", fontWeight: 500, fontSize: 12, marginLeft: 6 }}>for Drivers</span>
          </div>
          <h2>Your last-mile jobs, in your pocket.</h2>
          <p>Accept dispatcher assignments, collect cleared shipments from the Folfem hub, and verify deliveries to recipients with one-time codes — all from your phone.</p>
          <div className="feat">
            <span className="glyph"><FFIcon name="bell" size={15} /></span>
            <div>
              <div className="nm">Instant assignments</div>
              <div className="ds">Get notified when a cleared shipment is ready for delivery</div>
            </div>
          </div>
          <div className="feat">
            <span className="glyph"><FFIcon name="check" size={15} stroke={2.4} /></span>
            <div>
              <div className="nm">OTP proof of delivery</div>
              <div className="ds">Verified hand-off, signed and timestamped</div>
            </div>
          </div>
          <div className="feat">
            <span className="glyph"><FFIcon name="map" size={15} /></span>
            <div>
              <div className="nm">Routed for you</div>
              <div className="ds">Hub pickup & recipient delivery in one tap</div>
            </div>
          </div>
        </div>
        <IOSDevice width={360} height={720}>
          <div style={{ height: "100%", paddingTop: 50, paddingBottom: 0, display: "flex", flexDirection: "column", overflow: "auto" }}>
            <div className="auth-dm">
              <div className="auth-dm-logo">
                <span className="brand-mark" />
                <div className="nm">Folfem Driver</div>
                <div className="sub">Sandbox · v0.1</div>
              </div>
              <AuthFlowInner role={role} step={step} setStep={setStep} onAuthed={onAuthed} />
            </div>
          </div>
        </IOSDevice>
      </div>
    </div>
  );
};

window.AuthFlow = AuthFlow;