// Worksherpa — shared primitives for Phase 2 screens.
// Loaded BEFORE any screen-*.jsx file. Exports primitives to window for cross-script sharing.

// ---------- iPhone 14 frame ----------
const Phone = ({ children, label }) => (
  <div className="phone-wrap" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
    {label && (
      <div style={{ fontFamily: '"JetBrains Mono", ui-monospace', fontSize: 11, color: '#828A9C', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
        {label}
      </div>
    )}
    <div
      className="phone-frame"
      style={{
        width: 412, height: 866,
        background: '#0a0a0a',
        borderRadius: 56,
        padding: 11,
        boxSizing: 'border-box',
        boxShadow: '0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 60px rgba(0,0,0,0.25), 0 12px 24px rgba(31,42,68,0.18)',
        position: 'relative',
      }}
    >
      <div
        style={{
          width: 390, height: 844,
          borderRadius: 47,
          overflow: 'hidden',
          background: '#FAF8F4',
          position: 'relative',
          fontFamily: '"DM Sans", system-ui, sans-serif',
          color: '#1F2A44',
        }}
      >
        {children}
      </div>
    </div>
  </div>
);

const StatusBar = ({ tone = 'dark' }) => {
  const color = tone === 'dark' ? '#1F2A44' : '#F5F3EF';
  return (
    <div style={{
      height: 47, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 24px', position: 'relative', flexShrink: 0,
    }}>
      <div style={{ fontWeight: 600, fontSize: 15, color, fontFamily: '"DM Sans"', letterSpacing: '-0.01em' }}>9:41</div>
      {/* Dynamic Island */}
      <div style={{
        position: 'absolute', left: '50%', top: 11, transform: 'translateX(-50%)',
        width: 124, height: 36, borderRadius: 22, background: '#000',
      }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, color }}>
        {/* signal */}
        <svg width="17" height="11" viewBox="0 0 17 11"><g fill={color}>
          <rect x="0" y="7" width="3" height="4" rx="1"/>
          <rect x="4.5" y="5" width="3" height="6" rx="1"/>
          <rect x="9" y="2.5" width="3" height="8.5" rx="1"/>
          <rect x="13.5" y="0" width="3" height="11" rx="1"/>
        </g></svg>
        {/* wifi */}
        <svg width="15" height="11" viewBox="0 0 15 11" fill={color}>
          <path d="M7.5 1 C3.6 1 1 3.4 0 5l1.5 1.5C2.5 5 4.7 3 7.5 3s5 2 6 3.5L15 5C14 3.4 11.4 1 7.5 1zm0 4 C5 5 3.5 6.5 3 7.5L4.5 9C5 8 6 7 7.5 7s2.5 1 3 2L12 7.5C11.5 6.5 10 5 7.5 5zm0 4 a1.5 1.5 0 100 3 1.5 1.5 0 000-3z"/>
        </svg>
        {/* battery */}
        <svg width="27" height="13" viewBox="0 0 27 13">
          <rect x="0" y="0" width="22" height="13" rx="3.5" fill="none" stroke={color} strokeOpacity="0.4"/>
          <rect x="2" y="2" width="18" height="9" rx="2" fill={color}/>
          <rect x="23" y="4" width="2" height="5" rx="1" fill={color} opacity="0.4"/>
        </svg>
      </div>
    </div>
  );
};

const HomeIndicator = ({ tone = 'dark' }) => (
  <div style={{
    position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)',
    width: 134, height: 5, borderRadius: 3,
    background: tone === 'dark' ? '#1F2A44' : '#F5F3EF',
  }}/>
);

