// RMTCTRL — Expenses, Currency Converter, Submit Review, Profile

function ExpensesScreen({ onNavigate }) {
  const categories = [
    { label: 'Food', color: TOKENS.color.accent, pct: 32 },
    { label: 'Transport', color: TOKENS.color.info, pct: 22 },
    { label: 'Accomm.', color: TOKENS.color.purple, pct: 28 },
    { label: 'Workspace', color: TOKENS.color.warn, pct: 11 },
    { label: 'Other', color: TOKENS.color.error, pct: 7 },
  ];
  const expenses = [
    { emoji: '🍽️', vendor: 'Time Out Market', cat: 'Food', amount: '€24.50', currency: 'EUR', date: 'Today' },
    { emoji: '🚇', vendor: 'Metro Lisboa', cat: 'Transport', amount: '€1.60', currency: 'EUR', date: 'Today' },
    { emoji: '🏡', vendor: 'Airbnb', cat: 'Accommodation', amount: '€840.00', currency: 'EUR', date: 'May 2' },
    { emoji: '💻', vendor: 'Hub Lisbon', cat: 'Workspace', amount: '€15.00', currency: 'EUR', date: 'May 3' },
    { emoji: '☕', vendor: 'Dear Breakfast', cat: 'Food', amount: '€6.80', currency: 'EUR', date: 'May 3' },
    { emoji: '🚌', vendor: 'Flixbus SYD→ MXD', cat: 'Transport', amount: '€22.00', currency: 'EUR', date: 'May 4' },
  ];

  // Simple donut chart via conic-gradient
  const conicStops = categories.reduce((acc, cat, i) => {
    const start = acc.total;
    const end = start + cat.pct;
    acc.stops.push(`${cat.color} ${start}% ${end}%`);
    acc.total = end;
    return acc;
  }, { stops: [], total: 0 }).stops;

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflowY: 'auto' }}>
      <div style={{ padding: '20px 20px 0' }}>
        {/* Trip selector */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: TOKENS.color.surface2, borderRadius: 10, padding: '8px 14px', cursor: 'pointer' }}>
            <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textPrimary, fontWeight: 600 }}>🇵🇹 Lisbon · May 2025</span>
            <ChevronRightIcon size={16} color="#9999A1" />
          </div>
          <button style={{ width: 40, height: 40, background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#9999A1" strokeWidth="1.5"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="14" y2="12"/><line x1="4" y1="18" x2="10" y2="18"/></svg>
          </button>
        </div>

        {/* Hero total */}
        <div style={{ textAlign: 'center', padding: '28px 0 0' }}>
          <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 48, fontWeight: 600, color: TOKENS.color.textPrimary, lineHeight: 1 }}>€1,247.50</div>
          <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textSecondary, marginTop: 8 }}>12 expenses · 8 days</div>
        </div>

        {/* Donut chart */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '28px 0 20px' }}>
          <div style={{
            width: 160, height: 160, borderRadius: '50%',
            background: `conic-gradient(${conicStops.join(', ')})`,
            position: 'relative',
          }}>
            <div style={{ position: 'absolute', inset: 32, borderRadius: '50%', background: TOKENS.color.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <MonoText size={12} color="#9999A1">TOTAL</MonoText>
            </div>
          </div>
          {/* Legend */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 16px', justifyContent: 'center', marginTop: 20 }}>
            {categories.map(cat => (
              <div key={cat.label} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: cat.color }} />
                <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textSecondary }}>{cat.label} {cat.pct}%</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: 'flex', gap: 10, marginBottom: 24 }}>
          <Btn variant="secondary" size="sm" fullWidth onClick={() => onNavigate('currency')}>Convert</Btn>
        </div>

        {/* Expense list */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {expenses.map((exp, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0', borderBottom: i < expenses.length - 1 ? '1px solid #26262E' : 'none' }}>
              <div style={{ width: 40, height: 40, borderRadius: '50%', background: TOKENS.color.surface2, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 20 }}>
                {exp.emoji}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 15, fontWeight: 600, color: TOKENS.color.textPrimary, marginBottom: 2 }}>{exp.vendor}</div>
                <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textSecondary }}>{exp.cat}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 15, fontWeight: 600, color: TOKENS.color.textPrimary, marginBottom: 2 }}>{exp.amount}</div>
                <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textTertiary }}>{exp.date}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ height: 100 }} />
      </div>

      <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>
  );
}

