/* Auth — Login, Signup */

const GoogleIcon = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 48 48" aria-hidden="true">
    <path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3c-1.6 4.7-6.1 8-11.3 8a12 12 0 1 1 0-24c3 0 5.7 1.1 7.8 3l5.7-5.7C33.6 6.1 29 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z" />
    <path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.6 16 18.9 13 24 13c3 0 5.7 1.1 7.8 3l5.7-5.7C33.6 6.1 29 4 24 4 16.3 4 9.7 8.4 6.3 14.7z" />
    <path fill="#4CAF50" d="M24 44c5 0 9.5-1.9 12.9-5l-6-5c-2 1.4-4.4 2.2-6.9 2.2-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z" />
    <path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3a12 12 0 0 1-4.1 5.6l6 5C40.6 35.4 44 30.2 44 24c0-1.3-.1-2.4-.4-3.5z" />
  </svg>
);

function AuthShell({ children }) {
  return (
    <div className="fullscreen" style={{ display: 'flex', flexDirection: 'row' }}>
      <div style={{
        flex: '0 0 44%',
        background: 'var(--bg-surface)',
        borderRight: '1px solid var(--border-default)',
        padding: '40px 56px',
        display: 'flex',
        flexDirection: 'column',
        position: 'relative',
        overflow: 'hidden',
      }}>
        <Logo size={22} />

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', maxWidth: 420, position: 'relative', zIndex: 2 }}>
          {children}
        </div>

        <div style={{ fontSize: 12, color: 'var(--text-tertiary)', position: 'relative', zIndex: 2 }}>
          © 2026 Vamana AI · <span style={{ marginLeft: 4 }}>v0.4.2</span>
        </div>

        {/* Subtle mark */}
        <svg
          aria-hidden="true"
          width="540" height="540" viewBox="0 0 540 540"
          style={{ position: 'absolute', right: -180, bottom: -160, opacity: 0.04, pointerEvents: 'none' }}
        >
          <path d="M40 40 L270 460 L500 40" stroke="var(--accent)" strokeWidth="40" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </svg>
      </div>

      <div style={{
        flex: 1,
        background: 'var(--bg-page)',
        position: 'relative',
        overflow: 'hidden',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 48,
      }}>
        <AuthRightPanel />
      </div>
    </div>
  );
}

