// RMTCTRL — Home screens: Splash, Onboarding (3 steps), Dashboard (3 states)

function SplashScreen({ onDone }) {
  React.useEffect(() => {
    const t = setTimeout(onDone, 2000);
    return () => clearTimeout(t);
  }, []);
  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center', gap: 0,
      background: TOKENS.color.bg,
    }}>
      <div style={{ position: 'relative' }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 28, fontWeight: 600, color: TOKENS.color.textPrimary,
          letterSpacing: '0.12em',
        }}>RMTCTRL</div>
        <div style={{
          height: 2, background: TOKENS.color.accent, borderRadius: 2,
          marginTop: 6,
          animation: 'underline-pulse 1.5s ease-in-out infinite',
        }} />
      </div>
    </div>
  );
}

// ── Onboarding Step 1: Auth ─────────────────────────────────────────────────
function OnboardingAuth({ onNext }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '60px 20px 40px' }}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 8, marginBottom: 48 }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11, fontWeight: 600, color: TOKENS.color.accent,
          letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8,
        }}>RMTCTRL</div>
        <h1 style={{
          fontFamily: "'Inter', sans-serif", fontSize: 28, fontWeight: 700,
          color: TOKENS.color.textPrimary, lineHeight: 1.2, margin: 0,
        }}>Work anywhere.<br />Don't miss anything.</h1>
        <p style={{
          fontFamily: "'Inter', sans-serif", fontSize: 15, color: TOKENS.color.textSecondary,
          lineHeight: 1.5, margin: 0, marginTop: 8,
        }}>The productivity companion for digital nomads and international students.</p>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <button onClick={onNext} style={{
          height: 56, borderRadius: 12, border: 'none', cursor: 'pointer',
          background: TOKENS.color.textPrimary, color: TOKENS.color.bg,
          fontFamily: "'Inter', sans-serif", fontSize: 16, fontWeight: 600,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm0 14c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08C16.71 18.72 14.5 20 12 20z" fill="#0A0A0B"/></svg>
          Continue with Apple
        </button>
        <button onClick={onNext} style={{
          height: 56, borderRadius: 12, border: '1.5px solid #26262E', cursor: 'pointer',
          background: TOKENS.color.surface, color: TOKENS.color.textPrimary,
          fontFamily: "'Inter', sans-serif", fontSize: 16, fontWeight: 600,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
          Continue with Google
        </button>
        <button onClick={onNext} style={{
          height: 56, borderRadius: 12, border: '1.5px solid #F5F5F7', cursor: 'pointer',
          background: 'transparent', color: TOKENS.color.textPrimary,
          fontFamily: "'Inter', sans-serif", fontSize: 16, fontWeight: 600,
        }}>
          Continue with Email
        </button>
        <p style={{
          fontFamily: "'Inter', sans-serif", fontSize: 11, color: TOKENS.color.textTertiary,
          textAlign: 'center', margin: '8px 0 0',
        }}>By continuing you agree to Terms · Privacy</p>
      </div>
    </div>
  );
}

// ── Onboarding Step 2: Work Preferences ────────────────────────────────────
function OnboardingPrefs({ onNext }) {
  const [selected, setSelected] = React.useState({});
  const toggle = (group, val) => {
    setSelected(prev => {
      const cur = prev[group] || [];
      return { ...prev, [group]: cur.includes(val) ? cur.filter(v => v !== val) : [...cur, val] };
    });
  };
  const isOn = (group, val) => (selected[group] || []).includes(val);

  const sections = [
    { label: 'Noise level', opts: ['Silent zone', 'Soft hum', 'Cafe buzz', "Doesn't matter"] },
    { label: 'Wi-Fi need', opts: ['Speed-critical', 'Standard', 'Backup hotspot OK'] },
    { label: 'Vibe', opts: ['Cowork', 'Cafe', 'Library', 'Outdoor'] },
    { label: 'Power', opts: ['Outlets every seat', 'Outlets somewhere', 'Not needed'] },
    { label: 'Time of day', opts: ['Early bird', 'Standard', 'Night owl'] },
    { label: 'Social', opts: ['Solo focus', 'Some chat', 'Community'] },
    { label: 'Amenities', opts: ['Phone booths', 'Printer', 'Standing desks', 'Coffee included'] },
  ];

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '20px 20px 0' }}>
        <h1 style={{ fontFamily: "'Inter',sans-serif", fontSize: 28, fontWeight: 700, color: TOKENS.color.textPrimary, margin: '0 0 8px' }}>How do you work best?</h1>
        <p style={{ fontFamily: "'Inter',sans-serif", fontSize: 15, color: TOKENS.color.textSecondary, margin: '0 0 24px' }}>Pick anything that fits. Skip anything that doesn't.</p>
      </div>
      <div style={{ flex: 1, overflowY: 'auto', padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 24 }}>
        {sections.map(sec => (
          <div key={sec.label}>
            <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, fontWeight: 500, color: TOKENS.color.textSecondary, marginBottom: 10 }}>{sec.label}</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {sec.opts.map(opt => (
                <FilterChip key={opt} label={opt} selected={isOn(sec.label, opt)} onClick={() => toggle(sec.label, opt)} />
              ))}
            </div>
          </div>
        ))}
        <div style={{ height: 120 }} />
      </div>
      <div style={{ padding: '16px 20px 32px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <Btn variant="primary" size="lg" fullWidth onClick={onNext}>Continue</Btn>
        <Btn variant="ghost" size="md" fullWidth onClick={onNext}>Skip for now</Btn>
      </div>
    </div>
  );
}

