// RMTCTRL — Vault, Document Detail, Country Profile, Calendar

function VaultScreen({ onNavigate }) {
  const folders = [
    { icon: '🛂', label: 'Passport', count: 2, color: TOKENS.color.info },
    { icon: '🗺️', label: 'Visas', count: 4, color: TOKENS.color.purple },
    { icon: '🛡️', label: 'Insurance', count: 3, color: TOKENS.color.accent },
    { icon: '✈️', label: 'Tickets', count: 8, color: TOKENS.color.warn },
    { icon: '📁', label: 'Other', count: 5, color: TOKENS.color.textSecondary },
  ];
  const expiring = [
    { title: 'Schengen Visa', days: 32 },
    { title: 'Travel Insurance', days: 67 },
    { title: 'UK Visit Visa', days: 91 },
  ];

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflowY: 'auto' }}>
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
          <h1 style={{ fontFamily: "'Inter',sans-serif", fontSize: 28, fontWeight: 700, color: TOKENS.color.textPrimary, margin: 0 }}>Vault</h1>
          <button style={{ width: 40, height: 40, borderRadius: '50%', background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <SearchIcon size={22} color="#9999A1" />
          </button>
        </div>

        {/* Expiring soon banner */}
        <div style={{ background: 'rgba(255,184,0,0.08)', border: '1px solid rgba(255,184,0,0.25)', borderRadius: 16, padding: '14px 16px', marginBottom: 20 }}>
          <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, color: TOKENS.color.warn, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 12 }}>Expiring soon</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {expiring.map((doc, i) => (
              <div key={i} onClick={() => onNavigate('doc-detail')} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer' }}>
                <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textPrimary }}>{doc.title}</span>
                <span style={{ background: 'rgba(255,184,0,0.15)', color: TOKENS.color.warn, fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, padding: '3px 10px', borderRadius: 999 }}>{doc.days}D</span>
              </div>
            ))}
          </div>
        </div>

        {/* 2-col folder grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {folders.slice(0, 4).map(f => (
            <div key={f.label} onClick={() => onNavigate('doc-detail')} style={{ background: TOKENS.color.surface, borderRadius: 16, border: '1px solid #26262E', padding: 20, cursor: 'pointer' }}>
              <div style={{ fontSize: 40, marginBottom: 10 }}>{f.icon}</div>
              <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 16, fontWeight: 600, color: TOKENS.color.textPrimary, marginBottom: 4 }}>{f.label}</div>
              <span style={{ background: `${f.color}22`, color: f.color, fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, padding: '3px 10px', borderRadius: 999 }}>{f.count} files</span>
            </div>
          ))}
        </div>
        {/* Other centered */}
        <div style={{ marginTop: 12 }}>
          <div onClick={() => onNavigate('doc-detail')} style={{ background: TOKENS.color.surface, borderRadius: 16, border: '1px solid #26262E', padding: 20, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 16 }}>
            <div style={{ fontSize: 40 }}>{folders[4].icon}</div>
            <div>
              <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 16, fontWeight: 600, color: TOKENS.color.textPrimary, marginBottom: 4 }}>{folders[4].label}</div>
              <span style={{ background: 'rgba(153,153,161,0.15)', color: TOKENS.color.textSecondary, fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, padding: '3px 10px', borderRadius: 999 }}>{folders[4].count} files</span>
            </div>
          </div>
        </div>
        <div style={{ height: 100 }} />
      </div>

      {/* FAB */}
      <button 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>
  );
}

// ── Document Detail ──────────────────────────────────────────────────────────
function DocDetail({ onBack }) {
  const [title, setTitle] = React.useState('Australian Passport');
  const [remind, setRemind] = React.useState(true);

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflowY: 'auto' }}>
      <div style={{ padding: '20px 20px 0', display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
        <button onClick={onBack} style={{ background: 'none', border: 'none', cursor: 'pointer' }}>
          <ArrowLeftIcon size={22} />
        </button>
        <h2 style={{ fontFamily: "'Inter',sans-serif", fontSize: 20, fontWeight: 700, color: TOKENS.color.textPrimary, margin: 0 }}>Document</h2>
      </div>
      {/* Preview */}
      <div style={{ margin: '0 20px 20px', height: 200, background: TOKENS.color.surface, borderRadius: 16, border: '1px solid #26262E', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 64, marginBottom: 8 }}>🛂</div>
          <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textTertiary }}>Passport preview</div>
        </div>
      </div>
      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Input label="Title" value={title} onChange={setTitle} />
        <div style={{ background: TOKENS.color.surface2, borderRadius: 12, border: '1.5px solid #26262E', padding: '14px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textSecondary }}>Category</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 15, color: TOKENS.color.textPrimary }}>Passport</span>
            <ChevronRightIcon size={16} />
          </div>
        </div>
        <div style={{ background: TOKENS.color.surface2, borderRadius: 12, border: '1.5px solid #26262E', padding: '14px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textSecondary }}>Expiry date</span>
          <MonoText size={15} color="#FFB800">14 MAR 2027</MonoText>
        </div>
        <div style={{ background: TOKENS.color.surface2, borderRadius: 12, border: '1.5px solid #26262E', padding: '14px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textSecondary }}>Country</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 18 }}>🇦🇺</span>
            <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 15, color: TOKENS.color.textPrimary }}>Australia</span>
          </div>
        </div>
        <div style={{ background: TOKENS.color.surface2, borderRadius: 12, border: '1.5px solid #26262E', padding: '14px 16px', minHeight: 80 }}>
          <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textTertiary }}>Notes...</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: TOKENS.color.surface, borderRadius: 12, border: '1px solid #26262E', padding: '14px 16px' }}>
          <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 15, color: TOKENS.color.textPrimary }}>Remind 30 days before expiry</span>
          <Toggle on={remind} onChange={setRemind} />
        </div>
        <div style={{ display: 'flex', gap: 12, paddingBottom: 40 }}>
          <Btn variant="secondary" size="md" style={{ flex: 1 }} icon={<ShareIcon size={16} />}>Share</Btn>
          <Btn variant="destructive" size="md" style={{ flex: 1 }}>Delete</Btn>
        </div>
      </div>
    </div>
  );
}

