/* SkyOps — Sign-in. SSO first (enterprise tenants), email + password fallback, tenant resolved from email domain,
   second factor, recoverable errors. Session kept in localStorage; Sign out returns here. */

const { useState: uSLG, useEffect: uELG, useRef: uRLG } = React;

const LG_KEY = "skyops_session_v1";
const LG_TENANTS = { "iberdrola.com": ["Iberdrola Renovables", "Microsoft Entra ID"], "solaria.es": ["Solaria Energía", "Okta"], "aeroscan.es": ["AeroScan Ibérica", null] };
const LG_DEMO = [["pilot", "Tomás Aragón", "Pilot · thermographer", "tomas.aragon@iberdrola.com"], ["analyst", "Inês Duarte", "Analyst", "ines.duarte@iberdrola.com"], ["site_manager", "Marta Rivera", "Site manager", "marta.rivera@iberdrola.com"], ["service_mgr", "Luís Ferreira", "Service company", "luis.ferreira@aeroscan.es"], ["portfolio", "E. Vasconcelos", "Portfolio manager", "e.vasconcelos@iberdrola.com"]];
const lgSession = () => { try { return JSON.parse(localStorage.getItem(LG_KEY) || "null"); } catch { return null; } };
function skySignOut() { localStorage.removeItem(LG_KEY); window.dispatchEvent(new Event("skyops:session")); }

