// RMTCTRL — Trips screens

function TripsList({ onNavigate }) {
  const [tab, setTab] = React.useState('upcoming');
  const trips = [
    { city: 'Lisbon', flag: '🇵🇹', country: 'Portugal', dates: '2 May – 16 May', segments: 6, days: 14, color: TOKENS.color.info },
    { city: 'Tokyo', flag: '🇯🇵', country: 'Japan', dates: '20 Jun – 4 Jul', segments: 8, days: 14, color: TOKENS.color.accent },
    { city: 'Barcelona', flag: '🇪🇸', country: 'Spain', dates: '10 Aug – 17 Aug', segments: 4, days: 7, color: TOKENS.color.warn },
  ];
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
          <h1 style={{ fontFamily: "'Inter',sans-serif", fontSize: 28, fontWeight: 700, color: TOKENS.color.textPrimary, margin: 0 }}>Trips</h1>
          <button onClick={() => onNavigate('add-segment')} style={{ width: 40, height: 40, borderRadius: 12, background: TOKENS.color.accent, border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <PlusIcon size={18} color="#0A0A0B" />
          </button>
        </div>
        {/* Tab strip */}
        <div style={{ display: 'flex', gap: 0, borderBottom: '1px solid #26262E', marginBottom: 20 }}>
          {['upcoming', 'past'].map(t => (
            <button key={t} onClick={() => setTab(t)} style={{
              flex: 1, height: 40, background: 'none', border: 'none', cursor: 'pointer',
              fontFamily: "'Inter',sans-serif", fontSize: 14, fontWeight: 600,
              color: tab === t ? TOKENS.color.textPrimary : TOKENS.color.textTertiary,
              borderBottom: tab === t ? '2px solid #00FF94' : '2px solid transparent',
              textTransform: 'capitalize', transition: `all ${TOKENS.anim.fast}`,
            }}>{t}</button>
          ))}
        </div>
      </div>
      <div style={{ flex: 1, overflowY: 'auto', padding: '0 20px' }}>
        {tab === 'upcoming' ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {trips.map((trip, i) => (
              <div key={i} onClick={() => onNavigate('trip-detail')} style={{
                background: TOKENS.color.surface, borderRadius: 16, border: '1px solid #26262E',
                display: 'flex', alignItems: 'center', gap: 16, padding: 16, cursor: 'pointer',
                overflow: 'hidden',
              }}>
                {/* Cover */}
                <div style={{
                  width: 80, height: 80, borderRadius: 12, flexShrink: 0,
                  background: `linear-gradient(135deg, ${trip.color}33, ${trip.color}88)`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 32,
                }}>{trip.flag}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 18, fontWeight: 600, color: TOKENS.color.textPrimary, marginBottom: 2 }}>{trip.city}, {trip.country}</div>
                  <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textSecondary, marginBottom: 8 }}>{trip.dates}</div>
                  <div style={{ display: 'flex', gap: 8 }}>
                    <span style={{ background: TOKENS.color.surface2, borderRadius: 999, padding: '3px 10px', fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, color: TOKENS.color.textSecondary, letterSpacing: '0.05em' }}>{trip.segments} SEGS</span>
                    <span style={{ background: TOKENS.color.surface2, borderRadius: 999, padding: '3px 10px', fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, color: TOKENS.color.textSecondary, letterSpacing: '0.05em' }}>{trip.days} DAYS</span>
                  </div>
                </div>
                <ChevronRightIcon size={18} />
              </div>
            ))}
          </div>
        ) : (
          <EmptyState
            icon={<GlobeIcon size={64} />}
            headline="No past trips"
            sub="Your completed trips will appear here"
          />
        )}
      </div>
    </div>
  );
}