// ── Currency Converter ────────────────────────────────────────────────────────
function CurrencyConverter({ onBack }) {
  const [amount, setAmount] = React.useState('100');
  const rate = 0.608;
  const converted = (parseFloat(amount || 0) * rate).toFixed(2);
  const recentCurrencies = ['EUR', 'USD', 'GBP', 'JPY', 'SGD', 'THB'];

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
      <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 }}>Convert</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>

      <div style={{ flex: 1, padding: '20px 20px 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {/* FROM card */}
        <Card style={{ padding: 20 }}>
          <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, color: TOKENS.color.textTertiary, letterSpacing: '0.08em', marginBottom: 12 }}>FROM</div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: TOKENS.color.surface2, borderRadius: 10, padding: '8px 12px', cursor: 'pointer' }}>
              <span style={{ fontSize: 20 }}>🇦🇺</span>
              <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 15, fontWeight: 600, color: TOKENS.color.textPrimary }}>AUD</span>
              <ChevronRightIcon size={14} />
            </div>
            <input
              type="number"
              value={amount}
              onChange={e => setAmount(e.target.value)}
              style={{
                background: 'none', border: 'none', outline: 'none', textAlign: 'right',
                fontFamily: "'JetBrains Mono',monospace", fontSize: 36, fontWeight: 600,
                color: TOKENS.color.textPrimary, width: '50%',
              }}
            />
          </div>
        </Card>

        {/* Rate indicator */}
        <div style={{ textAlign: 'center', padding: '4px 0' }}>
          <MonoText size={12} color="#5C5C66">1 AUD = 0.608 EUR · updated 2 min ago</MonoText>
        </div>

        {/* TO card */}
        <Card style={{ padding: 20 }}>
          <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, color: TOKENS.color.textTertiary, letterSpacing: '0.08em', marginBottom: 12 }}>TO</div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: TOKENS.color.surface2, borderRadius: 10, padding: '8px 12px', cursor: 'pointer' }}>
              <span style={{ fontSize: 20 }}>🇪🇺</span>
              <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 15, fontWeight: 600, color: TOKENS.color.textPrimary }}>EUR</span>
              <ChevronRightIcon size={14} />
            </div>
            <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 36, fontWeight: 600, color: TOKENS.color.textSecondary, textAlign: 'right' }}>
              {converted}
            </div>
          </div>
        </Card>

        {/* Recent currencies */}
        <div>
          <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, color: TOKENS.color.textTertiary, letterSpacing: '0.08em', marginBottom: 10 }}>RECENT</div>
          <div style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 4 }}>
            {recentCurrencies.map(c => (
              <span key={c} style={{ background: TOKENS.color.surface2, border: '1px solid #26262E', borderRadius: 999, padding: '6px 14px', fontFamily: "'JetBrains Mono',monospace", fontSize: 12, fontWeight: 600, color: TOKENS.color.textSecondary, whiteSpace: 'nowrap', cursor: 'pointer', flexShrink: 0 }}>{c}</span>
            ))}
          </div>
        </div>
      </div>

      <div style={{ padding: '16px 20px 32px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <Btn variant="primary" size="lg" fullWidth>Use this rate</Btn>
        <Btn variant="secondary" size="md" fullWidth onClick={onBack}>Done</Btn>
      </div>
    </div>
  );
}

// ── Submit Review ─────────────────────────────────────────────────────────────
function SubmitReview({ onBack }) {
  const [stars, setStars] = React.useState(0);
  const [wifi, setWifi] = React.useState(50);
  const [noise, setNoise] = React.useState(2);
  const [text, setText] = React.useState('');
  const noiseLabels = ['Silent', 'Quiet', 'Moderate', 'Lively', 'Loud'];

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
      <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: 20, fontWeight: 700, color: TOKENS.color.textPrimary, margin: 0 }}>Rate Hub Lisbon</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>

      <div style={{ flex: 1, padding: '20px', display: 'flex', flexDirection: 'column', gap: 20, overflowY: 'auto' }}>
        {/* Stars */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 8 }}>
          {[1,2,3,4,5].map(s => (
            <button key={s} onClick={() => setStars(s)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4 }}>
              <StarIcon size={44} filled={s <= stars} color="#FFB800" />
            </button>
          ))}
        </div>

        {/* Wi-Fi speed */}
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
            <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textSecondary }}>Wi-Fi speed</span>
            <MonoText size={13} color="#00FF94">{wifi} Mbps</MonoText>
          </div>
          <input type="range" min={0} max={200} value={wifi} onChange={e => setWifi(Number(e.target.value))} style={{ width: '100%', accentColor: TOKENS.color.accent }} />
        </div>

        {/* Noise */}
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
            <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textSecondary }}>Noise level</span>
            <MonoText size={13} color="#9999A1">{noiseLabels[noise]}</MonoText>
          </div>
          <input type="range" min={0} max={4} value={noise} onChange={e => setNoise(Number(e.target.value))} style={{ width: '100%', accentColor: TOKENS.color.accent }} />
        </div>

        {/* Text field */}
        <div>
          <textarea
            value={text}
            onChange={e => setText(e.target.value)}
            placeholder="What was it like?"
            rows={4}
            style={{
              width: '100%', background: TOKENS.color.surface2, border: '1.5px solid #26262E', borderRadius: 12,
              padding: '14px 16px', fontFamily: "'Inter',sans-serif", fontSize: 15, color: TOKENS.color.textPrimary,
              resize: 'none', outline: 'none', boxSizing: 'border-box', lineHeight: 1.5,
            }}
          />
        </div>

        {/* Photo upload */}
        <div style={{ height: 80, background: TOKENS.color.surface2, borderRadius: 12, border: '1.5px dashed #26262E', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 24 }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
            <CameraIcon size={22} color="#5C5C66" />
            <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 11, color: TOKENS.color.textTertiary }}>Camera</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
            <ImageIcon size={22} color="#5C5C66" />
            <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 11, color: TOKENS.color.textTertiary }}>Gallery</span>
          </div>
        </div>
      </div>

      <div style={{ padding: '12px 20px 32px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <Btn variant="primary" size="lg" fullWidth disabled={stars === 0}>Submit</Btn>
        <Btn variant="ghost" size="md" fullWidth onClick={onBack}>Cancel</Btn>
      </div>
    </div>
  );
}