// ── Country Profile ──────────────────────────────────────────────────────────
function CountryProfile({ onBack, onNavigate }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflowY: 'auto' }}>
      <div style={{ padding: '20px 20px 0', display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
        <button onClick={onBack} style={{ background: 'none', border: 'none', cursor: 'pointer' }}>
          <ArrowLeftIcon size={22} />
        </button>
      </div>
      {/* Hero */}
      <div style={{ padding: '0 20px 24px', borderBottom: '1px solid #26262E' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 8 }}>
          <span style={{ fontSize: 64 }}>🇵🇹</span>
          <div>
            <h1 style={{ fontFamily: "'Inter',sans-serif", fontSize: 28, fontWeight: 700, color: TOKENS.color.textPrimary, margin: '0 0 4px' }}>Portugal</h1>
            <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textSecondary, marginBottom: 4 }}>Capital: Lisbon</div>
            <MonoText size={16} weight={600} color="#00FF94">14:32 LOCAL</MonoText>
          </div>
        </div>
      </div>

      <div style={{ padding: '20px 20px 100px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {/* Visa card */}
        <Card style={{ padding: 20 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, color: TOKENS.color.textTertiary, letterSpacing: '0.08em' }}>VISA</div>
            <StatusPill label="ON TIME" />
          </div>
          <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 16, fontWeight: 600, color: TOKENS.color.accent, marginBottom: 4 }}>Visa-free · 90 days</div>
          <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textSecondary }}>Schengen area · No cost</div>
        </Card>

        {/* Currency */}
        <Card style={{ padding: 20 }}>
          <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, color: TOKENS.color.textTertiary, letterSpacing: '0.08em', marginBottom: 12 }}>CURRENCY</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
            <MonoText size={28} weight={600}>EUR €</MonoText>
            <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textSecondary }}>1 AUD =</div>
            <MonoText size={20} weight={600} color="#00FF94">0.608</MonoText>
          </div>
        </Card>

        {/* Internet */}
        <Card style={{ padding: 20 }}>
          <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, color: TOKENS.color.textTertiary, letterSpacing: '0.08em', marginBottom: 12 }}>INTERNET</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <MonoText size={28} weight={600} color="#00FF94">87 MBPS</MonoText>
            <div>
              <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textPrimary }}>Avg speed</div>
              <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textSecondary }}>Excellent reliability</div>
            </div>
          </div>
        </Card>

        {/* Cost of living */}
        <Card style={{ padding: 20 }}>
          <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, color: TOKENS.color.textTertiary, letterSpacing: '0.08em', marginBottom: 12 }}>COST OF LIVING</div>
          <div style={{ display: 'flex', gap: 4, marginBottom: 8 }}>
            {['$','$','$','$'].map((s, i) => (
              <div key={i} style={{ width: 28, height: 28, borderRadius: 6, background: i < 2 ? '#00FF9422' : TOKENS.color.border, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 13, fontWeight: 600, color: i < 2 ? TOKENS.color.accent : TOKENS.color.border }}>{s}</span>
              </div>
            ))}
          </div>
          <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textSecondary }}>Affordable · ~€1,200/mo for nomads</div>
        </Card>

        {/* Safety */}
        <Card style={{ padding: 20 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
            <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, color: TOKENS.color.textTertiary, letterSpacing: '0.08em' }}>SAFETY</div>
            <MonoText size={20} weight={600} color="#00FF94">8.2 / 10</MonoText>
          </div>
          <div style={{ height: 8, background: TOKENS.color.border, borderRadius: 999, overflow: 'hidden' }}>
            <div style={{ width: '82%', height: '100%', background: 'linear-gradient(90deg, #00FF94, #3B9EFF)', borderRadius: 999 }} />
          </div>
        </Card>

        {/* Top cities */}
        <Card style={{ padding: 20 }}>
          <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, color: TOKENS.color.textTertiary, letterSpacing: '0.08em', marginBottom: 12 }}>TOP CITIES</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {['Lisbon', 'Porto', 'Faro', 'Braga', 'Coimbra'].map(city => (
              <FilterChip key={city} label={city} selected={city === 'Lisbon'} onClick={() => onNavigate('workspaces')} />
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

// ── Calendar ─────────────────────────────────────────────────────────────────
function CalendarScreen({ onNavigate }) {
  const [view, setView] = React.useState('month');
  const [selectedDay, setSelectedDay] = React.useState(3);
  const today = 3;
  const daysInMonth = 31;
  const firstDayOfWeek = 4; // Thursday (May 2025)
  const days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
  const blanks = Array.from({ length: firstDayOfWeek }, (_, i) => null);
  const allDays = [...blanks, ...days];
  const dotColors = { 2: [TOKENS.color.accent], 3: [TOKENS.color.info, TOKENS.color.accent], 5: [TOKENS.color.warn], 8: [TOKENS.color.accent], 10: [TOKENS.color.info], 16: [TOKENS.color.purple] };

  const daySegs = [
    { pill: 'IN TRANSIT', time: '06:00 → 22:30', icon: PlaneIcon, title: 'SYD → LIS · QF1', sub: 'Economy · 23hr 30m' },
    { pill: 'WORK BLOCK', time: '07:30 → 09:00', icon: LaptopIcon, title: 'Qantas lounge', sub: 'T1 · Sydney Airport' },
  ];

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflowY: 'auto' }}>
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
          <h1 style={{ fontFamily: "'Inter',sans-serif", fontSize: 28, fontWeight: 700, color: TOKENS.color.textPrimary, margin: 0 }}>May 2025</h1>
          <button onClick={() => setView(view === 'month' ? 'list' : 'month')} style={{ width: 40, height: 40, borderRadius: 10, background: TOKENS.color.surface2, border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <CalendarIcon size={18} />
          </button>
        </div>

        {view === 'month' && (
          <>
            {/* Day headers */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2, marginBottom: 4 }}>
              {['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].map(d => (
                <div key={d} style={{ textAlign: 'center', fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 600, color: TOKENS.color.textTertiary, padding: '4px 0' }}>{d}</div>
              ))}
            </div>
            {/* Day grid */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 2 }}>
              {allDays.map((day, i) => (
                <div key={i} onClick={() => day && setSelectedDay(day)} style={{
                  height: 44, display: 'flex', flexDirection: 'column',
                  alignItems: 'center', justifyContent: 'center', gap: 3,
                  borderRadius: 10, cursor: day ? 'pointer' : 'default',
                  background: day === selectedDay ? 'rgba(0,255,148,0.1)' : 'transparent',
                  border: day === today ? '1.5px solid #00FF94' : '1.5px solid transparent',
                  opacity: !day ? 0 : 1,
                }}>
                  {day && (
                    <>
                      <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 14, fontWeight: day === today ? 700 : 400, color: day === today ? TOKENS.color.accent : day === selectedDay ? TOKENS.color.textPrimary : TOKENS.color.textPrimary }}>{day}</span>
                      {dotColors[day] && (
                        <div style={{ display: 'flex', gap: 2 }}>
                          {dotColors[day].map((c, ci) => (
                            <div key={ci} style={{ width: 4, height: 4, borderRadius: '50%', background: c }} />
                          ))}
                        </div>
                      )}
                    </>
                  )}
                </div>
              ))}
            </div>

            {/* Selected day segments */}
            {selectedDay && (
              <div style={{ marginTop: 20 }}>
                <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, color: TOKENS.color.textTertiary, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 12 }}>
                  {`${['SUN','MON','TUE','WED','THU','FRI','SAT'][(firstDayOfWeek + selectedDay - 1) % 7]} ${selectedDay} MAY`}
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {daySegs.map((seg, i) => {
                    const Icon = seg.icon;
                    return (
                      <Card key={i} 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', marginBottom: 4 }}>
                              <StatusPill label={seg.pill} />
                              <MonoText size={11} color="#9999A1">{seg.time}</MonoText>
                            </div>
                            <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 14, fontWeight: 600, color: TOKENS.color.textPrimary, marginBottom: 2 }}>{seg.title}</div>
                            <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textSecondary }}>{seg.sub}</div>
                          </div>
                        </div>
                      </Card>
                    );
                  })}
                </div>
              </div>
            )}
          </>
        )}
        <div style={{ height: 100 }} />
      </div>
    </div>
  );
}

Object.assign(window, { VaultScreen, DocDetail, CountryProfile, CalendarScreen });