// ---------- Common UI atoms ----------
const Btn = ({ kind = 'primary', size = 'md', children, full, style, ...p }) => {
  const sizes = {
    sm: { height: 40, padding: '0 16px', fontSize: 14, borderRadius: 8 },
    md: { height: 48, padding: '0 20px', fontSize: 16, borderRadius: 12 },
    lg: { height: 56, padding: '0 24px', fontSize: 16, borderRadius: 12 },
  };
  const kinds = {
    primary:     { background: '#F08A24', color: '#1F2A44', fontWeight: 600 },
    secondary:   { background: '#fff', color: '#1F2A44', fontWeight: 600, border: '1px solid #1F2A44' },
    destructive: { background: '#B23A2A', color: '#fff', fontWeight: 600 },
    ghost:       { background: 'transparent', color: '#1F2A44', fontWeight: 500 },
    'on-navy':   { background: '#F08A24', color: '#1F2A44', fontWeight: 600 },
  };
  return (
    <button
      {...p}
      style={{
        ...sizes[size], ...kinds[kind], display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        border: kinds[kind].border || 'none', cursor: 'pointer', fontFamily: '"DM Sans"', letterSpacing: '-0.01em',
        width: full ? '100%' : 'auto', ...style,
      }}
    >{children}</button>
  );
};

const Avatar = ({ initials, tone = 'navy', size = 44 }) => {
  const tones = {
    navy:  { background: '#1F2A44', color: '#F5F3EF' },
    amber: { background: '#F08A24', color: '#1F2A44' },
    cream: { background: '#F5F3EF', color: '#1F2A44', border: '1px solid #E5E1D8' },
  };
  return (
    <div style={{
      width: size, height: size, borderRadius: size / 2,
      ...tones[tone], display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: '"Bricolage Grotesque"', fontWeight: 600, fontSize: size * 0.36, flexShrink: 0,
    }}>{initials}</div>
  );
};

const Intent = ({ kind, small }) => {
  const map = {
    'new-business':    { label: 'New business',     bg: '#FCE6CC', fg: '#B5641A', dot: '#F08A24' },
    'complaint':       { label: 'Complaint',        bg: '#F4DDD7', fg: '#7E281C', dot: '#B23A2A' },
    'payment':         { label: 'Payment',          bg: '#D3E9EF', fg: '#0A5566', dot: '#0E7490' },
    'scheduling':      { label: 'Scheduling',       bg: '#F8EFD0', fg: '#7A5403', dot: '#CA8A04' },
    'general':         { label: 'General',          bg: '#EDEAE2', fg: '#4B5468', dot: '#828A9C' },
  };
  const c = map[kind];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: small ? '0 6px' : '0 8px', height: small ? 20 : 24,
      borderRadius: 6, background: c.bg, color: c.fg,
      fontSize: small ? 11 : 12, fontWeight: 600, letterSpacing: '-0.005em',
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 3, background: c.dot }} />
      {c.label}
    </span>
  );
};

const ChannelTag = ({ kind }) => {
  const map = {
    email: { label: 'Gmail', bg: '#FCE6CC', fg: '#B5641A' },
    sms:   { label: 'SMS',   bg: '#D3E9EF', fg: '#0A5566' },
    call:  { label: 'Call',  bg: '#E1EFE6', fg: '#1F5D3F' },
  };
  const c = map[kind];
  return (
    <span style={{
      fontFamily: '"JetBrains Mono"', fontSize: 10, textTransform: 'uppercase',
      letterSpacing: '0.06em', padding: '0 6px', height: 18, lineHeight: '18px',
      borderRadius: 4, background: c.bg, color: c.fg, fontWeight: 500, display: 'inline-block',
    }}>{c.label}</span>
  );
};

// Tab bar (bottom nav)
const TabBar = ({ active }) => {
  const tabs = [
    { id: 'today',     label: 'Today',     icon: 'today' },
    { id: 'customers', label: 'Customers', icon: 'people' },
    { id: 'add',       label: 'Add',       icon: 'plus' },
    { id: 'inbox',     label: 'Inbox',     icon: 'inbox' },
    { id: 'me',        label: 'Me',        icon: 'me' },
  ];
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0,
      background: '#1F2A44', borderTopLeftRadius: 0, borderTopRightRadius: 0,
      paddingTop: 8, paddingBottom: 26,
      display: 'flex', justifyContent: 'space-around',
    }}>
      {tabs.map((t) => {
        const isActive = t.id === active;
        const color = isActive ? '#F08A24' : 'rgba(245,243,239,0.55)';
        const isAdd = t.id === 'add';
        return (
          <div key={t.id} style={{
            flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
          }}>
            {isAdd ? (
              <div style={{
                width: 36, height: 36, borderRadius: 12, background: '#F08A24',
                display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: -10,
              }}>
                <svg width="18" height="18" viewBox="0 0 18 18">
                  <path d="M9 2v14M2 9h14" stroke="#1F2A44" strokeWidth="2.5" strokeLinecap="round"/>
                </svg>
              </div>
            ) : (
              <TabIcon kind={t.icon} color={color} />
            )}
            <div style={{ fontSize: 10, color, fontWeight: 600, letterSpacing: '-0.005em' }}>{t.label}</div>
          </div>
        );
      })}
    </div>
  );
};