// ── Profile / Settings ────────────────────────────────────────────────────────
function ProfileScreen() {
  const [notifs, setNotifs] = React.useState({ flights: true, workBlocks: true, docs: false, nearby: false });
  const [cal, setCal] = React.useState({ apple: true, google: false });
  const [partners, setPartners] = React.useState(false);

  const SettingRow = ({ label, right, danger, onClick }) => (
    <div onClick={onClick} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 56, borderBottom: '1px solid #26262E', cursor: onClick ? 'pointer' : 'default' }}>
      <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 15, color: danger ? TOKENS.color.error : TOKENS.color.textPrimary }}>{label}</span>
      {right}
    </div>
  );

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflowY: 'auto' }}>
      {/* Header */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '32px 20px 24px', borderBottom: '1px solid #26262E' }}>
        <Avatar size={80} initials="AL" color="#00FF94" />
        <h2 style={{ fontFamily: "'Inter',sans-serif", fontSize: 22, fontWeight: 700, color: TOKENS.color.textPrimary, margin: '16px 0 4px' }}>Alex Lawson</h2>
        <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textSecondary }}>alex@rmtctrl.app</span>
      </div>

      <div style={{ padding: '0 20px 100px' }}>
        {[
          {
            header: 'ACCOUNT',
            rows: [
              { label: 'Edit profile', right: <ChevronRightIcon /> },
              { label: 'Sign out', right: <ChevronRightIcon /> },
              { label: 'Delete account', right: <ChevronRightIcon />, danger: true },
            ],
          },
          {
            header: 'PREFERENCES',
            rows: [
              { label: 'Edit work preferences', right: <ChevronRightIcon /> },
              { label: 'Home base · Sydney', right: <ChevronRightIcon /> },
              { label: 'Home currency · AUD', right: <ChevronRightIcon /> },
            ],
          },
          {
            header: 'NOTIFICATIONS',
            rows: [
              { label: 'Flight alerts', right: <Toggle on={notifs.flights} onChange={v => setNotifs(p => ({ ...p, flights: v }))} /> },
              { label: 'Work block reminders', right: <Toggle on={notifs.workBlocks} onChange={v => setNotifs(p => ({ ...p, workBlocks: v }))} /> },
              { label: 'Doc expiry alerts', right: <Toggle on={notifs.docs} onChange={v => setNotifs(p => ({ ...p, docs: v }))} /> },
              { label: 'Nearby workspaces', right: <Toggle on={notifs.nearby} onChange={v => setNotifs(p => ({ ...p, nearby: v }))} /> },
            ],
          },
          {
            header: 'CALENDAR SYNC',
            rows: [
              { label: 'Apple Calendar', right: <Toggle on={cal.apple} onChange={v => setCal(p => ({ ...p, apple: v }))} /> },
              { label: 'Google Calendar', right: <Toggle on={cal.google} onChange={v => setCal(p => ({ ...p, google: v }))} /> },
            ],
          },
          {
            header: 'PRIVACY',
            rows: [
              { label: 'Location settings', right: <ChevronRightIcon /> },
              { label: 'Data export', right: <ChevronRightIcon /> },
              { label: 'Privacy policy', right: <ChevronRightIcon /> },
            ],
          },
          {
            header: 'PARTNERS',
            rows: [
              { label: 'Show partner offers', right: <Toggle on={partners} onChange={setPartners} /> },
            ],
          },
          {
            header: 'ABOUT',
            rows: [
              { label: 'Version 1.0.0', right: <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 12, color: TOKENS.color.textTertiary }}>BETA</span> },
              { label: 'Terms of service', right: <ChevronRightIcon /> },
              { label: 'Contact us', right: <ChevronRightIcon /> },
              { label: 'Rate the app', right: <ChevronRightIcon /> },
            ],
          },
        ].map(section => (
          <div key={section.header} style={{ marginTop: 28 }}>
            <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, color: TOKENS.color.textTertiary, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 4 }}>{section.header}</div>
            {section.rows.map((row, i) => (
              <SettingRow key={i} label={row.label} right={row.right} danger={row.danger} onClick={row.onClick} />
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ExpensesScreen, CurrencyConverter, SubmitReview, ProfileScreen });