// RMTCTRL — Workspace screens

function WorkspaceMap({ onNavigate }) {
  const [selected, setSelected] = React.useState('All');
  const [savedItems, setSavedItems] = React.useState([]);
  const filters = ['All', 'Quiet', 'Fast Wi-Fi', 'Community', '24/7', 'Open Now'];
  const workspaces = [
    { name: 'Hub Lisbon', type: 'Cowork', dist: '230m', wifi: '78 Mbps', noise: 'Quiet', saved: false },
    { name: 'Dear Breakfast', type: 'Cafe', dist: '480m', wifi: '34 Mbps', noise: 'Moderate', saved: false },
    { name: 'Lisbon Library', type: 'Library', dist: '720m', wifi: '22 Mbps', noise: 'Silent', saved: true },
    { name: 'Selina CoWork', type: 'Cowork', dist: '950m', wifi: '56 Mbps', noise: 'Lively', saved: false },
    { name: 'LX Factory', type: 'Cafe', dist: '1.2km', wifi: '48 Mbps', noise: 'Moderate', saved: false },
    { name: 'Altis Lobby', type: 'Hotel', dist: '1.8km', wifi: '90 Mbps', noise: 'Quiet', saved: false },
  ];
  const typeColor = { Cowork: TOKENS.color.info, Cafe: TOKENS.color.accent, Library: TOKENS.color.purple, Hotel: TOKENS.color.warn, Other: TOKENS.color.textPrimary };

  const toggleSave = (i) => {
    setSavedItems(prev => prev.includes(i) ? prev.filter(x => x !== i) : [...prev, i]);
  };

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden' }}>
      {/* Map background */}
      <div style={{ flex: 1, background: 'linear-gradient(160deg,#0D1117 0%,#111827 60%,#0A0F1A 100%)', position: 'relative' }}>
        {/* Simulated map grid */}
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.08 }}>
          <defs>
            <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
              <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#F5F5F7" strokeWidth="0.5"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#grid)"/>
        </svg>
        {/* Simulated roads */}
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.15 }}>
          <path d="M 0 200 Q 200 150 393 220" stroke="#3B9EFF" strokeWidth="3" fill="none"/>
          <path d="M 80 0 Q 120 200 100 500" stroke="#3B9EFF" strokeWidth="2" fill="none"/>
          <path d="M 0 350 L 393 380" stroke="#F5F5F7" strokeWidth="1.5" fill="none"/>
          <path d="M 200 0 Q 180 300 220 600" stroke="#F5F5F7" strokeWidth="1.5" fill="none"/>
        </svg>
        {/* User location */}
        <div style={{ position: 'absolute', top: '45%', left: '50%', transform: 'translate(-50%,-50%)' }}>
          <div style={{ width: 16, height: 16, borderRadius: '50%', background: TOKENS.color.accent, border: '3px solid #0A0A0B', position: 'relative' }}>
            <div style={{ position: 'absolute', inset: -8, borderRadius: '50%', background: 'rgba(0,255,148,0.15)', animation: 'pill-pulse 1.5s ease-in-out infinite' }} />
          </div>
        </div>
        {/* Map pins */}
        {[
          { top: '32%', left: '30%', type: 'Cowork' },
          { top: '55%', left: '65%', type: 'Cafe' },
          { top: '25%', left: '70%', type: 'Library' },
          { top: '65%', left: '25%', type: 'Cowork' },
          { top: '70%', left: '55%', type: 'Hotel' },
        ].map((pin, i) => (
          <div key={i} onClick={() => onNavigate('workspace-detail')} style={{
            position: 'absolute', top: pin.top, left: pin.left,
            width: 28, height: 28, borderRadius: '50% 50% 50% 0',
            background: typeColor[pin.type], transform: 'rotate(-45deg)',
            cursor: 'pointer', boxShadow: `0 0 12px ${typeColor[pin.type]}66`,
          }} />
        ))}
        {/* Top floating bar */}
        <div style={{ position: 'absolute', top: 20, left: 20, right: 20 }}>
          <div style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 2 }}>
            {filters.map(f => (
              <FilterChip key={f} label={f} selected={selected === f} onClick={() => setSelected(f)} />
            ))}
            <button style={{ width: 36, height: 36, borderRadius: '50%', background: TOKENS.color.surface, border: '1px solid #26262E', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <SearchIcon size={16} />
            </button>
            <button onClick={() => onNavigate('add-workspace')} style={{ width: 36, height: 36, borderRadius: '50%', background: TOKENS.color.accent, border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <PlusIcon size={16} color="#0A0A0B" />
            </button>
          </div>
        </div>
      </div>

      {/* Bottom sheet */}
      <div style={{
        background: TOKENS.color.bg, borderTop: '1px solid #26262E',
        borderRadius: '20px 20px 0 0', padding: '12px 20px 20px',
        maxHeight: '55%', display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ width: 36, height: 4, background: TOKENS.color.border, borderRadius: 2, margin: '0 auto 16px' }} />
        <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 16, fontWeight: 600, color: TOKENS.color.textPrimary, marginBottom: 16 }}>
          27 workspaces nearby
        </div>
        <div style={{ overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 0 }}>
          {workspaces.map((ws, i) => (
            <div key={i} onClick={() => onNavigate('workspace-detail')} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '12px 0', borderBottom: i < workspaces.length - 1 ? '1px solid #26262E' : 'none',
              cursor: 'pointer',
            }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: `${typeColor[ws.type]}22`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                {ws.type === 'Cowork' && <LaptopIcon size={16} color={typeColor[ws.type]} />}
                {ws.type === 'Cafe' && <span style={{ fontSize: 16 }}>☕</span>}
                {ws.type === 'Library' && <span style={{ fontSize: 16 }}>📚</span>}
                {ws.type === 'Hotel' && <BedIcon size={16} color={typeColor[ws.type]} />}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 15, fontWeight: 600, color: TOKENS.color.textPrimary, marginBottom: 2 }}>{ws.name}</div>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, color: TOKENS.color.textSecondary }}>{ws.dist}</span>
                  <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, color: TOKENS.color.accent }}>{ws.wifi}</span>
                  <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 11, color: TOKENS.color.textSecondary }}>{ws.noise}</span>
                </div>
              </div>
              <button onClick={e => { e.stopPropagation(); toggleSave(i); }} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4 }}>
                <HeartIcon size={18} filled={savedItems.includes(i) || ws.saved} color={savedItems.includes(i) || ws.saved ? TOKENS.color.accent : TOKENS.color.textTertiary} />
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Workspace Detail ─────────────────────────────────────────────────────────
function WorkspaceDetail({ onBack, onNavigate }) {
  const [saved, setSaved] = React.useState(false);
  const reviews = [
    { stars: 5, text: 'Great spot for deep work. Fast wifi, plenty of outlets.', time: '3 days ago' },
    { stars: 4, text: 'Really nice vibe. Can get a little loud after lunch but otherwise solid.', time: '1 week ago' },
    { stars: 5, text: 'My go-to in Lisbon. The coffee is excellent too.', time: '2 weeks ago' },
  ];

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflowY: 'auto' }}>
      {/* Hero */}
      <div style={{ height: 260, position: 'relative', background: 'linear-gradient(135deg,#3B9EFF22,#00FF9422)', flexShrink: 0 }}>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, transparent 30%, #0A0A0B 100%)' }} />
        <button onClick={onBack} style={{ position: 'absolute', top: 20, left: 20, width: 36, height: 36, borderRadius: '50%', background: 'rgba(0,0,0,0.5)', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <ArrowLeftIcon size={18} />
        </button>
        <div style={{ position: 'absolute', top: '40%', left: '50%', transform: 'translate(-50%,-50%)', fontSize: 56 }}>🏢</div>
      </div>

      <div style={{ padding: '0 20px 100px' }}>
        {/* Name + type */}
        <h1 style={{ fontFamily: "'Inter',sans-serif", fontSize: 26, fontWeight: 700, color: TOKENS.color.textPrimary, margin: '0 0 8px' }}>Hub Lisbon</h1>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
          <span style={{ background: 'rgba(59,158,255,0.15)', color: TOKENS.color.info, fontFamily: "'JetBrains Mono',monospace", fontSize: 11, fontWeight: 600, padding: '4px 10px', borderRadius: 999, letterSpacing: '0.05em' }}>COWORK</span>
          <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textSecondary }}>Rua do Século 6, Chiado</span>
          <NavigationIcon size={14} color="#3B9EFF" />
        </div>

        {/* 4-col stats */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginBottom: 20 }}>
          {[
            { label: 'WIFI', value: '78 MBPS', color: TOKENS.color.accent },
            { label: 'NOISE', value: 'QUIET', color: TOKENS.color.textPrimary },
            { label: 'PRICE', value: '$$', color: TOKENS.color.warn },
            { label: 'HOURS', value: '22:00', color: TOKENS.color.textPrimary },
          ].map(stat => (
            <div key={stat.label} style={{ background: TOKENS.color.surface, borderRadius: 12, padding: '12px 8px', textAlign: 'center', border: '1px solid #26262E' }}>
              <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 9, fontWeight: 600, color: TOKENS.color.textTertiary, letterSpacing: '0.08em', marginBottom: 6, textTransform: 'uppercase' }}>{stat.label}</div>
              <div style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 13, fontWeight: 600, color: stat.color, lineHeight: 1 }}>{stat.value}</div>
            </div>
          ))}
        </div>

        {/* Action buttons */}
        <div style={{ display: 'flex', gap: 10, marginBottom: 16 }}>
          <button onClick={() => setSaved(!saved)} style={{
            flex: 1, height: 48, borderRadius: 12, border: `1.5px solid ${saved ? TOKENS.color.accent : TOKENS.color.border}`,
            background: saved ? 'rgba(0,255,148,0.1)' : 'transparent', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            fontFamily: "'Inter',sans-serif", fontSize: 14, fontWeight: 600,
            color: saved ? TOKENS.color.accent : TOKENS.color.textPrimary, transition: `all ${TOKENS.anim.fast}`,
          }}>
            <HeartIcon size={18} filled={saved} color={saved ? TOKENS.color.accent : TOKENS.color.textPrimary} />
            {saved ? 'Saved' : 'Save'}
          </button>
          <Btn variant="primary" size="md" style={{ flex: 1 }} icon={<NavigationIcon size={16} color="#0A0A0B" />}>
            Directions
          </Btn>
        </div>

        {/* Add to today */}
        <Card style={{ padding: '14px 16px', marginBottom: 24 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(0,255,148,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <PlusIcon size={18} color="#00FF94" />
            </div>
            <div>
              <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 14, fontWeight: 600, color: TOKENS.color.textPrimary }}>Add to today's work blocks</div>
              <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textSecondary }}>Schedule time here</div>
            </div>
          </div>
        </Card>

        {/* Rating */}
        <div style={{ marginBottom: 20 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 6 }}>
            <MonoText size={36} weight={600}>4.6</MonoText>
            <span style={{ fontFamily: "'JetBrains Mono',monospace", fontSize: 14, color: TOKENS.color.textSecondary }}>/ 5</span>
          </div>
          <div style={{ display: 'flex', gap: 4, marginBottom: 4 }}>
            {[1,2,3,4,5].map(s => <StarIcon key={s} size={20} filled={s <= 4} />)}
          </div>
          <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, color: TOKENS.color.textSecondary }}>Based on 23 reviews</div>
        </div>

        {/* Reviews */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 80 }}>
          {reviews.map((r, i) => (
            <Card key={i} style={{ padding: 16 }}>
              <div style={{ display: 'flex', gap: 3, marginBottom: 8 }}>
                {[1,2,3,4,5].map(s => <StarIcon key={s} size={14} filled={s <= r.stars} />)}
              </div>
              <p style={{ fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textPrimary, lineHeight: 1.5, margin: '0 0 8px' }}>{r.text}</p>
              <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textTertiary }}>{r.time}</span>
            </Card>
          ))}
        </div>
      </div>

      {/* Sticky bottom */}
      <div style={{ position: 'sticky', bottom: 0, background: TOKENS.color.bg, borderTop: '1px solid #26262E', padding: '12px 20px 20px' }}>
        <Btn variant="secondary" size="md" fullWidth onClick={() => onNavigate('submit-review')}>Write a review</Btn>
      </div>
    </div>
  );
}

