// relay-shared.jsx — reusable Slack(dark)+Relay chrome for the Relay demo video.
// Exports all building blocks to window so the video script can compose scenes.

const T = {
  indigo: 'oklch(62% 0.20 280)',
  indigoBright: 'oklch(74% 0.16 280)',
  chrome: '#1a0820',
  sidebar: '#2c0e2f',
  sideActive: 'rgba(255,255,255,0.13)',
  panel: '#1a1d21',
  panelText: '#d1d2d3',
  panelHead: '#ffffff',
  panelMute: '#9b9ba0',
  link: '#5aa3ff',
  divider: 'rgba(255,255,255,0.10)',
  card: '#ffffff',
  ink: '#1d1c1d',
  inkSoft: '#5c5a5d',
  inkMute: '#8d8b8e',
  rule: 'rgba(20,20,30,0.12)',
  blue: '#1264a3',
  blueFocus: '#1d6fb8',
  selBlue: '#1264a3',
  green: '#017a5a',
  relayBlue: '#2f6fe0',
  amber: '#e8a13c',
  inter: "'Inter', system-ui, sans-serif",
  geist: "'Geist', system-ui, sans-serif",
  mono: "'Geist Mono', ui-monospace, monospace",
};

function RelayIcon({ size = 30, radius = 7 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: radius, flexShrink: 0,
      background: 'linear-gradient(135deg,#3b7bf0,#2452cc)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.3)',
    }}>
      <svg width={size * 0.58} height={size * 0.58} viewBox="0 0 24 24" fill="none">
        <rect x="5" y="3.5" width="13" height="17" rx="1.8" fill="#fff" />
        <rect x="5" y="3.5" width="3.4" height="17" rx="1.4" fill="#f2a93b" />
        <line x1="11" y1="8" x2="15.5" y2="8" stroke="#9bb6e8" strokeWidth="1.4" strokeLinecap="round" />
        <line x1="11" y1="11.5" x2="15.5" y2="11.5" stroke="#9bb6e8" strokeWidth="1.4" strokeLinecap="round" />
        <line x1="11" y1="15" x2="13.6" y2="15" stroke="#9bb6e8" strokeWidth="1.4" strokeLinecap="round" />
      </svg>
    </div>
  );
}

function KoryoIcon({ size = 30, radius = 7 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: radius, flexShrink: 0, background: '#0e0e1a',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <svg width={size * 0.62} height={size * 0.45} viewBox="0 0 50 36" fill="none">
        <path d="M2 18 H12 L16 8 L22 28 L28 14 L32 22 L36 18 H48" stroke="oklch(80% 0.15 280)" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </div>
  );
}

function RailIcon({ children, label, active = false, badge }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, width: 52, position: 'relative' }}>
      <div style={{
        width: 38, height: 38, borderRadius: 11,
        background: active ? 'rgba(255,255,255,0.16)' : 'transparent',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: active ? '#fff' : 'rgba(255,255,255,0.70)', position: 'relative',
      }}>
        {children}
        {badge && (
          <span style={{ position: 'absolute', top: -3, right: 0, minWidth: 16, height: 16, padding: '0 4px', borderRadius: 8, background: '#cd2553', color: '#fff', fontSize: 10, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', border: `2px solid ${T.chrome}` }}>{badge}</span>
        )}
      </div>
      <div style={{ fontSize: 10, fontWeight: 600, color: active ? '#fff' : 'rgba(255,255,255,0.62)' }}>{label}</div>
    </div>
  );
}