function LoginScreen({ onSignedIn }) {
  const [step, setStep] = uSLG("email"); // email | password | mfa | forgot | sent
  const [email, setEmail] = uSLG(() => localStorage.getItem("skyops_last_email") || "");
  const [pw, setPw] = uSLG("");
  const [show, setShow] = uSLG(false);
  const [remember, setRemember] = uSLG(true);
  const [code, setCode] = uSLG(["", "", "", "", "", ""]);
  const [err, setErr] = uSLG(null);
  const [busy, setBusy] = uSLG(false);
  const [tries, setTries] = uSLG(0);
  const codeRefs = uRLG([]);
  const domain = (email.split("@")[1] || "").toLowerCase();
  const tenant = LG_TENANTS[domain];
  const validEmail = /^[^@\s]+@[^@\s]+\.[a-z]{2,}$/i.test(email);
  const persona = (LG_DEMO.find(d => d[3] === email.toLowerCase()) || [])[0] || "site_manager";
  const wait = (ms) => new Promise(r => setTimeout(r, ms));
  const finish = async (method) => {
    setBusy(true); await wait(500);
    localStorage.setItem(LG_KEY, JSON.stringify({ email, tenant: tenant ? tenant[0] : "SkyOps", method, at: new Date().toISOString(), remember }));
    localStorage.setItem("skyops_last_email", remember ? email : "");
    if (tenant) localStorage.setItem("skyops_tenant", tenant[0]);
    onSignedIn(persona);
  };
  const next = async (e) => {
    e && e.preventDefault(); setErr(null);
    if (step === "email") {
      if (!validEmail) return setErr("Enter a work email, e.g. name@company.com.");
      setBusy(true); await wait(350); setBusy(false); setStep("password");
    } else if (step === "password") {
      if (pw.length < 8) { setTries(t => t + 1); return setErr(tries >= 2 ? "Incorrect password. 2 attempts left before the account locks for 15 minutes." : "Incorrect email or password."); }
      setBusy(true); await wait(450); setBusy(false); setStep("mfa"); setTimeout(() => codeRefs.current[0] && codeRefs.current[0].focus(), 50);
    } else if (step === "mfa") {
      const c = code.join("");
      if (c.length < 6) return setErr("Enter the 6-digit code from your authenticator app.");
      finish("password+totp");
    } else if (step === "forgot") {
      if (!validEmail) return setErr("Enter the email you sign in with.");
      setBusy(true); await wait(400); setBusy(false); setStep("sent");
    }
  };
  const setDigit = (i, v) => {
    const d = v.replace(/\D/g, "");
    if (d.length > 1) { const arr = d.slice(0, 6).split(""); setCode([...arr, ...Array(6 - arr.length).fill("")]); codeRefs.current[Math.min(5, arr.length)]?.focus(); return; }
    setCode(c => c.map((x, j) => j === i ? d : x)); if (d && i < 5) codeRefs.current[i + 1]?.focus();
  };
  uELG(() => { if (step === "mfa" && code.every(Boolean)) finish("password+totp"); }, [code]);

  return (
    <div className="sgn">
      <section className="sgn-brand">
        <div className="sgn-logo">
          <span className="sb-glyph sgn-glyph"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M4 18 L12 4 L20 18"/><path d="M8 18 L12 11 L16 18" opacity="0.55"/></svg></span>
          <span className="sgn-word"><b>Sky</b>Ops</span>
        </div>
        <div className="sgn-pitch">
          <h1>Fly the mission. Upload the data.<br/>The platform delivers the intelligence.</h1>
          <p>Thermal and visual inspection, defect detection, IEC TS 62446-3 reporting and financially-scored action plans for utility-scale PV.</p>
        </div>
        <div className="sgn-facts">
          {[["Inspection standard", "IEC TS 62446-3"], ["Data residency", "EU-West · Frankfurt"], ["Certification", "ISO 27001"]].map(([a, b]) => <div key={a}><span>{a}</span><b>{b}</b></div>)}
        </div>
      </section>

      <section className="sgn-panel">
        <form className="sgn-card" onSubmit={next} noValidate>
          {step !== "email" && step !== "sent" && <button type="button" className="sgn-back" onClick={() => { setErr(null); setStep(step === "mfa" ? "password" : "email"); }}><Icon name="chevron_down" size={12} style={{ transform: "rotate(90deg)" }}/>Back</button>}

          {step === "email" && <>
            <h2>Sign in</h2>
            <p className="sgn-sub">Use your work account.</p>
            <label className="field"><span>Work email</span>
              <input className={`inp sgn-inp ${err ? "is-err" : ""}`} type="email" autoComplete="username" autoFocus value={email} onChange={e => { setEmail(e.target.value); setErr(null); }} placeholder="name@company.com" aria-invalid={!!err} aria-describedby="sgn-err"/></label>
            {tenant && <div className="sgn-tenant"><span className="dot"/><span><b>{tenant[0]}</b>{tenant[1] ? ` · single sign-on with ${tenant[1]}` : " · email and password"}</span></div>}
            {err && <div className="sgn-err" id="sgn-err" role="alert"><Icon name="alert" size={11}/>{err}</div>}
            {tenant && tenant[1]
              ? <><button type="button" className="btn btn-primary sgn-btn" disabled={busy} onClick={() => finish("sso")}>{busy ? <span className="sgn-spin"/> : <Icon name="shield" size={13}/>}Continue with {tenant[1]}</button>
                  <button type="submit" className="btn btn-ghost sgn-btn-2" disabled={busy}>Use password instead</button></>
              : <button type="submit" className="btn btn-primary sgn-btn" disabled={busy}>{busy ? <span className="sgn-spin"/> : null}Continue</button>}
          </>}

          {step === "password" && <>
            <h2>Enter your password</h2>
            <div className="sgn-who"><span className="sgn-av">{email[0]?.toUpperCase()}</span><span>{email}</span></div>
            <label className="field"><span>Password</span>
              <div className="sgn-pw"><input className={`inp sgn-inp ${err ? "is-err" : ""}`} type={show ? "text" : "password"} autoComplete="current-password" autoFocus value={pw} onChange={e => { setPw(e.target.value); setErr(null); }} aria-invalid={!!err} aria-describedby="sgn-err"/>
                <button type="button" className="sgn-eye" onClick={() => setShow(!show)} aria-label={show ? "Hide password" : "Show password"}><Icon name="eye" size={13}/></button></div></label>
            {err && <div className="sgn-err" id="sgn-err" role="alert"><Icon name="alert" size={11}/>{err}</div>}
            <div className="sgn-row"><label className="sgn-check"><input type="checkbox" checked={remember} onChange={e => setRemember(e.target.checked)}/>Keep me signed in for 30 days</label><button type="button" className="cm-link" onClick={() => { setErr(null); setStep("forgot"); }}>Forgot password?</button></div>
            <button type="submit" className="btn btn-primary sgn-btn" disabled={busy || !pw}>{busy ? <span className="sgn-spin"/> : null}Sign in</button>
          </>}

          {step === "mfa" && <>
            <h2>Two-step verification</h2>
            <p className="sgn-sub">Enter the 6-digit code from your authenticator app.</p>
            <div className="sgn-code" onPaste={e => { e.preventDefault(); setDigit(0, e.clipboardData.getData("text")); }}>
              {code.map((d, i) => <input key={i} ref={el => codeRefs.current[i] = el} className="inp mono" inputMode="numeric" maxLength={6} value={d} aria-label={`Digit ${i + 1}`}
                onChange={e => setDigit(i, e.target.value)} onKeyDown={e => { if (e.key === "Backspace" && !d && i > 0) codeRefs.current[i - 1].focus(); }}/>)}
            </div>
            {err && <div className="sgn-err" role="alert"><Icon name="alert" size={11}/>{err}</div>}
            <button type="submit" className="btn btn-primary sgn-btn" disabled={busy}>{busy ? <span className="sgn-spin"/> : null}Verify</button>
            <div className="sgn-row"><button type="button" className="cm-link" onClick={() => setErr("Recovery codes are in your account security sheet. Contact your tenant admin if you lost them.")}>Use a recovery code</button></div>
          </>}

          {step === "forgot" && <>
            <h2>Reset password</h2>
            <p className="sgn-sub">We will send a reset link to your work email. It expires in 30 minutes.</p>
            <label className="field"><span>Work email</span><input className={`inp sgn-inp ${err ? "is-err" : ""}`} type="email" value={email} onChange={e => { setEmail(e.target.value); setErr(null); }}/></label>
            {tenant && tenant[1] && <div className="sgn-tenant warn"><Icon name="alert" size={11}/><span>{tenant[0]} uses {tenant[1]}. Reset your password there; SkyOps does not store it.</span></div>}
            {err && <div className="sgn-err" role="alert"><Icon name="alert" size={11}/>{err}</div>}
            <button type="submit" className="btn btn-primary sgn-btn" disabled={busy}>{busy ? <span className="sgn-spin"/> : null}Send reset link</button>
          </>}

          {step === "sent" && <>
            <h2>Check your email</h2>
            <p className="sgn-sub">If an account exists for <b>{email}</b>, a reset link is on its way.</p>
            <button type="button" className="btn btn-secondary sgn-btn" onClick={() => setStep("email")}>Back to sign in</button>
          </>}
        </form>

        <div className="sgn-demo">
          <div className="sgn-demo-h">Demo accounts</div>
          <div className="sgn-demo-l">{LG_DEMO.map(([k, n, r, e]) => <button key={k} type="button" onClick={() => { setEmail(e); setPw("demo-password"); setErr(null); setStep("password"); }}><span className="sgn-av sm">{n.split(" ").map(w => w[0]).slice(0, 2).join("")}</span><span><b>{n}</b><em>{r}</em></span></button>)}</div>
          <div className="sgn-demo-n">Any password of 8+ characters and any 6-digit code work in the demo.</div>
        </div>
        <div className="sgn-foot"><span>© 2026 SkyOps</span><a href="#" onClick={e => e.preventDefault()}>Privacy</a><a href="#" onClick={e => e.preventDefault()}>Terms</a><a href="#" onClick={e => e.preventDefault()}>Status</a></div>
      </section>
    </div>
  );
}

Object.assign(window, { LoginScreen, lgSession, skySignOut });