// A2 — Login multi-provider + A3 Magic-link confirm. Two screens side-by-side.
// driven prop: { email, state } — scene-controlled values that override internal state.
const A2Login = ({ driven } = {}) => {
  const [iState, setIState] = React.useState('default'); // default | loading | sent | error
  const [iEmail, setIEmail] = React.useState('');
  const [count, setCount] = React.useState(15);
  const state = driven?.state ?? iState;
  const email = driven?.email ?? iEmail;
  const setState = driven ? () => {} : setIState;
  const setEmail = driven ? () => {} : setIEmail;

  React.useEffect(() => {
    if (state === 'sent' && count > 0) {
      const t = setTimeout(() => setCount(c => c - 1), 1000);
      return () => clearTimeout(t);
    }
  }, [state, count]);

  const send = () => {
    if (!email) return;
    setState('loading');
    setTimeout(() => { setState('sent'); setCount(15); }, 900);
  };

  return (
    <div className="vault" style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'radial-gradient(ellipse at top, oklch(0.26 0.05 255) 0%, var(--bg-0) 55%)', padding: 24 }}>
      <div style={{ width: 420, maxWidth: '100%' }}>
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <ShieldMark size={44}/>
        </div>
        <div className="card" style={{ padding: 32, boxShadow: 'var(--shadow-3)' }}>
          {state !== 'sent' ? (
            <>
              <div style={{ textAlign: 'center', marginBottom: 24 }}>
                <h2 style={{ fontSize: 20, marginBottom: 4 }}>Log ind på Demo Beredskab</h2>
                <p style={{ fontSize: 13, color: 'var(--fg-2)' }}>Vælg din login-metode nedenfor</p>
              </div>

              {/* OAuth buttons */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <button className="btn btn-soft btn-lg" style={{ width: '100%', justifyContent: 'flex-start', paddingLeft: 16 }}>
                  <svg width="18" height="18" viewBox="0 0 23 23" aria-hidden="true"><rect x="1" y="1" width="10" height="10" fill="#f25022"/><rect x="12" y="1" width="10" height="10" fill="#7fba00"/><rect x="1" y="12" width="10" height="10" fill="#00a4ef"/><rect x="12" y="12" width="10" height="10" fill="#ffb900"/></svg>
                  <span>Log ind med Microsoft</span>
                  <I name="chevronRight" className="icon-sm" style={{ marginLeft: 'auto', color: 'var(--fg-3)' }}/>
                </button>
                <button className="btn btn-soft btn-lg" style={{ width: '100%', justifyContent: 'flex-start', paddingLeft: 16 }}>
                  <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><path fill="#4285F4" d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z"/><path fill="#34A853" d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z"/><path fill="#FBBC05" d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z"/><path fill="#EA4335" d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z"/></svg>
                  <span>Log ind med Google</span>
                  <I name="chevronRight" className="icon-sm" style={{ marginLeft: 'auto', color: 'var(--fg-3)' }}/>
                </button>
              </div>

              {/* Divider */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '20px 0' }}>
                <div style={{ flex: 1, height: 1, background: 'var(--line-soft)' }}/>
                <span style={{ fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>eller</span>
                <div style={{ flex: 1, height: 1, background: 'var(--line-soft)' }}/>
              </div>

              {/* Magic link */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <label className="label">Arbejds-email</label>
                <div className="input">
                  <I name="mail" className="icon-sm" style={{ color: 'var(--fg-3)' }}/>
                  <input placeholder="din@arbejde-email.dk" value={email} onChange={e => setEmail(e.target.value)} onKeyDown={e => e.key === 'Enter' && send()}/>
                </div>
                <button className="btn btn-primary btn-lg" onClick={send} disabled={state === 'loading' || !email} style={{ width: '100%', opacity: (state === 'loading' || !email) ? 0.6 : 1 }}>
                  {state === 'loading' ? <><I name="refresh" className="icon-sm" style={{animation:'spin 1s linear infinite'}}/> Sender...</> : <>Send login-link <I name="chevronRight" className="icon-sm"/></>}
                </button>
              </div>

              <p style={{ textAlign: 'center', fontSize: 11, color: 'var(--fg-3)', marginTop: 20 }}>
                Ved at logge ind accepterer du <u>vilkår</u> og <u>privatlivspolitik</u>.
              </p>
            </>
          ) : (
            <div style={{ textAlign: 'center', padding: '8px 0' }}>
              <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'color-mix(in oklch, var(--mode-green) 15%, transparent)', color: 'var(--mode-green)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
                <I name="mail" size={28}/>
              </div>
              <h2 style={{ fontSize: 20, marginBottom: 8 }}>Check din email</h2>
              <p style={{ fontSize: 13, color: 'var(--fg-2)', marginBottom: 20 }}>Link sendt til <span className="mono" style={{ color: 'var(--fg-0)' }}>{email || 'din@email.dk'}</span>. Det udløber om <span style={{ color: 'var(--fg-0)', fontWeight: 500 }}>{count}:00</span> minutter.</p>
              <button className="btn btn-ghost btn-sm" onClick={() => { setState('default'); setEmail(''); }}>Brug en anden email</button>
            </div>
          )}
        </div>
        <div style={{ textAlign: 'center', marginTop: 16 }}>
          <button className="btn btn-ghost btn-sm">Ikke dig? Skift tenant</button>
        </div>
      </div>
    </div>
  );
};

const A3MagicConfirm = () => {
  const [state, setState] = React.useState('default');
  const confirm = () => {
    setState('loading');
    setTimeout(() => setState('done'), 1200);
  };
  return (
    <div className="vault" style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'radial-gradient(ellipse at top, oklch(0.26 0.05 255) 0%, var(--bg-0) 55%)', padding: 24 }}>
      <div style={{ width: 420, maxWidth: '100%' }}>
        <div className="card" style={{ padding: 36, boxShadow: 'var(--shadow-3)', textAlign: 'center' }}>
          <div style={{ position: 'relative', display: 'inline-block', marginBottom: 20 }}>
            <div style={{ width: 72, height: 72, borderRadius: 16, background: 'linear-gradient(180deg, var(--primary-soft), var(--bg-2))', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--primary-strong)' }}>
              <I name="shield" size={34}/>
            </div>
            <div style={{ position: 'absolute', bottom: -4, right: -4, width: 28, height: 28, borderRadius: '50%', background: 'var(--mode-green)', color: 'oklch(0.15 0.02 160)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '3px solid var(--bg-1)' }}>
              <I name="key" className="icon-sm"/>
            </div>
          </div>
          <h2 style={{ fontSize: 22, marginBottom: 10 }}>Bekræft login</h2>
          <p style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.5, maxWidth: 320, margin: '0 auto 24px' }}>
            Af sikkerhedsmæssige grunde skal du klikke for at logge ind — det tager 1 sekund.
          </p>

          <div style={{ background: 'var(--bg-2)', border: '1px solid var(--line-soft)', borderRadius: 8, padding: '10px 14px', marginBottom: 20, display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, textAlign: 'left' }}>
            <I name="info" className="icon-sm" style={{ color: 'var(--mode-blue)' }}/>
            <span style={{ color: 'var(--fg-2)' }}>Du logger ind som <span className="mono" style={{ color: 'var(--fg-0)' }}>anders.n@horsens.dk</span></span>
          </div>

          <button className="btn btn-primary btn-lg" onClick={confirm} disabled={state !== 'default'} style={{ width: '100%' }}>
            {state === 'default' && <>Log ind nu <I name="chevronRight" className="icon-sm"/></>}
            {state === 'loading' && <><I name="refresh" className="icon-sm" style={{animation:'spin 1s linear infinite'}}/> Logger ind...</>}
            {state === 'done' && <><I name="check" className="icon-sm"/> Logget ind · omdirigerer</>}
          </button>

          <div style={{ marginTop: 16, fontSize: 12, color: 'var(--fg-3)' }}>
            Noget gik galt? <a style={{ color: 'var(--primary-strong)', textDecoration: 'underline' }}>Få nyt link</a>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 16, gap: 6, fontSize: 11, color: 'var(--fg-3)' }}>
          <I name="lock" className="icon-sm"/> Krypteret forbindelse · demo.coremindvault.com
        </div>
      </div>
      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
    </div>
  );
};

window.A2Login = A2Login;
window.A3MagicConfirm = A3MagicConfirm;