// ── Trip Detail ──────────────────────────────────────────────────────────────
function TripDetail({ onBack, onNavigate }) {
  const [tab, setTab] = React.useState('timeline');
  const days = [
    {
      label: 'DAY 1 · FRI 2 MAY',
      segments: [
        { pill: 'ON TIME', time: '06:00 → 22:30', icon: PlaneIcon, title: 'SYD → LIS · QF1', sub: 'Sydney Kingsford Smith · Gate B12' },
        { pill: 'WORK BLOCK', time: '07:30 → 09:00', icon: LaptopIcon, title: 'Airport work session', sub: 'Qantas First Lounge · T1' },
      ],
    },
    {
      label: 'DAY 3 · SUN 4 MAY',
      segments: [
        { pill: 'ARRIVED', time: '10:00', icon: BedIcon, title: 'Check-in · The Independente', sub: 'Rua de São Pedro de Alcântara, Lisbon' },
        { pill: 'WORK BLOCK', time: '14:00 → 18:00', icon: LaptopIcon, title: 'Hub Lisbon', sub: 'Chiado · Desk booked' },
      ],
    },
  ];
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflowY: 'auto' }}>
      {/* Hero */}
      <div style={{ position: 'relative', height: 240, flexShrink: 0, background: 'linear-gradient(135deg,#3B9EFF33,#00FF9422)', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, transparent 40%, #0A0A0B 100%)' }} />
        <div style={{ position: 'absolute', top: 20, left: 20, right: 20, display: 'flex', justifyContent: 'space-between' }}>
          <button onClick={onBack} style={{ width: 36, height: 36, borderRadius: 999, background: 'rgba(0,0,0,0.4)', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <ArrowLeftIcon size={18} />
          </button>
          <button style={{ width: 36, height: 36, borderRadius: 999, background: 'rgba(0,0,0,0.4)', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <ShareIcon size={18} />
          </button>
        </div>
        <div style={{ position: 'absolute', bottom: 20, left: 20 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 6 }}>
            <span style={{ fontSize: 36 }}>🇵🇹</span>
            <div>
              <h1 style={{ fontFamily: "'Inter',sans-serif", fontSize: 26, fontWeight: 700, color: TOKENS.color.textPrimary, margin: '0 0 2px' }}>Lisbon, Portugal</h1>
              <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textSecondary }}>2 May – 16 May 2025</span>
            </div>
          </div>
          <StatusPill label="IN TRANSIT" />
        </div>
      </div>

      {/* Tab strip */}
      <div style={{ display: 'flex', borderBottom: '1px solid #26262E', background: TOKENS.color.bg, flexShrink: 0 }}>
        {['timeline','map','expenses','notes'].map(t => (
          <button key={t} onClick={() => setTab(t)} style={{
            flex: 1, height: 44, background: 'none', border: 'none', cursor: 'pointer',
            fontFamily: "'Inter',sans-serif", fontSize: 13, fontWeight: 600,
            color: tab === t ? TOKENS.color.textPrimary : TOKENS.color.textTertiary, textTransform: 'capitalize',
            borderBottom: tab === t ? '2px solid #00FF94' : '2px solid transparent',
          }}>{t}</button>
        ))}
      </div>

      {/* Timeline */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '20px 20px 100px' }}>
        {tab === 'timeline' && days.map((day, di) => (
          <div key={di} style={{ marginBottom: 24 }}>
            <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, color: TOKENS.color.textTertiary, letterSpacing: '0.08em', marginBottom: 12, textTransform: 'uppercase' }}>{day.label}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {day.segments.map((seg, si) => {
                const Icon = seg.icon;
                return (
                  <Card key={si} style={{ padding: '14px 16px' }}>
                    <div style={{ display: 'flex', 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 }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                          <StatusPill label={seg.pill} />
                          <MonoText size={11} 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.sub}</div>
                      </div>
                    </div>
                  </Card>
                );
              })}
            </div>
          </div>
        ))}
        {tab === 'map' && (
          <div style={{ height: 300, background: TOKENS.color.surface, borderRadius: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid #26262E' }}>
            <div style={{ textAlign: 'center', color: TOKENS.color.textTertiary }}>
              <MapPinIcon size={40} color="#5C5C66" />
              <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 14, marginTop: 8 }}>Map view</div>
            </div>
          </div>
        )}
        {tab === 'expenses' && (
          <div style={{ textAlign: 'center', paddingTop: 48, color: TOKENS.color.textTertiary }}>
            <DollarIcon size={40} color="#5C5C66" />
            <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 15, color: TOKENS.color.textSecondary, marginTop: 12 }}>Switch to Expenses tab to view</div>
          </div>
        )}
        {tab === 'notes' && (
          <div style={{ background: TOKENS.color.surface2, borderRadius: 12, padding: 16, border: '1.5px solid #26262E', minHeight: 160 }}>
            <p style={{ fontFamily: "'Inter',sans-serif", fontSize: 15, color: TOKENS.color.textSecondary, margin: 0, lineHeight: 1.6 }}>Tap to add notes for this trip...</p>
          </div>
        )}
      </div>

      {/* FAB */}
      <button onClick={() => onNavigate('add-segment')} style={{
        position: 'absolute', bottom: 100, right: 20,
        width: 56, height: 56, borderRadius: '50%',
        background: TOKENS.color.accent, border: 'none', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 4px 20px rgba(0,255,148,0.3)',
      }}>
        <PlusIcon size={22} color="#0A0A0B" />
      </button>
    </div>
  );
}

