// AuthScreen — full-viewport auth gate before main app loads

const AuthScreen = ({ onAuth }) => {
  const urlPlan = new URLSearchParams(window.location.search).get('plan');
  const initialTab = urlPlan ? 'create' : 'signin';
  const initialPlan = urlPlan || 'growth';

  const [tab, setTab] = React.useState(initialTab);
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [name, setName] = React.useState('');
  const [plan, setPlan] = React.useState(initialPlan);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  const [showPassword, setShowPassword] = React.useState(false);
  const [confirmPassword, setConfirmPassword] = React.useState('');
  const [showConfirmPassword, setShowConfirmPassword] = React.useState(false);
  const [step, setStep] = React.useState('form'); // 'form' | 'success'

  // ── Style tokens ─────────────────────────────────────────────────────────────

  const S = {
    overlay: {
      position: 'fixed', inset: 0,
      background: '#07090F',
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'flex-start',
      fontFamily: "'Inter', 'SF Pro Display', system-ui, sans-serif",
      zIndex: 9999, padding: '20px 16px',
      minHeight: '100vh',
      overflowY: 'auto',
    },
    card: {
      width: '100%', maxWidth: 460,
      background: '#0B0F1A',
      border: '1px solid #232A3B',
      borderRadius: 16,
      overflow: 'hidden',
      boxShadow: '0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(139,92,246,0.06)',
    },
    brandRow: {
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
      padding: '28px 0 22px',
    },
    logoMark: {
      width: 36, height: 36, borderRadius: 10,
      background: 'linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: '0 0 0 1px rgba(139,92,246,0.4), 0 4px 16px rgba(139,92,246,0.3)',
    },
    wordmark: {
      fontSize: 20, fontWeight: 700, letterSpacing: '-0.02em',
      color: '#F4F6FB',
    },
    tabStrip: {
      display: 'flex',
      borderBottom: '1px solid #232A3B',
      margin: '0 24px',
    },
    body: {
      padding: '24px 24px 20px',
    },
    label: {
      display: 'block', fontSize: 11, fontWeight: 600, color: '#A8B0C2',
      textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6,
    },
    inputWrap: {
      marginBottom: 14,
    },
    input: {
      width: '100%', boxSizing: 'border-box',
      padding: '10px 12px', fontSize: 13,
      background: '#111827', border: '1px solid #232A3B', borderRadius: 8,
      color: '#F4F6FB', outline: 'none',
      fontFamily: 'inherit',
    },
    inputPw: {
      width: '100%', boxSizing: 'border-box',
      padding: '10px 38px 10px 12px', fontSize: 13,
      background: '#111827', border: '1px solid #232A3B', borderRadius: 8,
      color: '#F4F6FB', outline: 'none',
      fontFamily: 'inherit',
    },
    pwWrap: {
      position: 'relative',
    },
    eyeBtn: {
      position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)',
      background: 'none', border: 'none', cursor: 'pointer',
      color: '#6B7489', padding: 2, display: 'flex', alignItems: 'center',
    },
    btnBase: {
      width: '100%', padding: '11px 0', fontSize: 13, fontWeight: 600,
      borderRadius: 8, cursor: 'pointer',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      fontFamily: 'inherit',
    },
    btnPrimary: {
      background: 'linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%)',
      color: '#fff', border: 'none',
      boxShadow: '0 4px 16px rgba(139,92,246,0.35)',
    },
    btnDemo: {
      background: '#111827', color: '#A8B0C2',
      border: '1px solid #232A3B',
    },
    orRow: {
      display: 'flex', alignItems: 'center', gap: 10,
      margin: '14px 0',
      fontSize: 11, color: '#6B7489',
    },
    orLine: { flex: 1, height: 1, background: '#232A3B' },
    errorBox: {
      padding: '9px 12px', borderRadius: 8,
      background: 'rgba(244,63,94,0.1)', border: '1px solid rgba(244,63,94,0.3)',
      color: '#F43F5E', fontSize: 12, marginBottom: 14, lineHeight: 1.5,
    },
    switchRow: {
      textAlign: 'center', fontSize: 12, color: '#6B7489', marginTop: 14,
    },
    switchLink: {
      color: '#8B5CF6', cursor: 'pointer',
      textDecoration: 'underline', textDecorationColor: 'rgba(139,92,246,0.4)',
    },
    demoNote: {
      textAlign: 'center', fontSize: 11, color: '#6B7489',
      marginTop: 10, lineHeight: 1.5,
    },
    planGrid: {
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8,
      marginBottom: 14,
    },
    planCard: (sel, feat) => ({
      padding: '10px 8px', borderRadius: 10, cursor: 'pointer',
      border: sel
        ? '2px solid #8B5CF6'
        : feat ? '1.5px solid rgba(139,92,246,0.35)' : '1.5px solid #232A3B',
      background: sel
        ? 'rgba(139,92,246,0.12)'
        : feat ? 'rgba(139,92,246,0.06)' : '#111827',
      textAlign: 'center', position: 'relative',
      transition: 'border-color .15s, background .15s',
    }),
    planName: {
      fontSize: 11, fontWeight: 700, color: '#F4F6FB',
      letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 3,
    },
    popularBadge: {
      position: 'absolute', top: -9, left: '50%', transform: 'translateX(-50%)',
      background: '#8B5CF6', color: '#fff',
      fontSize: 9, fontWeight: 700, letterSpacing: '0.06em',
      padding: '2px 8px', borderRadius: 20, textTransform: 'uppercase',
      whiteSpace: 'nowrap',
    },
    spinner: {
      width: 15, height: 15,
      border: '2px solid rgba(255,255,255,0.2)',
      borderTopColor: '#fff',
      borderRadius: '50%',
      animation: 'ar-auth-spin 0.7s linear infinite',
      flexShrink: 0,
    },
    successWrap: {
      textAlign: 'center', padding: '10px 0 6px',
    },
    successIcon: {
      width: 52, height: 52, borderRadius: '50%',
      background: 'rgba(16,185,129,0.15)', border: '1.5px solid rgba(16,185,129,0.4)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      margin: '0 auto 16px',
    },
    successTitle: {
      fontSize: 18, fontWeight: 700, color: '#F4F6FB', marginBottom: 6,
    },
    successSub: {
      fontSize: 13, color: '#A8B0C2', marginBottom: 20, lineHeight: 1.55,
    },
    cardFooter: {
      textAlign: 'center', padding: '10px 0 14px',
      fontSize: 10, color: '#3A4155',
    },
  };

  // Inject keyframe animation once
  React.useEffect(() => {
    if (document.getElementById('ar-auth-kf')) return;
    const el = document.createElement('style');
    el.id = 'ar-auth-kf';
    el.textContent = '@keyframes ar-auth-spin { to { transform: rotate(360deg); } }';
    document.head.appendChild(el);
  }, []);

  const switchTab = (t) => {
    setTab(t);
    setError('');
    setStep('form');
    setConfirmPassword('');
  };

  // ── Sign In handler ───────────────────────────────────────────────────────────
  const handleSignIn = async () => {
    setError('');
    if (!email.trim()) { setError('Please enter your email address.'); return; }
    if (!password) { setError('Please enter your password.'); return; }
    setLoading(true);
    try {
      const res = await arFetch('/v1/auth/login', {
        method: 'POST',
        body: JSON.stringify({ email: email.trim(), password }),
      });
      const token = res && (res.token || res.access_token);
      if (token) localStorage.setItem('ar_token', token);
      onAuth({ email: email.trim() });
    } catch (err) {
      // 404/502 in demo env — treat as credential error
      setError('Invalid credentials or server offline.');
    } finally {
      setLoading(false);
    }
  };

  // ── Create Account handler ────────────────────────────────────────────────────
  const handleCreate = async () => {
    setError('');
    if (!name.trim()) { setError('Please enter your full name.'); return; }
    if (!email.trim()) { setError('Please enter your email address.'); return; }
    if (password.length < 8) { setError('Password must be at least 8 characters.'); return; }
    if (confirmPassword !== password) { setError('Passwords do not match.'); return; }
    setLoading(true);
    try {
      await arFetch('/v1/auth/register', {
        method: 'POST',
        body: JSON.stringify({ name: name.trim(), email: email.trim(), password, plan }),
      });
    } catch (_) {
      // Demo env: endpoint not yet implemented → succeed silently (no Stripe at this step)
    } finally {
      setLoading(false);
    }
    setStep('success');
    setTimeout(() => onAuth({ email: email.trim(), plan }), 2400);
  };

  // ── Shared sub-components ─────────────────────────────────────────────────────

  const Spinner = () => <div style={S.spinner} />;

  const EyeIcon = ({ open }) => (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {open
        ? React.createElement(React.Fragment, null,
            React.createElement('path', { d: 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z' }),
            React.createElement('circle', { cx: '12', cy: '12', r: '3' })
          )
        : React.createElement(React.Fragment, null,
            React.createElement('path', { d: 'M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94' }),
            React.createElement('path', { d: 'M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19' }),
            React.createElement('line', { x1: '1', y1: '1', x2: '23', y2: '23' })
          )
      }
    </svg>
  );

  const OrDivider = () => (
    <div style={S.orRow}>
      <div style={S.orLine} />
      <span>or</span>
      <div style={S.orLine} />
    </div>
  );

  const DemoButton = () => (
    <button
      style={{ ...S.btnBase, ...S.btnDemo }}
      onClick={() => onAuth('demo')}
      disabled={loading}
    >
      Continue as Demo
    </button>
  );

  const PLANS = [
    { key: 'starter',    label: 'Starter',    price: '$0',            featured: false },
    { key: 'teams',      label: 'Teams',      price: '$600/mo',       featured: false },
    { key: 'growth',     label: 'Growth',     price: '$1,200/mo',     featured: true  },
    { key: 'enterprise', label: 'Enterprise', price: 'Contact sales',  featured: false },
  ];

  const PlanSelector = () => (
    <div>
      <label style={S.label}>Plan</label>
      <div style={S.planGrid}>
        {PLANS.map(p => (
          <div
            key={p.key}
            style={S.planCard(plan === p.key, p.featured)}
            onClick={() => setPlan(p.key)}
          >
            {p.featured && <div style={S.popularBadge}>Popular</div>}
            <div style={S.planName}>{p.label}</div>
            <div style={{
              fontSize: 12, fontWeight: 600,
              color: plan === p.key ? '#c4b5fd' : '#A8B0C2',
              marginTop: 2,
            }}>
              {p.price}
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  const TabButton = ({ id, label }) => (
    <button
      onClick={() => switchTab(id)}
      style={{
        flex: 1, padding: '10px 0', fontSize: 13, fontWeight: 500,
        color: tab === id ? '#F4F6FB' : '#6B7489',
        borderBottom: tab === id ? '2px solid #8B5CF6' : '2px solid transparent',
        marginBottom: -1, background: 'transparent', border: 'none',
        borderBottom: tab === id ? '2px solid #8B5CF6' : '2px solid transparent',
        cursor: 'pointer',
      }}
    >
      {label}
    </button>
  );

  // ── Social buttons (shared) ───────────────────────────────────────────────────

  const socialProviders = [
    { key: 'google', label: 'Google',     bg: '#fff',     fg: '#1a1a1a', icon: '🔵' },
    { key: 'github', label: 'GitHub',     bg: '#24292e',  fg: '#fff',    icon: '⚫' },
    { key: 'x',      label: 'X / Twitter', bg: '#000',   fg: '#fff',    icon: '✖' },
  ];

  const SocialButtons = () => (
    <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
      {socialProviders.map(p => (
        <button key={p.key}
          style={{
            flex: 1, padding: '9px 0', fontSize: 12, fontWeight: 500,
            background: p.bg, color: p.fg, border: '1px solid #232A3B', borderRadius: 8,
            cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            fontFamily: 'inherit',
          }}
          onClick={() => {
            window.alert(`${p.label} OAuth: redirect to /v1/auth/oauth/${p.key} (requires OAuth app credentials in Settings → Developer)`);
          }}
        >
          {p.icon} {p.label}
        </button>
      ))}
    </div>
  );

  // ── Render ────────────────────────────────────────────────────────────────────
  return (
    <div style={S.overlay}>
      {/* Ambient background glow */}
      <div style={{
        position: 'fixed', top: '30%', left: '50%', transform: 'translateX(-50%)',
        width: 500, height: 500, pointerEvents: 'none', zIndex: -1,
        background: 'radial-gradient(ellipse at center, rgba(139,92,246,0.09) 0%, transparent 68%)',
      }} />

      <div style={S.card}>
        {/* Brand row */}
        <div style={S.brandRow}>
          <div style={S.logoMark}>
            <svg width="19" height="19" viewBox="0 0 24 24" fill="none">
              <path d="M12 2L3 7l9 5 9-5-9-5z" fill="rgba(255,255,255,0.92)" />
              <path d="M3 12l9 5 9-5" stroke="rgba(255,255,255,0.55)"
                strokeWidth="1.5" fill="none" strokeLinecap="round" />
              <path d="M3 17l9 5 9-5" stroke="rgba(255,255,255,0.28)"
                strokeWidth="1.5" fill="none" strokeLinecap="round" />
            </svg>
          </div>
          <span style={S.wordmark}>AstraReach</span>
        </div>

        {/* Tab strip */}
        <div style={S.tabStrip}>
          <TabButton id="signin" label="Sign in" />
          <TabButton id="create" label="Create account" />
        </div>

        {/* Tab body — inlined to avoid remount-on-state-change focus bug */}
        <div style={S.body}>
          {tab === 'signin' ? (
            <div>
              {error && <div style={S.errorBox}>{error}</div>}

              <div style={S.inputWrap}>
                <label style={S.label}>Email</label>
                <input
                  type="email"
                  placeholder="you@company.com"
                  value={email}
                  onChange={e => { setEmail(e.target.value); setError(''); }}
                  onKeyDown={e => e.key === 'Enter' && handleSignIn()}
                  style={S.input}
                  autoComplete="email"
                  autoFocus
                />
              </div>

              <div style={S.inputWrap}>
                <label style={S.label}>Password</label>
                <div style={S.pwWrap}>
                  <input
                    type={showPassword ? 'text' : 'password'}
                    placeholder="••••••••"
                    value={password}
                    onChange={e => { setPassword(e.target.value); setError(''); }}
                    onKeyDown={e => e.key === 'Enter' && handleSignIn()}
                    style={S.inputPw}
                    autoComplete="current-password"
                  />
                  <button style={S.eyeBtn} onClick={() => setShowPassword(v => !v)} type="button" tabIndex={-1}>
                    <EyeIcon open={showPassword} />
                  </button>
                </div>
              </div>

              <button
                style={{
                  ...S.btnBase, ...S.btnPrimary,
                  marginTop: 4,
                  opacity: loading ? 0.72 : 1,
                  cursor: loading ? 'not-allowed' : 'pointer',
                }}
                onClick={handleSignIn}
                disabled={loading}
              >
                {loading && <Spinner />}
                {loading ? 'Signing in…' : 'Sign in with Supabase'}
              </button>

              <OrDivider />
              <SocialButtons />
              <DemoButton />

              <div style={S.demoNote}>
                Demo mode gives you full read access to all features with sample data.
              </div>

              <div style={S.switchRow}>
                Don't have an account?{' '}
                <span style={S.switchLink} onClick={() => switchTab('create')}>
                  Create one →
                </span>
              </div>
            </div>
          ) : (
            <div>
              {step === 'success' ? (
                <div style={S.successWrap}>
                  <div style={S.successIcon}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
                      stroke="#10B981" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="20 6 9 17 4 12" />
                    </svg>
                  </div>
                  <div style={S.successTitle}>Account created!</div>
                  <div style={S.successSub}>
                    Welcome to AstraReach. Setting up your workspace on the{' '}
                    <span style={{ color: '#c4b5fd', fontWeight: 600 }}>
                      {(PLANS.find(p => p.key === plan) || {}).label || plan}
                    </span>{' '}
                    plan — launching now…
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'center' }}>
                    <div style={{
                      width: 18, height: 18,
                      border: '2px solid rgba(16,185,129,0.25)',
                      borderTopColor: '#10B981',
                      borderRadius: '50%',
                      animation: 'ar-auth-spin 0.7s linear infinite',
                    }} />
                  </div>
                </div>
              ) : (
                <div>
                  {error && <div style={S.errorBox}>{error}</div>}

                  <div style={S.inputWrap}>
                    <label style={S.label}>Full Name</label>
                    <input
                      type="text"
                      placeholder="Alex Johnson"
                      value={name}
                      onChange={e => { setName(e.target.value); setError(''); }}
                      style={S.input}
                      autoComplete="name"
                    />
                  </div>

                  <div style={S.inputWrap}>
                    <label style={S.label}>Email</label>
                    <input
                      type="email"
                      placeholder="you@company.com"
                      value={email}
                      onChange={e => { setEmail(e.target.value); setError(''); }}
                      style={S.input}
                      autoComplete="email"
                    />
                  </div>

                  <div style={S.inputWrap}>
                    <label style={S.label}>Password</label>
                    <div style={S.pwWrap}>
                      <input
                        type={showPassword ? 'text' : 'password'}
                        placeholder="Min 8 characters"
                        value={password}
                        onChange={e => { setPassword(e.target.value); setError(''); }}
                        style={S.inputPw}
                        autoComplete="new-password"
                      />
                      <button style={S.eyeBtn} onClick={() => setShowPassword(v => !v)} type="button" tabIndex={-1}>
                        <EyeIcon open={showPassword} />
                      </button>
                    </div>
                    {password.length > 0 && password.length < 8 && (
                      <div style={{ fontSize: 11, color: '#F59E0B', marginTop: 5 }}>
                        {8 - password.length} more character{8 - password.length !== 1 ? 's' : ''} required
                      </div>
                    )}
                    {password.length >= 8 && (
                      <div style={{ fontSize: 11, color: '#10B981', marginTop: 5 }}>
                        Password strength looks good
                      </div>
                    )}
                  </div>

                  <div style={{ ...S.inputWrap, marginBottom: 18 }}>
                    <label style={S.label}>Confirm Password</label>
                    <div style={S.pwWrap}>
                      <input
                        type={showConfirmPassword ? 'text' : 'password'}
                        placeholder="Re-enter your password"
                        value={confirmPassword}
                        onChange={e => { setConfirmPassword(e.target.value); setError(''); }}
                        onKeyDown={e => e.key === 'Enter' && handleCreate()}
                        style={S.inputPw}
                        autoComplete="new-password"
                      />
                      <button style={S.eyeBtn} onClick={() => setShowConfirmPassword(v => !v)} type="button" tabIndex={-1}>
                        <EyeIcon open={showConfirmPassword} />
                      </button>
                    </div>
                    {confirmPassword.length > 0 && confirmPassword !== password && (
                      <div style={{ fontSize: 11, color: '#F43F5E', marginTop: 5 }}>
                        Passwords do not match
                      </div>
                    )}
                    {confirmPassword.length > 0 && confirmPassword === password && password.length >= 8 && (
                      <div style={{ fontSize: 11, color: '#10B981', marginTop: 5 }}>
                        Passwords match ✓
                      </div>
                    )}
                  </div>

                  <PlanSelector />

                  <button
                    style={{
                      ...S.btnBase, ...S.btnPrimary,
                      opacity: loading ? 0.72 : 1,
                      cursor: loading ? 'not-allowed' : 'pointer',
                    }}
                    onClick={handleCreate}
                    disabled={loading}
                  >
                    {loading && <Spinner />}
                    {loading ? 'Creating account…' : 'Create account + start trial'}
                  </button>

                  <OrDivider />
                  <SocialButtons />
                  <DemoButton />

                  <div style={S.switchRow}>
                    Already have an account?{' '}
                    <span style={S.switchLink} onClick={() => switchTab('signin')}>
                      Sign in →
                    </span>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>

        {/* Card footer */}
        <div style={S.cardFooter}>
          By continuing you agree to our Terms of Service and Privacy Policy.
        </div>
      </div>
    </div>
  );
};

window.AuthScreen = AuthScreen;