function Rail() {
  const ico = (path) => (
    <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{path}</svg>
  );
  return (
    <div style={{ width: 74, background: T.chrome, flexShrink: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '14px 0 14px', gap: 13 }}>
      <div style={{ width: 38, height: 38, borderRadius: 11, background: 'linear-gradient(135deg,#6b4423,#3a2414)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 19, boxShadow: '0 0 0 2px rgba(255,255,255,0.16)' }}>🐶</div>
      <RailIcon label="Home" active>{ico(<><path d="M3 11l9-8 9 8" /><path d="M5 10v10h14V10" /></>)}</RailIcon>
      <RailIcon label="DMs" badge="2">{ico(<><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></>)}</RailIcon>
      <RailIcon label="Activity">{ico(<><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9" /><path d="M13.7 21a2 2 0 0 1-3.4 0" /></>)}</RailIcon>
      <RailIcon label="Later">{ico(<><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>)}</RailIcon>
      <RailIcon label="More">{ico(<><circle cx="5" cy="12" r="1.4" /><circle cx="12" cy="12" r="1.4" /><circle cx="19" cy="12" r="1.4" /></>)}</RailIcon>
      <div style={{ flex: 1 }} />
      <RailIcon label="Admin">{ico(<><circle cx="12" cy="12" r="3" /></>)}</RailIcon>
    </div>
  );
}

function SideRow({ glyph, name, active, app, badge, dot }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 9, margin: '1px 8px', padding: '5px 10px', borderRadius: 7, background: active ? T.sideActive : 'transparent', color: active ? '#fff' : 'rgba(255,255,255,0.74)', fontWeight: active ? 700 : 450, fontSize: 14.5 }}>
      {app ? (<div style={{ width: 18, height: 18, flexShrink: 0 }}>{app}</div>)
        : dot ? (<span style={{ width: 16, height: 16, borderRadius: 4, background: 'linear-gradient(135deg,#8a5cf6,#5b2bd6)', flexShrink: 0 }} />)
        : (<span style={{ width: 16, textAlign: 'center', fontSize: 14, color: 'rgba(255,255,255,0.55)' }}>{glyph}</span>)}
      <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{name}</span>
      {badge && (<span style={{ minWidth: 18, height: 18, padding: '0 5px', borderRadius: 9, background: 'rgba(255,255,255,0.16)', color: '#fff', fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{badge}</span>)}
    </div>
  );
}

function SideHead({ children }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '12px 16px 4px', fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,0.56)', whiteSpace: 'nowrap' }}>
      <span style={{ fontSize: 9 }}>▾</span>{children}
    </div>
  );
}

function Sidebar() {
  const mini = (path, bg) => (
    <div style={{ width: 18, height: 18, borderRadius: 4, background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg width="11" height="11" viewBox="0 0 24 24" fill="#fff">{path}</svg>
    </div>
  );
  return (
    <div style={{ width: 250, background: T.sidebar, flexShrink: 0, display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '15px 16px', borderBottom: `1px solid rgba(255,255,255,0.08)`, display: 'flex', alignItems: 'center', gap: 7 }}>
        <span style={{ fontWeight: 800, fontSize: 17, color: '#fff', letterSpacing: '-0.01em' }}>Northwind</span>
        <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)' }}>▾</span>
      </div>
      <div style={{ padding: '6px 0', overflow: 'hidden' }}>
        <SideRow glyph="≡" name="Threads" />
        <SideRow glyph="🎧" name="Huddles" />
        <SideRow glyph="➤" name="Drafts & sent" />
        <SideRow glyph="▤" name="Directories" />
        <SideHead>Channels</SideHead>
        <SideRow glyph="#" name="all-northwind" />
        <SideRow glyph="#" name="google-slack-integration" />
        <SideHead>Direct messages</SideHead>
        <SideRow dot name="Daniel Brookes" />
        <SideRow dot name="Priya Nair" />
        <SideHead>Apps</SideHead>
        <SideRow app={mini(<rect x="3" y="4" width="18" height="17" rx="2" />, '#2c8aef')} name="Google Calendar" badge="1" />
        <SideRow app={mini(<path d="M7 3h10l5 9-5 9H7l5-9z" />, '#1aa463')} name="Google Drive" badge="1" />
        <SideRow app={mini(<circle cx="12" cy="12" r="9" />, '#5a2e8c')} name="Slackbot" />
        <SideRow app={<RelayIcon size={18} radius={4} />} name="Relay" active />
        <SideRow app={<KoryoIcon size={18} radius={4} />} name="Koryo" />
      </div>
    </div>
  );
}

function ThreadHeader() {
  return (
    <React.Fragment>
      <div style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '14px 24px', borderBottom: `1px solid ${T.divider}` }}>
        <span style={{ fontSize: 18, color: T.panelMute }}>☆</span>
        <RelayIcon size={24} radius={5} />
        <span style={{ fontWeight: 800, fontSize: 17, color: T.panelHead }}>Relay</span>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 18, color: T.panelMute }}>🔔</span>
        <span style={{ fontSize: 18, color: T.panelMute }}>⋮</span>
      </div>
      <div style={{ display: 'flex', gap: 24, padding: '0 24px', borderBottom: `1px solid ${T.divider}` }}>
        {['Home', 'Messages', 'About'].map((t) => (
          <div key={t} style={{ padding: '12px 2px', fontSize: 14.5, fontWeight: t === 'Messages' ? 700 : 500, color: t === 'Messages' ? T.panelHead : T.panelMute, borderBottom: t === 'Messages' ? '2px solid #fff' : '2px solid transparent' }}>{t}</div>
        ))}
      </div>
    </React.Fragment>
  );
}

