// auth-screens.jsx — Login flow artboards
// Mac window 1100×720 fixed for the auth flow

const AUTH_W = 1100;
const AUTH_H = 720;

// ─────────────────────────────────────────────────────────────
// Background — pure single color, no noise/dots/gradient
// per user requirement: "背景一定要干净纯色"
// ─────────────────────────────────────────────────────────────
function AuthSurface({ dark, children }) {
  return (
    <Theme dark={dark}>
      <GhastWindow dark={dark} style={{ height: AUTH_H }}>
        {/* traffic lights overlay */}
        <div style={{ position: 'absolute', top: 16, left: 18, zIndex: 10 }}>
          <TrafficLights />
        </div>
        {children}
      </GhastWindow>
    </Theme>
  );
}

// ─────────────────────────────────────────────────────────────
// Two-column layout — brand panel (left) + form (right)
// ─────────────────────────────────────────────────────────────
function AuthLayout({ children, dark }) {
  const t = dark ? G.d : G.l;
  const bgUrl = dark ? './public/assets/auth-bg-dark.png' : './public/assets/auth-bg-light.png';
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex' }}>
      {/* Brand panel — poster as background, content layered on top */}
      <div style={{
        width: 460, height: '100%',
        background: dark ? '#000' : '#F0EFEC',
        borderRight: `0.5px solid ${t.border}`,
        display: 'flex', flexDirection: 'column',
        padding: '52px 48px',
        position: 'relative',
        overflow: 'hidden',
      }}>
        {/* Background poster */}
        <img src={bgUrl} alt="" aria-hidden="true" style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', userSelect: 'none', pointerEvents: 'none',
        }} />
        {/* Subtle legibility wash — kept gentle to preserve poster character */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: dark
            ? 'linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.18) 55%, rgba(0,0,0,0.32) 100%)'
            : 'linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.08) 55%, rgba(255,255,255,0.20) 100%)',
        }} />

        {/* Content layer */}
        <div style={{ position: 'relative', zIndex: 1, display: 'flex', alignItems: 'center', gap: 10 }}>
          <GhastLogo size={28} color={t.fg} />
          <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: -0.1, color: t.fg }}>Ghast</div>
        </div>

        <div style={{ position: 'relative', zIndex: 1, flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div style={{
            fontFamily: '"SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif',
            fontSize: 46, fontWeight: 500, lineHeight: 1.02, letterSpacing: -1.6,
            color: t.fg, marginBottom: 32,
          }}>
            Your memory.<br/>Your agent.<br/>Become your assets.
          </div>
          <div style={{
            fontSize: 15, lineHeight: 1.6, letterSpacing: -0.05,
            color: t.fg2, maxWidth: 360,
          }}>
            Train it once. Own it forever. Every memory, skill, and agent travels with your wallet.
          </div>
        </div>
      </div>

      {/* Form */}
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 48 }}>
        <div style={{ width: 360 }}>{children}</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 1. Sign-in (default): Google + email
// ─────────────────────────────────────────────────────────────
function AuthSignIn({ dark, error, emailValue }) {
  const t = dark ? G.d : G.l;
  return (
    <AuthSurface dark={dark}>
      <AuthLayout dark={dark}>
        <div>
          <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: -0.6, marginBottom: 8 }}>Welcome back</div>
          <div style={{ fontSize: 14, color: t.fg2, marginBottom: 32 }}>Sign in to continue to Ghast.</div>

          <Button variant="secondary" size="lg" full
            icon={<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
              <path d="M17.6 9.2c0-.6-.1-1.2-.2-1.8H9v3.4h4.8c-.2 1.1-.8 2-1.8 2.7v2.2h2.9c1.7-1.6 2.7-3.9 2.7-6.5Z" fill="#4285F4"/>
              <path d="M9 18c2.4 0 4.5-.8 6-2.2l-2.9-2.2c-.8.5-1.9.9-3.1.9-2.3 0-4.3-1.6-5-3.7H1v2.3A9 9 0 0 0 9 18Z" fill="#34A853"/>
              <path d="M4 10.8a5.4 5.4 0 0 1 0-3.5V5H1a9 9 0 0 0 0 8.1L4 10.8Z" fill="#FBBC05"/>
              <path d="M9 3.6c1.3 0 2.5.5 3.4 1.3l2.5-2.5A9 9 0 0 0 9 0 9 9 0 0 0 1 5l3 2.3C4.7 5.1 6.7 3.6 9 3.6Z" fill="#EA4335"/>
            </svg>}
            style={{ marginBottom: 12, justifyContent: 'flex-start', paddingLeft: 16 }}>
            <span style={{ flex: 1, textAlign: 'center' }}>Continue with Google</span>
          </Button>

          <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '20px 0', color: t.fg3, fontSize: 11, letterSpacing: 0.5 }}>
            <Divider style={{ flex: 1 }} />
            <span>OR</span>
            <Divider style={{ flex: 1 }} />
          </div>

          <Input
            label="Email"
            placeholder="you@domain.com"
            value={emailValue || ''}
            icon={<Icon name="mail" size={16} color={t.fg3} />}
            type="email"
            style={error ? { borderColor: t.fg, boxShadow: `inset 0 0 0 1px ${t.fg}` } : {}}
          />
          {error && (
            <div style={{ fontSize: 12, color: t.fg2, marginTop: 6, display: 'flex', gap: 6, alignItems: 'center' }}>
              <Icon name="warn" size={13} /> {error}
            </div>
          )}

          <Button variant="primary" size="lg" full style={{ marginTop: 16 }}
            icon={<Icon name="arrowRight" size={16} color={t.bg} />}>
            <span style={{ flex: 1, textAlign: 'center' }}>Continue with email</span>
          </Button>

          <div style={{ marginTop: 28, fontSize: 12, color: t.fg3, lineHeight: 1.5 }}>
            By continuing you agree to our <span style={{ color: t.fg2, textDecoration: 'underline', textUnderlineOffset: 3 }}>Terms</span> and <span style={{ color: t.fg2, textDecoration: 'underline', textUnderlineOffset: 3 }}>Privacy</span>.
          </div>
        </div>
      </AuthLayout>
    </AuthSurface>
  );
}

