// App.jsx — Shared design system tokens, utilities, and common UI components
// Corporate formal: navy + white, Inter + JetBrains Mono

// Design tokens
const TOKENS = {
  navy: '#0B2545',       // primary dark
  navy2: '#13315C',      // secondary dark
  navyInk: '#0A1D38',    // deepest
  blue: '#2F5BB7',       // accent
  blueSoft: '#E8EFFB',   // accent tint
  zoomBlue: '#2D8CFF',   // Zoom-ish accent
  slate: '#5B6B80',      // muted text
  line: '#E4E8EF',       // border
  bg: '#F5F7FB',         // app bg
  white: '#FFFFFF',
  ok: '#1F8A5A',
  okSoft: '#E3F4EB',
  warn: '#C5811C',
  warnSoft: '#FBF0DC',
  danger: '#B3321C',
  dangerSoft: '#FBE3DC',
};

// Inject Google Fonts once
if (typeof document !== 'undefined' && !document.getElementById('app-fonts')) {
  const link = document.createElement('link');
  link.id = 'app-fonts';
  link.rel = 'stylesheet';
  link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap';
  document.head.appendChild(link);

  const s = document.createElement('style');
  s.textContent = `
    .mobile-scope, .mobile-scope * { font-family: 'Inter', -apple-system, system-ui, sans-serif; }
    .mobile-scope .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
    .mobile-scope button { font-family: inherit; }
    .mobile-scope input, .mobile-scope textarea { font-family: inherit; }
    .mobile-scope *::-webkit-scrollbar { width: 0; height: 0; }
    @keyframes jcg-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
    @keyframes jcg-ring { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(2.2);opacity:0} }
    @keyframes jcg-spin { to { transform: rotate(360deg); } }
    @keyframes jcg-fadeup { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } }
    .jcg-fadeup { animation: jcg-fadeup .3s ease; }
    .mobile-scope .jcg-row-press:active { background: #F0F3FA; }
    .mobile-scope .jcg-btn:active { transform: scale(0.98); }
  `;
  document.head.appendChild(s);
}