// ── Add Workspace ────────────────────────────────────────────────────────────
function AddWorkspace({ onBack }) {
  const [wsType, setWsType] = React.useState('Cafe');
  const [name, setName] = React.useState('');
  const [wifiLevel, setWifiLevel] = React.useState(2);
  const [noiseLevel, setNoiseLevel] = React.useState(2);
  const [toggles, setToggles] = React.useState({ outlets: false, booths: false, open247: false });
  const types = ['Cafe', 'Cowork', 'Library', 'Hotel lobby', 'Other'];
  const wifiLabels = ['Slow', 'OK', 'Fast', 'Blazing'];
  const noiseLabels = ['Silent', 'Quiet', 'Moderate', 'Lively', 'Loud'];

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflowY: 'auto' }}>
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 4 }}>
          <button onClick={onBack} style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
            <ArrowLeftIcon size={20} />
          </button>
          <h1 style={{ fontFamily: "'Inter',sans-serif", fontSize: 22, fontWeight: 700, color: TOKENS.color.textPrimary, margin: 0 }}>Submit a workspace</h1>
        </div>
        <p style={{ fontFamily: "'Inter',sans-serif", fontSize: 14, color: TOKENS.color.textSecondary, marginBottom: 24, paddingLeft: 32 }}>We'll verify and add it within 48hrs</p>
      </div>
      <div style={{ flex: 1, padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 16 }}>
        <Input label="Name" value={name} onChange={setName} />
        {/* Type chips */}
        <div>
          <div style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, fontWeight: 500, color: TOKENS.color.textSecondary, marginBottom: 10 }}>Type</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {types.map(t => (
              <FilterChip key={t} label={t} selected={wsType === t} onClick={() => setWsType(t)} />
            ))}
          </div>
        </div>
        <Input label="Address" value="" onChange={() => {}} helper="Start typing to search" />
        {/* Photo upload */}
        <div style={{ height: 100, 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: 6 }}>
            <CameraIcon size={24} color="#5C5C66" />
            <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textTertiary }}>Camera</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
            <ImageIcon size={24} color="#5C5C66" />
            <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 12, color: TOKENS.color.textTertiary }}>Gallery</span>
          </div>
        </div>
        {/* Wi-Fi slider */}
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
            <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, fontWeight: 500, color: TOKENS.color.textSecondary }}>Wi-Fi speed</span>
            <MonoText size={13} color="#00FF94">{wifiLabels[wifiLevel]}</MonoText>
          </div>
          <input type="range" min={0} max={3} value={wifiLevel} onChange={e => setWifiLevel(Number(e.target.value))} style={{ width: '100%', accentColor: TOKENS.color.accent }} />
        </div>
        {/* Noise slider */}
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
            <span style={{ fontFamily: "'Inter',sans-serif", fontSize: 13, fontWeight: 500, color: TOKENS.color.textSecondary }}>Noise level</span>
            <MonoText size={13} color="#9999A1">{noiseLabels[noiseLevel]}</MonoText>
          </div>
          <input type="range" min={0} max={4} value={noiseLevel} onChange={e => setNoiseLevel(Number(e.target.value))} style={{ width: '100%', accentColor: TOKENS.color.accent }} />
        </div>
        {/* Toggles */}
        {[
          { key: 'outlets', label: 'Outlets at every seat' },
          { key: 'booths', label: 'Phone booths' },
          { key: 'open247', label: 'Open 24/7' },
        ].map(row => (
          <div key={row.key} 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 }}>{row.label}</span>
            <Toggle on={toggles[row.key]} onChange={v => setToggles(p => ({ ...p, [row.key]: v }))} />
          </div>
        ))}
        <div style={{ height: 20 }} />
      </div>
      <div style={{ padding: '16px 20px 32px' }}>
        <Btn variant="primary" size="lg" fullWidth>Submit for verification</Btn>
      </div>
    </div>
  );
}

Object.assign(window, { WorkspaceMap, WorkspaceDetail, AddWorkspace });