// ── Onboarding Step 3: Home Base ────────────────────────────────────────────
function OnboardingHomeBase({ onNext }) {
  const [city, setCity] = React.useState('');
  const [loc, setLoc] = React.useState(false);
  const [notifs, setNotifs] = React.useState(false);

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '20px 20px 0' }}>
      <h1 style={{ fontFamily: "'Inter',sans-serif", fontSize: 28, fontWeight: 700, color: TOKENS.color.textPrimary, margin: '0 0 8px' }}>Where do you call home?</h1>
      <p style={{ fontFamily: "'Inter',sans-serif", fontSize: 15, color: TOKENS.color.textSecondary, margin: '0 0 32px' }}>We'll use this to personalise your experience.</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Input label="Home city" value={city} onChange={setCity} helper="e.g. Sydney, Australia" prefix={city ? '🇦🇺' : null} />
        <div style={{
          background: TOKENS.color.surface2, borderRadius: 12, border: '1.5px solid #26262E',
          padding: '0 16px', height: 52, display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <span style={{ fontSize: 18 }}>🇦🇺</span>
          <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 15, color: TOKENS.color.textPrimary }}>AUD</span>
          <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 15, color: TOKENS.color.textSecondary }}>A$</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 8 }}>
          {[
            { label: 'Allow location', sub: 'So we can show nearby workspaces', val: loc, set: setLoc },
            { label: 'Allow notifications', sub: 'For flight delays and work block reminders', val: notifs, set: setNotifs },
          ].map(row => (
            <Card key={row.label} style={{ padding: '16px 20px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 15, fontWeight: 600, color: TOKENS.color.textPrimary, marginBottom: 2 }}>{row.label}</div>
                  <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textSecondary }}>{row.sub}</div>
                </div>
                <Toggle on={row.val} onChange={row.set} />
              </div>
            </Card>
          ))}
        </div>
      </div>
      <div style={{ flex: 1 }} />
      <div style={{ padding: '16px 0 32px' }}>
        <Btn variant="primary" size="lg" fullWidth onClick={onNext}>Done</Btn>
      </div>
    </div>
  );
}