const TabIcon = ({ kind, color }) => {
  const s = { width: 22, height: 22, fill: 'none', stroke: color, strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (kind === 'today') return (
    <svg {...s}><rect x="3" y="5" width="16" height="14" rx="2.5"/><path d="M3 9h16M8 3v4M14 3v4"/></svg>
  );
  if (kind === 'people') return (
    <svg {...s}><circle cx="8" cy="9" r="3"/><path d="M2 19c1-3 3.5-4 6-4s5 1 6 4"/><circle cx="16" cy="9" r="2.5"/><path d="M14 14c2 0 4 1 5 4"/></svg>
  );
  if (kind === 'inbox') return (
    <svg {...s}><rect x="3" y="4" width="16" height="14" rx="2.5"/><path d="M3 13h5l1 2h4l1-2h5"/></svg>
  );
  if (kind === 'me') return (
    <svg {...s}><circle cx="11" cy="8" r="3.5"/><path d="M4 19c1.5-3 4-4 7-4s5.5 1 7 4"/></svg>
  );
  return null;
};

// Generic icon helpers
const Icon = ({ kind, size = 20, color = '#1F2A44', strokeWidth = 1.8 }) => {
  const s = { width: size, height: size, fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (kind === 'search')  return <svg {...s}><circle cx="9" cy="9" r="6"/><path d="M14 14l5 5"/></svg>;
  if (kind === 'chevron') return <svg {...s}><path d="M8 5l7 7-7 7"/></svg>;
  if (kind === 'back')    return <svg {...s}><path d="M14 5l-7 7 7 7"/></svg>;
  if (kind === 'phone')   return <svg {...s}><path d="M5 4h3l2 5-2 1c1 2 3 4 5 5l1-2 5 2v3a2 2 0 01-2 2A14 14 0 013 6a2 2 0 012-2z"/></svg>;
  if (kind === 'mail')    return <svg {...s}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>;
  if (kind === 'pin')     return <svg {...s}><path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>;
  if (kind === 'mic')     return <svg {...s}><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0014 0M12 18v3M9 21h6"/></svg>;
  if (kind === 'check')   return <svg {...s}><path d="M5 12l5 5L19 7"/></svg>;
  if (kind === 'x')       return <svg {...s}><path d="M6 6l12 12M18 6L6 18"/></svg>;
  if (kind === 'edit')    return <svg {...s}><path d="M4 20h4l11-11-4-4L4 16v4z"/><path d="M14 6l4 4"/></svg>;
  if (kind === 'send')    return <svg {...s}><path d="M3 12l18-8-7 18-3-7-8-3z"/></svg>;
  if (kind === 'sparkle') return <svg {...s}><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/><path d="M6 6l3 3M15 15l3 3M18 6l-3 3M9 15l-3 3"/></svg>;
  if (kind === 'info')    return <svg {...s}><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 8v.5"/></svg>;
  if (kind === 'filter')  return <svg {...s}><path d="M4 5h16l-6 8v6l-4-2v-4z"/></svg>;
  return null;
};

const Logo = ({ size = 32 }) => (
  <img src="/mark-only.png" width={size} height={size} alt=""
    style={{ display: 'block', borderRadius: Math.round(size * 0.22) }} />
);

// Inject Google Fonts once (idempotent — id check)
if (typeof document !== 'undefined' && !document.getElementById('ws-fonts')) {
  const l = document.createElement('link');
  l.id = 'ws-fonts';
  l.rel = 'stylesheet';
  l.href = 'https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Mulish:wght@800;900&family=JetBrains+Mono:wght@400;500&display=swap';
  document.head.appendChild(l);
}

Object.assign(window, {
  Phone, StatusBar, HomeIndicator, TabBar,
  Btn, Avatar, Intent, ChannelTag, Icon, Logo,
});