function AuthRightPanel() {
  return (
    <div style={{ maxWidth: 480, width: '100%' }}>
      <div className="eyebrow" style={{ marginBottom: 16 }}>// AI-Native Video Infrastructure</div>
      <h2 style={{
        fontSize: 38, fontWeight: 600, letterSpacing: '-0.025em', lineHeight: 1.1,
        margin: '0 0 20px', color: 'var(--text-primary)',
      }}>
        Index, search, and compress<br />
        <span style={{ color: 'var(--accent)' }}>petabytes of video.</span>
      </h2>
      <p style={{ fontSize: 15, color: 'var(--text-secondary)', lineHeight: 1.6, marginBottom: 32, maxWidth: 420 }}>
        Build natural-language search over your video library, encode in our DCVC-RT format,
        and run captioning, segmentation, and embedding pipelines from a single API.
      </p>

      <div style={{
        background: 'var(--bg-surface)',
        border: '1px solid var(--border-default)',
        borderRadius: 'var(--radius-lg)',
        padding: 20,
        boxShadow: 'var(--shadow-md)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
          <Icon.Search size={14} color="var(--accent)" />
          <span className="mono" style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '0.05em' }}>
            INDEX · surveillance-jan-2026
          </span>
        </div>
        <div style={{
          padding: '10px 12px',
          background: 'var(--bg-inset)',
          borderRadius: 6,
          fontSize: 13,
          color: 'var(--text-primary)',
          marginBottom: 14,
          fontFamily: 'var(--font-mono)',
        }}>
          person climbing fence at night
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { ts: '02:14:33', cam: 'cam-04 / east-perimeter', score: 0.94 },
            { ts: '01:47:08', cam: 'cam-12 / north-gate', score: 0.81 },
            { ts: '03:22:55', cam: 'cam-04 / east-perimeter', score: 0.76 },
          ].map((r, i) => (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: '60px 1fr auto auto',
              gap: 10, alignItems: 'center',
              padding: '8px 10px',
              borderRadius: 4,
              background: i === 0 ? 'var(--accent-subtle)' : 'transparent',
              border: i === 0 ? '1px solid rgba(209,79,27,0.2)' : '1px solid transparent',
            }}>
              <div style={{
                width: 56, height: 32, background: 'linear-gradient(135deg, #2a2a28, #555)',
                borderRadius: 3, position: 'relative', overflow: 'hidden',
              }}>
                <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 60% 50%, rgba(255,255,255,0.15), transparent 60%)' }} />
              </div>
              <div style={{ minWidth: 0 }}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--text-primary)' }}>{r.ts}</div>
                <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>{r.cam}</div>
              </div>
              <div className="mono" style={{ fontSize: 11, color: i === 0 ? 'var(--accent-text)' : 'var(--text-tertiary)' }}>
                {r.score.toFixed(2)}
              </div>
              <Icon.Play size={11} color="var(--text-tertiary)" />
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 32 }}>
        {[
          { v: '40×', l: 'lossless compression' },
          { v: '120ms', l: 'avg query latency' },
          { v: '8M+', l: 'hours indexed' },
        ].map((s, i) => (
          <div key={i}>
            <div style={{ fontSize: 22, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.02em' }}>{s.v}</div>
            <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Login({ onAuth, onSwitch }) {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [showPw, setShowPw] = React.useState(false);
  const [loading, setLoading] = React.useState(false);

  const submit = (e) => {
    e?.preventDefault();
    setLoading(true);
    setTimeout(() => onAuth({ email: email || 'arjun@vamana.ai', name: 'Arjun Kapoor', isReturning: true }), 700);
  };

  return (
    <AuthShell>
      <div className="fade-in-up">
        <div className="eyebrow" style={{ marginBottom: 12 }}>Sign in</div>
        <h1 style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em', margin: '0 0 8px' }}>
          Welcome back.
        </h1>
        <p style={{ fontSize: 14, color: 'var(--text-secondary)', margin: '0 0 32px' }}>
          Sign in to your Vamana workspace.
        </p>

        <button
          onClick={() => onAuth({ email: 'you@google.com', name: 'You', isReturning: true })}
          className="btn btn-secondary btn-lg"
          style={{ width: '100%', marginBottom: 12 }}>
          <GoogleIcon size={16} />
          Continue with Google
        </button>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          margin: '20px 0', fontSize: 11, color: 'var(--text-tertiary)',
          fontFamily: 'var(--font-mono)', letterSpacing: '0.05em',
        }}>
          <div style={{ flex: 1, height: 1, background: 'var(--border-subtle)' }} />
          OR CONTINUE WITH EMAIL
          <div style={{ flex: 1, height: 1, background: 'var(--border-subtle)' }} />
        </div>

        <form onSubmit={submit}>
          <div style={{ marginBottom: 14 }}>
            <label className="label">Email</label>
            <input className="input" type="email" placeholder="you@company.com"
              value={email} onChange={(e) => setEmail(e.target.value)} autoFocus />
          </div>

          <div style={{ marginBottom: 18 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
              <label className="label" style={{ marginBottom: 0 }}>Password</label>
              <a style={{ fontSize: 12, color: 'var(--accent)', cursor: 'pointer' }}>Forgot?</a>
            </div>
            <div style={{ position: 'relative' }}>
              <input className="input" type={showPw ? 'text' : 'password'} placeholder="••••••••"
                value={password} onChange={(e) => setPassword(e.target.value)}
                style={{ paddingRight: 38 }} />
              <button type="button" onClick={() => setShowPw(!showPw)}
                style={{
                  position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)',
                  padding: 6, color: 'var(--text-tertiary)', display: 'flex',
                }}>
                {showPw ? <Icon.EyeOff size={15} /> : <Icon.Eye size={15} />}
              </button>
            </div>
          </div>

          <button type="submit" className="btn btn-primary btn-lg" style={{ width: '100%' }} disabled={loading}>
            {loading ? <span className="spinner" style={{ borderTopColor: 'white' }} /> : <>Sign in <Icon.ArrowRight size={14} /></>}
          </button>
        </form>

        <p style={{ marginTop: 24, fontSize: 13, color: 'var(--text-secondary)', textAlign: 'center' }}>
          Don't have an account?{' '}
          <a onClick={onSwitch} style={{ color: 'var(--accent)', cursor: 'pointer', fontWeight: 500 }}>Create one</a>
        </p>
      </div>
    </AuthShell>
  );
}

function Signup({ onAuth, onSwitch }) {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [name, setName] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const submit = (e) => {
    e?.preventDefault();
    setLoading(true);
    setTimeout(() => onAuth({ email: email || 'new@vamana.ai', name: name || 'New User', isReturning: false }), 700);
  };

  return (
    <AuthShell>
      <div className="fade-in-up">
        <div className="eyebrow" style={{ marginBottom: 12 }}>Create account</div>
        <h1 style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em', margin: '0 0 8px' }}>
          Start building.
        </h1>
        <p style={{ fontSize: 14, color: 'var(--text-secondary)', margin: '0 0 32px' }}>
          Get 200 free credits to try Index, Dwarf, and our Tools.
        </p>

        <button
          onClick={() => onAuth({ email: 'new@google.com', name: 'New User', isReturning: false })}
          className="btn btn-secondary btn-lg"
          style={{ width: '100%', marginBottom: 12 }}>
          <GoogleIcon size={16} />
          Sign up with Google
        </button>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          margin: '20px 0', fontSize: 11, color: 'var(--text-tertiary)',
          fontFamily: 'var(--font-mono)', letterSpacing: '0.05em',
        }}>
          <div style={{ flex: 1, height: 1, background: 'var(--border-subtle)' }} />
          OR USE YOUR EMAIL
          <div style={{ flex: 1, height: 1, background: 'var(--border-subtle)' }} />
        </div>

        <form onSubmit={submit}>
          <div style={{ marginBottom: 14 }}>
            <label className="label">Full name</label>
            <input className="input" placeholder="Arjun Kapoor"
              value={name} onChange={(e) => setName(e.target.value)} autoFocus />
          </div>
          <div style={{ marginBottom: 14 }}>
            <label className="label">Work email</label>
            <input className="input" type="email" placeholder="you@company.com"
              value={email} onChange={(e) => setEmail(e.target.value)} />
          </div>
          <div style={{ marginBottom: 18 }}>
            <label className="label">Password</label>
            <input className="input" type="password" placeholder="At least 8 characters"
              value={password} onChange={(e) => setPassword(e.target.value)} />
            <div style={{ marginTop: 6, fontSize: 11, color: 'var(--text-tertiary)' }}>
              By signing up, you agree to our <a style={{ color: 'var(--accent)' }}>Terms</a> and <a style={{ color: 'var(--accent)' }}>Privacy Policy</a>.
            </div>
          </div>

          <button type="submit" className="btn btn-primary btn-lg" style={{ width: '100%' }} disabled={loading}>
            {loading ? <span className="spinner" style={{ borderTopColor: 'white' }} /> : <>Create account <Icon.ArrowRight size={14} /></>}
          </button>
        </form>

        <p style={{ marginTop: 24, fontSize: 13, color: 'var(--text-secondary)', textAlign: 'center' }}>
          Already have an account?{' '}
          <a onClick={onSwitch} style={{ color: 'var(--accent)', cursor: 'pointer', fontWeight: 500 }}>Sign in</a>
        </p>
      </div>
    </AuthShell>
  );
}

Object.assign(window, { Login, Signup });