// Common icons
const Icon = {
  Search: ({size=18, color='currentColor'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/>
    </svg>
  ),
  Back: ({size=20, color='currentColor'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M15 6l-6 6 6 6"/>
    </svg>
  ),
  Check: ({size=18, color='currentColor', sw=2.5}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12l5 5 10-11"/>
    </svg>
  ),
  Camera: ({size=20, color='currentColor'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 8h3l2-3h8l2 3h3v11H3z"/><circle cx="12" cy="13" r="4"/>
    </svg>
  ),
  Clock: ({size=18, color='currentColor'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>
    </svg>
  ),
  Calendar: ({size=18, color='currentColor'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/>
    </svg>
  ),
  User: ({size=18, color='currentColor'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/>
    </svg>
  ),
  Video: ({size=20, color='currentColor'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="6" width="14" height="12" rx="2"/><path d="M16 10l6-3v10l-6-3z"/>
    </svg>
  ),
  Copy: ({size=16, color='currentColor'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 012-2h10"/>
    </svg>
  ),
  Close: ({size=18, color='currentColor'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 5l14 14M19 5L5 19"/>
    </svg>
  ),
  Refresh: ({size=16, color='currentColor'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 12a9 9 0 11-3-6.7L21 8"/><path d="M21 3v5h-5"/>
    </svg>
  ),
  ChevronRight: ({size=16, color='currentColor'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 6l6 6-6 6"/>
    </svg>
  ),
  Filter: ({size=16, color='currentColor'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 5h18l-7 9v6l-4-2v-4z"/>
    </svg>
  ),
  Dots: ({size=18, color='currentColor'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
      <circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/>
    </svg>
  ),
  Download: ({size=16, color='currentColor'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 4v12m0 0l-4-4m4 4l4-4M4 20h16"/>
    </svg>
  ),
  Logo: ({size=22}) => (
    <svg width={size} height={size} viewBox="0 0 40 40">
      <rect width="40" height="40" rx="9" fill={TOKENS.navy}/>
      <path d="M12 11h16v4H20v14h-4V15h-4z" fill="#fff"/>
      <circle cx="29" cy="29" r="3" fill={TOKENS.zoomBlue}/>
    </svg>
  ),
};

// Helpers
const initialsColor = (name) => {
  let h = 0;
  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) & 0xffffffff;
  const hues = [215, 225, 235, 245, 200, 210]; // stay within navy/blue family
  return `hsl(${hues[Math.abs(h) % hues.length]}, 40%, 42%)`;
};

const Avatar = ({ name, initials, size = 40, mono = false }) => (
  <div style={{
    width: size, height: size, borderRadius: size/2,
    background: mono ? TOKENS.navy : initialsColor(name),
    color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontWeight: 600, fontSize: size * 0.38, flexShrink: 0, letterSpacing: 0.3,
  }}>{initials || name[0]}</div>
);

const Badge = ({ children, tone = 'info' }) => {
  const map = {
    info: { bg: TOKENS.blueSoft, fg: TOKENS.navy },
    ok: { bg: TOKENS.okSoft, fg: TOKENS.ok },
    warn: { bg: TOKENS.warnSoft, fg: TOKENS.warn },
    danger: { bg: TOKENS.dangerSoft, fg: TOKENS.danger },
    mute: { bg: '#EDF0F5', fg: TOKENS.slate },
  };
  const { bg, fg } = map[tone] || map.info;
  return (
    <span style={{
      background: bg, color: fg, fontSize: 11, fontWeight: 600,
      padding: '3px 8px', borderRadius: 100, letterSpacing: 0.2,
      display: 'inline-flex', alignItems: 'center', gap: 4, whiteSpace: 'nowrap',
    }}>{children}</span>
  );
};

const PrimaryBtn = ({ children, onClick, disabled, style = {}, tone = 'primary' }) => {
  const bg = disabled ? '#B6BECD' : tone === 'zoom' ? TOKENS.zoomBlue : TOKENS.navy;
  return (
    <button className="jcg-btn" onClick={onClick} disabled={disabled} style={{
      width: '100%', padding: '16px 18px', borderRadius: 14,
      background: bg, color: '#fff', border: 'none',
      fontSize: 16, fontWeight: 600, letterSpacing: 0.1,
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      cursor: disabled ? 'not-allowed' : 'pointer',
      boxShadow: disabled ? 'none' : '0 1px 2px rgba(11,37,69,0.2), 0 4px 12px rgba(11,37,69,0.12)',
      transition: 'transform .1s, box-shadow .1s, background .15s',
      ...style,
    }}>{children}</button>
  );
};

const SecondaryBtn = ({ children, onClick, style = {} }) => (
  <button className="jcg-btn" onClick={onClick} style={{
    width: '100%', padding: '14px 18px', borderRadius: 14,
    background: '#fff', color: TOKENS.navy, border: `1.5px solid ${TOKENS.line}`,
    fontSize: 15, fontWeight: 600,
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    cursor: 'pointer', transition: 'all .12s',
    ...style,
  }}>{children}</button>
);

// App header bar — used on all screens
const HeaderBar = ({ title, subtitle, onBack, right, tight = false }) => (
  <div style={{
    background: TOKENS.white,
    borderBottom: `1px solid ${TOKENS.line}`,
    padding: tight ? '10px 16px' : '14px 16px',
    display: 'flex', alignItems: 'center', gap: 12,
    flexShrink: 0,
  }}>
    {onBack ? (
      <button onClick={onBack} style={{
        width: 36, height: 36, borderRadius: 10, border: 'none',
        background: '#F5F7FB', display: 'flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer', color: TOKENS.navy, flexShrink: 0,
      }}><Icon.Back /></button>
    ) : (
      <Icon.Logo size={36} />
    )}
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 15, fontWeight: 700, color: TOKENS.navyInk, letterSpacing: -0.1, lineHeight: 1.2 }}>{title}</div>
      {subtitle && <div style={{ fontSize: 12, color: TOKENS.slate, marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{subtitle}</div>}
    </div>
    {right}
  </div>
);

// Meeting info card (reused across screens)
const MeetingCard = ({ meeting, compact = false }) => (
  <div style={{
    background: `linear-gradient(135deg, ${TOKENS.navy} 0%, ${TOKENS.navy2} 100%)`,
    color: '#fff', borderRadius: 16, padding: compact ? 14 : 18,
    position: 'relative', overflow: 'hidden',
  }}>
    <div style={{
      position: 'absolute', top: -30, right: -30, width: 120, height: 120,
      borderRadius: 60, background: 'rgba(45,140,255,0.15)',
    }} />
    <div style={{ position: 'relative' }}>
      <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: 1.5, opacity: 0.7, textTransform: 'uppercase' }}>
        Zoom Meeting · {meeting.sessionLabel}
      </div>
      <div style={{ fontSize: compact ? 16 : 18, fontWeight: 700, marginTop: 6, letterSpacing: -0.2, lineHeight: 1.3 }}>
        {meeting.title}
      </div>
      <div style={{ display: 'flex', gap: 14, marginTop: 12, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, opacity: 0.92 }}>
          <Icon.Calendar size={14} color="rgba(255,255,255,0.85)"/>
          <span>{meeting.date}</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, opacity: 0.92 }}>
          <Icon.Clock size={14} color="rgba(255,255,255,0.85)"/>
          <span>{meeting.time}</span>
        </div>
      </div>
    </div>
  </div>
);

// Default meeting
const DEFAULT_MEETING = {
  title: 'Rapat Koordinasi GM & Supervisor',
  date: 'Selasa, 21 Apr 2026',
  time: '09.00 – 10.30 WIB',
  sessionLabel: 'Sesi 04',
  host: 'The Jakarta Consulting Group',
  meetingId: '892 4417 0316',
  passcode: 'jcg2026',
};

Object.assign(window, {
  TOKENS, Icon, Avatar, Badge,
  PrimaryBtn, SecondaryBtn, HeaderBar, MeetingCard, DEFAULT_MEETING,
  initialsColor,
});