// ── Add Segment Bottom Sheet ─────────────────────────────────────────────────
function AddSegment({ onBack }) {
  const [segType, setSegType] = React.useState('flight');
  const [flightNum, setFlightNum] = React.useState('');
  const [hotelName, setHotelName] = React.useState('');
  const [blockTitle, setBlockTitle] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [found, setFound] = React.useState(false);

  const findFlight = () => {
    setLoading(true);
    setTimeout(() => { setLoading(false); setFound(true); }, 1500);
  };

  const tabs = ['flight','hotel','work block','other'];
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflowY: 'auto' }}>
      {/* Drag handle */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '12px 20px 0' }}>
        <div style={{ width: 36, height: 4, borderRadius: 2, background: TOKENS.color.border, marginBottom: 16 }} />
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
          <h2 style={{ fontFamily: "'Inter',sans-serif", fontSize: 22, fontWeight: 700, color: TOKENS.color.textPrimary, margin: 0 }}>
            {segType === 'flight' ? 'Add flight' : segType === 'hotel' ? 'Add hotel' : segType === 'work block' ? 'Add work block' : 'Add segment'}
          </h2>
          <button onClick={onBack} style={{ width: 32, height: 32, borderRadius: '50%', background: TOKENS.color.surface2, border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <XIcon size={16} />
          </button>
        </div>
      </div>

      {/* Segmented control */}
      <div style={{ padding: '16px 20px' }}>
        <div style={{ display: 'flex', background: TOKENS.color.surface2, borderRadius: 12, padding: 4, gap: 2 }}>
          {tabs.map(t => (
            <button key={t} onClick={() => { setSegType(t); setFound(false); }} style={{
              flex: 1, height: 36, borderRadius: 10, border: 'none', cursor: 'pointer',
              background: segType === t ? TOKENS.color.border : 'transparent',
              fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 600,
              color: segType === t ? TOKENS.color.textPrimary : TOKENS.color.textTertiary, textTransform: 'capitalize',
              whiteSpace: 'nowrap', transition: `all ${TOKENS.anim.fast}`,
            }}>{t}</button>
          ))}
        </div>
      </div>

      <div style={{ flex: 1, padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 16 }}>
        {segType === 'flight' && (
          <>
            <Input label="Flight number" value={flightNum} onChange={setFlightNum} mono helper="e.g. QF1, BA267" />
            <div style={{ display: 'flex', gap: 12 }}>
              <div style={{ flex: 1, background: TOKENS.color.surface2, borderRadius: 12, border: '1.5px solid #26262E', padding: '12px 16px' }}>
                <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 11, color: TOKENS.color.textSecondary, marginBottom: 4 }}>Date</div>
                <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 15, color: TOKENS.color.textPrimary }}>02 MAY 2025</div>
              </div>
            </div>
            {!found && (
              <Btn variant="primary" size="md" fullWidth onClick={findFlight} disabled={!flightNum}>
                {loading ? 'Searching...' : 'Find flight'}
              </Btn>
            )}
            {loading && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <Skeleton height={20} width="60%" />
                <Skeleton height={60} />
                <Skeleton height={40} />
              </div>
            )}
            {found && (
              <Card style={{ padding: 16 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
                  <StatusPill label="ON TIME" />
                  <MonoText size={11} color="#9999A1">QANTAS</MonoText>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 4 }}>
                  <div style={{ textAlign: 'center' }}>
                    <MonoText size={22} weight={600}>SYD</MonoText>
                    <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textSecondary }}>Sydney</div>
                  </div>
                  <div style={{ flex: 1, height: 1, background: TOKENS.color.border, position: 'relative' }}>
                    <div style={{ position: 'absolute', top: -6, left: '50%', transform: 'translateX(-50%)' }}>
                      <PlaneIcon size={14} color="#00FF94" />
                    </div>
                  </div>
                  <div style={{ textAlign: 'center' }}>
                    <MonoText size={22} weight={600}>LIS</MonoText>
                    <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textSecondary }}>Lisbon</div>
                  </div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <MonoText size={14} color="#9999A1">06:00 → 21:30</MonoText>
                  <MonoText size={14} color="#9999A1">GATE B12</MonoText>
                </div>
              </Card>
            )}
          </>
        )}
        {segType === 'hotel' && (
          <>
            <Input label="Hotel name" value={hotelName} onChange={setHotelName} helper="Start typing to search..." />
            <Input label="Address" value="" onChange={() => {}} helper="Autocomplete" />
            <div style={{ display: 'flex', gap: 12 }}>
              <div style={{ flex: 1, background: TOKENS.color.surface2, borderRadius: 12, border: '1.5px solid #26262E', padding: '12px 16px' }}>
                <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 11, color: TOKENS.color.textSecondary, marginBottom: 4 }}>Check-in</div>
                <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 13, color: TOKENS.color.textPrimary }}>02 MAY</div>
              </div>
              <div style={{ flex: 1, background: TOKENS.color.surface2, borderRadius: 12, border: '1.5px solid #26262E', padding: '12px 16px' }}>
                <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 11, color: TOKENS.color.textSecondary, marginBottom: 4 }}>Check-out</div>
                <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 13, color: TOKENS.color.textPrimary }}>16 MAY</div>
              </div>
            </div>
            <Input label="Confirmation #" value="" onChange={() => {}} mono />
          </>
        )}
        {segType === 'work block' && (
          <>
            <Input label="Title" value={blockTitle} onChange={setBlockTitle} helper="e.g. Deep work session" />
            <Input label="Location / workspace" value="" onChange={() => {}} helper="Search or enter custom" />
            <div style={{ display: 'flex', gap: 12 }}>
              <div style={{ flex: 1, background: TOKENS.color.surface2, borderRadius: 12, border: '1.5px solid #26262E', padding: '12px 16px' }}>
                <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 11, color: TOKENS.color.textSecondary, marginBottom: 4 }}>Start</div>
                <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 13, color: TOKENS.color.textPrimary }}>09:00</div>
              </div>
              <div style={{ flex: 1, background: TOKENS.color.surface2, borderRadius: 12, border: '1.5px solid #26262E', padding: '12px 16px' }}>
                <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 11, color: TOKENS.color.textSecondary, marginBottom: 4 }}>End</div>
                <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 13, color: TOKENS.color.textPrimary }}>13:00</div>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: TOKENS.color.surface2, borderRadius: 12, border: '1.5px solid #26262E', padding: '14px 16px' }}>
              <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 15, color: TOKENS.color.textPrimary }}>Recurring</span>
              <Toggle on={false} onChange={() => {}} />
            </div>
          </>
        )}
        {segType === 'other' && (
          <>
            <Input label="Title" value="" onChange={() => {}} />
            <Input label="Location" value="" onChange={() => {}} />
            <div style={{ display: 'flex', gap: 12 }}>
              <div style={{ flex: 1, background: TOKENS.color.surface2, borderRadius: 12, border: '1.5px solid #26262E', padding: '12px 16px' }}>
                <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 11, color: TOKENS.color.textSecondary, marginBottom: 4 }}>Start</div>
                <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 13, color: TOKENS.color.textPrimary }}>10:00</div>
              </div>
              <div style={{ flex: 1, background: TOKENS.color.surface2, borderRadius: 12, border: '1.5px solid #26262E', padding: '12px 16px' }}>
                <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 11, color: TOKENS.color.textSecondary, marginBottom: 4 }}>End</div>
                <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 13, color: TOKENS.color.textPrimary }}>12:00</div>
              </div>
            </div>
            <Input label="Notes" value="" onChange={() => {}} helper="Optional" />
          </>
        )}
        <div style={{ height: 20 }} />
      </div>
      <div style={{ padding: '16px 20px 32px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <Btn variant="primary" size="lg" fullWidth>Save segment</Btn>
        <Btn variant="destructive" size="md" fullWidth>Delete segment</Btn>
      </div>
    </div>
  );
}

Object.assign(window, { TripsList, TripDetail, AddSegment });