function TitleBar() {
  return (
    <div style={{ height: 40, background: T.chrome, display: 'flex', alignItems: 'center', padding: '0 16px', gap: 10, flexShrink: 0 }}>
      <div style={{ display: 'flex', gap: 8 }}>
        <div style={{ width: 12, height: 12, borderRadius: 6, background: '#ff5f57' }} />
        <div style={{ width: 12, height: 12, borderRadius: 6, background: '#febc2e' }} />
        <div style={{ width: 12, height: 12, borderRadius: 6, background: '#28c840' }} />
      </div>
      <div style={{ display: 'flex', gap: 10, color: 'rgba(255,255,255,0.5)', marginLeft: 6, fontSize: 15 }}>
        <span>‹</span><span>›</span><span style={{ fontSize: 13 }}>🕘</span>
      </div>
      <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
        <div style={{ background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.10)', borderRadius: 8, padding: '5px 16px', fontSize: 12.5, color: 'rgba(255,255,255,0.6)', minWidth: 420, textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7 }}>
          <span style={{ fontSize: 12 }}>🔍</span> Search Northwind
        </div>
      </div>
    </div>
  );
}

function ModalShell({ title, width = 560, children }) {
  return (
    <div style={{ width, background: T.card, borderRadius: 14, overflow: 'hidden', boxShadow: '0 50px 110px -24px rgba(0,0,0,0.75), 0 0 0 1px rgba(20,20,30,0.05)', fontFamily: T.inter }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '22px 24px 16px' }}>
        <RelayIcon size={36} radius={8} />
        <div style={{ fontWeight: 800, fontSize: 23, color: T.ink, flex: 1, letterSpacing: '-0.01em' }}>{title}</div>
        <span style={{ color: T.inkMute, fontSize: 18 }}>⤢</span>
        <span style={{ color: T.inkMute, fontSize: 22, lineHeight: 1 }}>×</span>
      </div>
      {children}
    </div>
  );
}

function Field({ label, children }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{ fontSize: 15, fontWeight: 800, color: T.ink, marginBottom: 8 }}>{label}</div>
      {children}
    </div>
  );
}

function Input({ value, focus, placeholder, caret }) {
  return (
    <div style={{ border: `1.5px solid ${focus ? T.blueFocus : T.rule}`, borderRadius: 9, padding: '12px 14px', fontSize: 15.5, color: value ? T.ink : T.inkMute, boxShadow: focus ? `0 0 0 3px rgba(29,111,184,0.18)` : 'none', display: 'flex', alignItems: 'center', minHeight: 47 }}>
      {value || placeholder}
      {caret && <span style={{ width: 1.5, height: 18, background: T.ink, marginLeft: 1, display: 'inline-block' }} />}
    </div>
  );
}

function Cursor({ x, y, pressed }) {
  return (
    <div style={{ position: 'absolute', left: x, top: y, zIndex: 200, transform: pressed ? 'scale(0.86)' : 'scale(1)', transition: 'transform 0.08s', filter: 'drop-shadow(0 4px 6px rgba(0,0,0,0.5))' }}>
      <svg width="28" height="32" viewBox="0 0 22 26" fill="none">
        <path d="M2 2 L2 19 L7 15 L10 22 L13 21 L10 14 L17 14 Z" fill="#fff" stroke="#0e0e1a" strokeWidth="1.5" strokeLinejoin="round" />
      </svg>
    </div>
  );
}

function ClickRing({ x, y }) {
  return (
    <div style={{ position: 'absolute', left: x, top: y, width: 44, height: 44, marginLeft: -22, marginTop: -22, borderRadius: '50%', border: '2.5px solid rgba(255,255,255,0.9)', zIndex: 190, pointerEvents: 'none' }} />
  );
}

Object.assign(window, {
  T, RelayIcon, KoryoIcon, Rail, Sidebar, SideRow, SideHead,
  ThreadHeader, TitleBar, ModalShell, Field, Input, Cursor, ClickRing,
});