// CORE-01 · Login & SSO  (standalone auth screen — no admin shell)
// Username/password + optional SSO. Role determined post-login → CORE-03.
const LoginPage = () => {
  const Ic = window.Icons;
  const [email, setEmail] = useState("caroline@amoms.co.ke");
  const [pw, setPw] = useState("");
  const [show, setShow] = useState(false);
  const [err, setErr] = useState(false);
  const [busy, setBusy] = useState(false);
  const [keep, setKeep] = useState(true);

  const submit = (e) => {
    e.preventDefault();
    if (!pw.trim()) { setErr(true); return; }
    setBusy(true);
    setTimeout(() => { window.location.href = "CORE-03.html"; }, 700);
  };

  const GoogleLogo = () => (
    <svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true">
      <path fill="#FFC107" d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"/>
      <path fill="#FF3D00" d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z"/>
      <path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238C29.211 35.091 26.715 36 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z"/>
      <path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303c-.792 2.237-2.231 4.166-4.087 5.571l6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z"/>
    </svg>
  );
  const MicrosoftLogo = () => (
    <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
      <rect x="1" y="1" width="10" height="10" fill="#F25022"/>
      <rect x="13" y="1" width="10" height="10" fill="#7FBA00"/>
      <rect x="1" y="13" width="10" height="10" fill="#00A4EF"/>
      <rect x="13" y="13" width="10" height="10" fill="#FFB900"/>
    </svg>
  );
  const SSO = ({ logo, label }) => (
    <button type="button" className="sso-btn" onClick={submit}>
      <span className="sso-glyph" style={{ background: "transparent", borderRadius: 0 }}>{logo}</span>
      Continue with {label}
    </button>
  );

  return (
    <div className="auth-split">
      {/* Brand panel */}
      <div className="auth-brand">
        <div className="auth-brand-top">
          <span className="auth-brand-mark"><Ic.Leaf size={24}/></span>
          <div>
            <div className="auth-brand-name">AMOMS</div>
            <div className="auth-brand-sub">Avocado Oil Mill Operations</div>
          </div>
        </div>
        <div className="auth-brand-mid">
          <div className="auth-brand-head">One platform, from farm gate to finished oil.</div>
          <div className="auth-brand-desc">Procurement, gate logistics, quality control, production, warehouse and sales — coordinated for AMOMS, Murang'a Plant.</div>
          <div className="auth-brand-stats">
            <div className="auth-brand-stat"><div className="v">312</div><div className="l">Farmers onboarded</div></div>
            <div className="auth-brand-stat"><div className="v">6</div><div className="l">Operating modules</div></div>
            <div className="auth-brand-stat"><div className="v">99.9%</div><div className="l">Uptime</div></div>
          </div>
        </div>
        <div className="auth-brand-foot">© 2026 AMOMS Ltd · Murang'a, Kenya</div>
      </div>

      {/* Form panel */}
      <div className="auth-pane">
        <div className="auth-card">
          <span className="auth-mark-sm"><Ic.Leaf size={22}/></span>
          <div className="auth-h1">Sign in</div>
          <div className="auth-p">Welcome back. Your role and home screen are set up after you sign in.</div>

          <form className="auth-form" onSubmit={submit}>
            {err && <div className="auth-alert"><Ic.Warning size={15}/><span>Incorrect email or password. After 5 failed attempts the account is locked for 15 minutes.</span></div>}
            <div className="field">
              <label className="label">Work email</label>
              <div className="auth-input-wrap">
                <Ic.Mail size={16} className="ic"/>
                <input className="input" type="email" value={email} onChange={(e)=> { setEmail(e.target.value); setErr(false); }} placeholder="you@amoms.co.ke" autoComplete="username"/>
              </div>
            </div>
            <div className="field">
              <div className="auth-field-row" style={{ marginBottom: 6 }}>
                <label className="label" style={{ margin: 0 }}>Password</label>
                <a className="auth-link" href="CORE-02.html">Forgot password?</a>
              </div>
              <div className="auth-input-wrap">
                <Ic.Lock size={16} className="ic"/>
                <input className="input" type={show ? "text" : "password"} value={pw} onChange={(e)=> { setPw(e.target.value); setErr(false); }} placeholder="Enter your password" autoComplete="current-password"/>
                <button type="button" className="eye" onClick={()=> setShow(s => !s)} aria-label={show ? "Hide password" : "Show password"}>{show ? <Ic.EyeOff size={16}/> : <Ic.Eye size={16}/>}</button>
              </div>
            </div>
            <label className="auth-check-row">
              <input type="checkbox" checked={keep} onChange={(e)=> setKeep(e.target.checked)} style={{ position: "absolute", opacity: 0, width: 0, height: 0 }}/>
              <span className={"auth-check" + (keep ? " on" : "")} aria-hidden="true">{keep && <Ic.Check size={12}/>}</span>
              Keep me signed in for 30 days
            </label>
            <Button variant="primary" className="auth-submit" type="submit" disabled={busy}>
              {busy ? "Signing in…" : "Sign in"}
            </Button>
          </form>

          <div className="auth-divider">or</div>
          <div className="sso-list">
            <SSO logo={<GoogleLogo/>} label="Google"/>
            <SSO logo={<MicrosoftLogo/>} label="Microsoft"/>
          </div>

          <div className="auth-foot">Single sign-on is configured by your administrator.<br/>Trouble signing in? Contact <b>it@amoms.co.ke</b></div>
        </div>
      </div>
    </div>
  );
};

const coreAuthRoot = ReactDOM.createRoot(document.getElementById("root"));
coreAuthRoot.render(<ToastProvider><LoginPage/></ToastProvider>);