// ─────────────────────────────────────────────────────────────
// 2. Google authorizing — modal-style overlay, spinner
// ─────────────────────────────────────────────────────────────
function AuthGoogleAuthorizing({ dark }) {
  const t = dark ? G.d : G.l;
  return (
    <AuthSurface dark={dark}>
      <AuthLayout dark={dark}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
            <div style={{
              width: 48, height: 48, borderRadius: 12,
              background: t.surface, border: `1px solid ${t.border}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <svg width="22" height="22" viewBox="0 0 18 18" fill="none">
                <path d="M17.6 9.2c0-.6-.1-1.2-.2-1.8H9v3.4h4.8c-.2 1.1-.8 2-1.8 2.7v2.2h2.9c1.7-1.6 2.7-3.9 2.7-6.5Z" fill="#4285F4"/>
                <path d="M9 18c2.4 0 4.5-.8 6-2.2l-2.9-2.2c-.8.5-1.9.9-3.1.9-2.3 0-4.3-1.6-5-3.7H1v2.3A9 9 0 0 0 9 18Z" fill="#34A853"/>
                <path d="M4 10.8a5.4 5.4 0 0 1 0-3.5V5H1a9 9 0 0 0 0 8.1L4 10.8Z" fill="#FBBC05"/>
                <path d="M9 3.6c1.3 0 2.5.5 3.4 1.3l2.5-2.5A9 9 0 0 0 9 0 9 9 0 0 0 1 5l3 2.3C4.7 5.1 6.7 3.6 9 3.6Z" fill="#EA4335"/>
              </svg>
            </div>
            <div style={{
              width: 8, height: 8, borderRadius: 4, background: t.fg3,
              animation: 'gh-pulse 1.4s ease-in-out infinite',
            }} />
            <div style={{
              width: 48, height: 48, borderRadius: 12,
              background: t.fg, color: t.bg,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <GhastLogo size={28} color={t.bg} />
            </div>
          </div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.4, marginBottom: 8 }}>Authorizing with Google…</div>
          <div style={{ fontSize: 14, color: t.fg2, marginBottom: 32, lineHeight: 1.5 }}>
            We've opened your browser. Approve access there and we'll bring you back.
          </div>
          <Button variant="secondary" size="md" style={{ minWidth: 140 }}>
            Cancel
          </Button>
          <div style={{ marginTop: 36, fontFamily: G.mono, fontSize: 11, color: t.fg3, letterSpacing: 0.4 }}>
            ↻  Waiting for browser response
          </div>
        </div>
      </AuthLayout>
    </AuthSurface>
  );
}

// ─────────────────────────────────────────────────────────────
// 3. Email — verification code entry
// ─────────────────────────────────────────────────────────────
function AuthEmailCode({ dark, filled = 0, error, expired }) {
  const t = dark ? G.d : G.l;
  const code = ['7', '2', '4', '9', '0', '3'];
  return (
    <AuthSurface dark={dark}>
      <AuthLayout dark={dark}>
        <div>
          <button style={{
            display: 'flex', alignItems: 'center', gap: 6,
            background: 'transparent', border: 'none', color: t.fg2,
            fontSize: 12, cursor: 'pointer', padding: 0, marginBottom: 24,
            fontFamily: G.font,
          }}>
            <Icon name="arrowLeft" size={14} /> Back
          </button>
          <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: -0.6, marginBottom: 8 }}>Enter your code</div>
          <div style={{ fontSize: 14, color: t.fg2, marginBottom: 32, lineHeight: 1.55 }}>
            We sent a 6-digit code to <span style={{ color: t.fg, fontWeight: 500 }}>liu@example.com</span>. It expires in 10 minutes.
          </div>

          <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
            {[0,1,2,3,4,5].map((i) => {
              const isFilled = i < filled;
              const isFocus = i === filled && !error;
              const isErr = error && i < filled;
              return (
                <div key={i} style={{
                  flex: 1, height: 52,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  background: t.surface,
                  border: `1px solid ${isErr ? t.fg : isFocus ? t.fg : t.border}`,
                  borderWidth: (isFocus || isErr) ? 1.5 : 1,
                  borderRadius: 10,
                  fontFamily: G.mono, fontSize: 22, fontWeight: 500,
                  color: t.fg, position: 'relative',
                }}>
                  {isFilled ? code[i] : ''}
                  {isFocus && <span style={{
                    width: 1, height: 22, background: t.fg, animation: 'gh-blink 1s infinite',
                  }} />}
                </div>
              );
            })}
          </div>

          {error && (
            <div style={{ fontSize: 12, color: t.fg, marginBottom: 14, display: 'flex', gap: 6, alignItems: 'center' }}>
              <Icon name="warn" size={13} /> {error}
            </div>
          )}

          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 12, color: t.fg3, marginTop: 18 }}>
            <span>{expired ? 'Code expired' : 'Didn\u2019t receive it?'}</span>
            <button style={{
              background: 'transparent', border: 'none', color: t.fg, fontSize: 12, fontWeight: 500,
              cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 3, fontFamily: G.font, padding: 0,
            }}>
              {expired ? 'Send new code' : 'Resend in 0:42'}
            </button>
          </div>

          <Button variant="primary" size="lg" full style={{ marginTop: 28, opacity: filled === 6 ? 1 : 0.4 }}
            icon={<Icon name="arrowRight" size={16} color={t.bg} />}>
            <span style={{ flex: 1, textAlign: 'center' }}>{filled === 6 ? 'Verify' : 'Verify'}</span>
          </Button>
        </div>
      </AuthLayout>
    </AuthSurface>
  );
}

// ─────────────────────────────────────────────────────────────
// 4. Sending code (loading)
// ─────────────────────────────────────────────────────────────
function AuthSending({ dark }) {
  const t = dark ? G.d : G.l;
  return (
    <AuthSurface dark={dark}>
      <AuthLayout dark={dark}>
        <div>
          <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: -0.6, marginBottom: 8 }}>Sending code…</div>
          <div style={{ fontSize: 14, color: t.fg2, marginBottom: 32 }}>Hold tight while we deliver to your inbox.</div>

          <div style={{
            height: 4, borderRadius: 2,
            background: t.surface2, overflow: 'hidden', marginBottom: 24,
            position: 'relative',
          }}>
            <div style={{
              position: 'absolute', inset: 0,
              background: `linear-gradient(90deg, transparent, ${t.fg}, transparent)`,
              backgroundSize: '40% 100%',
              animation: 'gh-shimmer 1.4s linear infinite',
            }} />
          </div>

          <div style={{
            padding: 14, background: t.surface, border: `1px solid ${t.border}`, borderRadius: 10,
            display: 'flex', gap: 10, alignItems: 'center',
          }}>
            <Icon name="mail" size={18} color={t.fg2} />
            <div style={{ flex: 1, fontSize: 13, color: t.fg2 }}>liu@example.com</div>
            <div style={{ width: 6, height: 6, borderRadius: 3, background: t.fg, animation: 'gh-pulse 1s infinite' }} />
          </div>
        </div>
      </AuthLayout>
    </AuthSurface>
  );
}

// ─────────────────────────────────────────────────────────────
// 5. Success (briefly shown before transition)
// ─────────────────────────────────────────────────────────────
function AuthSuccess({ dark }) {
  const t = dark ? G.d : G.l;
  return (
    <AuthSurface dark={dark}>
      <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 24 }}>
        <div style={{
          width: 72, height: 72, borderRadius: 36,
          background: t.fg, color: t.bg,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="check" size={36} color={t.bg} />
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: -0.5 }}>Signed in</div>
          <div style={{ fontSize: 14, color: t.fg2, marginTop: 6 }}>Setting up your space…</div>
        </div>
      </div>
    </AuthSurface>
  );
}

Object.assign(window, {
  AuthSignIn, AuthGoogleAuthorizing, AuthEmailCode, AuthSending, AuthSuccess,
  AUTH_W, AUTH_H,
});