// ── Dashboard ───────────────────────────────────────────────────────────────
function Dashboard({ state = 'pre-flight', onNavigate }) {
  const headerConfigs = {
    'pre-flight': { pill: 'BOARDING IN 1H 23M', greeting: 'Good morning, Alex' },
    'mid-trip':   { pill: 'IN TRANSIT', greeting: 'Good afternoon, Alex' },
    'no-trip':    { pill: 'HOME · SYDNEY', greeting: 'Good evening, Alex' },
  };
  const cfg = headerConfigs[state];

  const nextAction = {
    'pre-flight': {
      label: 'Get to gate B12 in 1h 23m',
      sub: 'Terminal 1 · 4.2km from your hotel',
      cta1: 'Get directions', cta2: 'View flight',
    },
    'mid-trip': {
      label: 'Landed in Lisbon · DAY 3 OF 14',
      sub: 'Find a workspace near your Airbnb',
      cta1: 'Find workspaces', cta2: 'View trip',
    },
    'no-trip': {
      label: 'Plan your next move',
      sub: 'Add a trip or discover workspaces nearby',
      cta1: 'Add work block', cta2: 'Browse spaces',
    },
  }[state];

  const today = [
    { pill: 'BOARDING', time: '14:05 → 21:30', icon: PlaneIcon, title: 'SYD → LIS · QF1', loc: 'Sydney Intl · Gate B12' },
    { pill: 'WORK BLOCK', time: '09:00 → 13:00', icon: LaptopIcon, title: 'Deep work session', loc: 'Hub Lisbon · Chiado' },
    { pill: 'ARRIVED', time: '21:30', icon: BedIcon, title: 'Check-in · The Independente', loc: 'Lisbon, Portugal' },
  ];

  const workspaces = [
    { name: 'Hub Lisbon', walk: '230m · 3 min', wifi: '78 Mbps', noise: 'Quiet' },
    { name: 'Selina CoWork', walk: '640m · 9 min', wifi: '45 Mbps', noise: 'Moderate' },
    { name: 'Bibliotca', walk: '1.1km · 14 min', wifi: '22 Mbps', noise: 'Silent' },
  ];

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflowY: 'auto' }}>
      {/* Sticky header */}
      <div style={{
        position: 'sticky', top: 0, zIndex: 10,
        background: TOKENS.color.bg, padding: '16px 20px 12px',
        borderBottom: '1px solid #26262E',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
          <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 16, color: TOKENS.color.textPrimary }}>{cfg.greeting}</span>
          <Avatar size={32} initials="A" color="#00FF94" />
        </div>
        <StatusPill label={cfg.pill} large />
      </div>

      <div style={{ padding: '20px 20px 0', display: 'flex', flexDirection: 'column', gap: 24 }}>
        {/* Next Action card */}
        <Card style={{ padding: 24 }}>
          <MicroLabel>Next action</MicroLabel>
          <h2 style={{ fontFamily: "'Inter',sans-serif", fontSize: 24, fontWeight: 700, color: TOKENS.color.textPrimary, margin: '10px 0 6px', lineHeight: 1.2 }}>{nextAction.label}</h2>
          <p style={{ fontFamily: "'Inter',sans-serif", fontSize: 15, color: TOKENS.color.textSecondary, margin: '0 0 20px' }}>{nextAction.sub}</p>
          <div style={{ display: 'flex', gap: 10 }}>
            <Btn variant="primary" size="sm" onClick={() => onNavigate('workspaces')}>{nextAction.cta1}</Btn>
            <Btn variant="secondary" size="sm" onClick={() => onNavigate('trips')}>{nextAction.cta2}</Btn>
          </div>
        </Card>

        {/* TODAY */}
        <div>
          <MicroLabel color="#9999A1">Today</MicroLabel>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
            {today.map((seg, i) => {
              const Icon = seg.icon;
              return (
                <Card key={i} style={{ padding: '14px 16px' }}>
                  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                    <div style={{ width: 36, height: 36, borderRadius: 10, background: TOKENS.color.surface2, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <Icon size={18} color="#9999A1" />
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
                        <StatusPill label={seg.pill} />
                        <MonoText size={12} color="#9999A1">{seg.time}</MonoText>
                      </div>
                      <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 15, fontWeight: 600, color: TOKENS.color.textPrimary, marginBottom: 2 }}>{seg.title}</div>
                      <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textSecondary }}>{seg.loc}</div>
                    </div>
                  </div>
                </Card>
              );
            })}
          </div>
        </div>

        {/* WORKSPACES NEARBY */}
        <div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <MicroLabel color="#9999A1">Workspaces nearby</MicroLabel>
            <button onClick={() => onNavigate('workspaces')} style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.accent, fontWeight: 500 }}>See all</button>
          </div>
          <div style={{ display: 'flex', gap: 12, overflowX: 'auto', paddingBottom: 4, marginLeft: -20, paddingLeft: 20, marginRight: -20, paddingRight: 20 }}>
            {workspaces.map((ws, i) => (
              <div key={i} onClick={() => onNavigate('workspace-detail')} style={{
                background: TOKENS.color.surface, borderRadius: 16, border: '1px solid #26262E',
                padding: 16, minWidth: 160, flexShrink: 0, cursor: 'pointer',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                  <div style={{ width: 40, height: 40, borderRadius: 10, background: 'linear-gradient(135deg,#00FF9422,#00FF9411)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <LaptopIcon size={18} color="#00FF94" />
                  </div>
                  <HeartIcon size={18} />
                </div>
                <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 14, fontWeight: 600, color: TOKENS.color.textPrimary, marginBottom: 4 }}>{ws.name}</div>
                <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textSecondary, marginBottom: 8 }}>{ws.walk}</div>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  <span style={{ background: 'rgba(0,255,148,0.1)', color: TOKENS.color.accent, fontSize: 10, fontFamily: "'JetBrains Mono',monospace", fontWeight: 600, padding: '3px 8px', borderRadius: 999 }}>{ws.wifi}</span>
                  <span style={{ background: 'rgba(153,153,161,0.1)', color: TOKENS.color.textSecondary, fontSize: 10, fontFamily: "'JetBrains Mono',monospace", fontWeight: 600, padding: '3px 8px', borderRadius: 999 }}>{ws.noise}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* TRIP PROGRESS */}
        {state === 'mid-trip' && (
          <div>
            <MicroLabel color="#9999A1">Trip progress</MicroLabel>
            <Card style={{ padding: 20, marginTop: 12 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                <span style={{ fontSize: 24 }}>🇵🇹</span>
                <div>
                  <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 16, fontWeight: 600, color: TOKENS.color.textPrimary }}>Lisbon, Portugal</div>
                  <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textSecondary }}>11 days remaining · 6 segments</div>
                </div>
              </div>
              <div style={{ height: 6, background: TOKENS.color.border, borderRadius: 999, overflow: 'hidden' }}>
                <div style={{ width: '21%', height: '100%', background: TOKENS.color.accent, borderRadius: 999, transition: `width ${TOKENS.anim.slower} ease` }} />
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6 }}>
                <MonoText size={11} color="#9999A1">DAY 3</MonoText>
                <MonoText size={11} color="#9999A1">14 DAYS</MonoText>
              </div>
            </Card>
          </div>
        )}

        {/* VAULT */}
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
            <MicroLabel color="#9999A1">Vault</MicroLabel>
            <button onClick={() => onNavigate('vault')} style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.accent, fontWeight: 500 }}>Open vault</button>
          </div>
          <div style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 4, marginLeft: -20, paddingLeft: 20, marginRight: -20, paddingRight: 20 }}>
            {['🛂 Passport · 2027', '🇪🇺 Schengen · Aug', '🛡️ Insurance · Active'].map((chip, i) => (
              <span key={i} style={{ background: TOKENS.color.surface2, border: '1px solid #26262E', borderRadius: 999, padding: '6px 12px', fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textSecondary, whiteSpace: 'nowrap', flexShrink: 0 }}>{chip}</span>
            ))}
          </div>
        </div>

        {/* AI SUGGESTED */}
        <div style={{ marginBottom: 20 }}>
          <Card style={{ padding: 20, borderTop: '2px solid #00FF9433', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: 'linear-gradient(90deg, transparent, #00FF94, transparent)', animation: 'shimmer-lr 2s linear infinite' }} />
            <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: 'rgba(0,255,148,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <span style={{ fontSize: 16 }}>✦</span>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 14, fontWeight: 600, color: TOKENS.color.textPrimary, marginBottom: 4 }}>4hr layover at CDG. Work nearby?</div>
                <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textSecondary, marginBottom: 12 }}>3 coworking spaces within 2km of Charles de Gaulle.</div>
                <Btn variant="ghost" size="sm" onClick={() => onNavigate('workspaces')}>Explore spaces →</Btn>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SplashScreen, OnboardingAuth, OnboardingPrefs, OnboardingHomeBase, Dashboard });