// shared.jsx — common bits used across all screens

// iOS status bar styled to match grip dark theme
function StatusBar({ time = '9:41', tint = 'light' }) {
  const c = tint === 'light' ? '#fff' : '#000';
  return (
    <div className="ios-status">
      <span style={{paddingLeft: 4}}>{time}</span>
      <div className="right">
        <svg width="18" height="11" viewBox="0 0 19 12">
          <rect x="0" y="7.5" width="3.2" height="4.5" rx="0.7" fill={c}/>
          <rect x="4.8" y="5" width="3.2" height="7" rx="0.7" fill={c}/>
          <rect x="9.6" y="2.5" width="3.2" height="9.5" rx="0.7" fill={c}/>
          <rect x="14.4" y="0" width="3.2" height="12" rx="0.7" fill={c}/>
        </svg>
        <svg width="16" height="11" viewBox="0 0 17 12">
          <path d="M8.5 3.2C10.8 3.2 12.9 4.1 14.4 5.6L15.5 4.5C13.7 2.7 11.2 1.5 8.5 1.5C5.8 1.5 3.3 2.7 1.5 4.5L2.6 5.6C4.1 4.1 6.2 3.2 8.5 3.2Z" fill={c}/>
          <path d="M8.5 6.8C9.9 6.8 11.1 7.3 12 8.2L13.1 7.1C11.8 5.9 10.2 5.1 8.5 5.1C6.8 5.1 5.2 5.9 3.9 7.1L5 8.2C5.9 7.3 7.1 6.8 8.5 6.8Z" fill={c}/>
          <circle cx="8.5" cy="10.5" r="1.5" fill={c}/>
        </svg>
        <svg width="26" height="12" viewBox="0 0 27 13">
          <rect x="0.5" y="0.5" width="23" height="12" rx="3.5" stroke={c} strokeOpacity="0.4" fill="none"/>
          <rect x="2" y="2" width="20" height="9" rx="2" fill={c}/>
          <path d="M25 4.5V8.5C25.8 8.2 26.5 7.2 26.5 6.5C26.5 5.8 25.8 4.8 25 4.5Z" fill={c} fillOpacity="0.4"/>
        </svg>
      </div>
    </div>
  );
}

// agent avatar with consistent color per name
const AGENT_COLORS = {
  Bia: { bg: 'linear-gradient(135deg,#A78BDA,#7B5FBE)', solid: '#A78BDA' },
  Pi:  { bg: 'linear-gradient(135deg,#88C4E8,#4F8FBC)', solid: '#88C4E8' },
  Atlas: { bg: 'linear-gradient(135deg,#E0A561,#B8732A)', solid: '#E0A561' },
};
function AgentAvatar({ name = 'Bia', size = 36 }) {
  const c = AGENT_COLORS[name] || AGENT_COLORS.Bia;
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: c.bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'var(--display)', fontStyle: 'italic', fontWeight: 500,
      fontSize: size * 0.5, color: '#fff',
      flexShrink: 0,
    }}>{name[0]}</div>
  );
}

// Telegram-style header
function TelegramHeader({ name = 'Bia', sub = 'agent · grip-enabled', back = '←' }) {
  const c = AGENT_COLORS[name] || AGENT_COLORS.Bia;
  return (
    <div className="tg-head">
      <div className="tg-back">{back}</div>
      <AgentAvatar name={name} size={36} />
      <div className="tg-meta">
        <div className="name">{name}</div>
        <div className="status">{sub}</div>
      </div>
      <div className="tg-actions">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15.05 5A5 5 0 0 1 19 8.95M15.05 1A9 9 0 0 1 23 8.94m-1 7.98v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
      </div>
    </div>
  );
}

// Telegram message bubble
function TgMsg({ side = 'them', children, time, check }) {
  return (
    <div className={`tg-msg ${side}`}>
      {children}
      <span className="time">{time}{check && <span className="check">✓✓</span>}</span>
    </div>
  );
}

// Telegram input
function TgInput({ placeholder = 'Message' }) {
  return (
    <div className="tg-input">
      <div style={{color:'rgba(255,255,255,0.4)',fontSize:22}}>📎</div>
      <div className="field">{placeholder}</div>
      <div style={{color:'rgba(255,255,255,0.4)',fontSize:22}}>😊</div>
      <div className="mic">🎙</div>
    </div>
  );
}

// Tab bar (used on home, wads, activity, settings)
function TabBar({ active = 'home', onNav = () => {} }) {
  const items = [
    { id: 'home', label: 'home', icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 12l9-9 9 9M5 10v10a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V10"/></svg>
    )},
    { id: 'wads', label: 'wads', icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18M7 15h2"/></svg>
    )},
    { id: 'activity', label: 'activity', icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 12h4l3-8 4 16 3-8h4"/></svg>
    )},
    { id: 'settings', label: 'settings', icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1.07-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
    )},
  ];
  return (
    <div className="tabbar">
      {items.map(it => (
        <div key={it.id} className={`tab ${active === it.id ? 'active' : ''}`} onClick={() => onNav(it.id)}>
          {it.icon}
          <span className="label-tab">{it.label}</span>
        </div>
      ))}
    </div>
  );
}

// Day separator in chat
function TgDay({ children }) {
  return <div className="tg-day">{children}</div>;
}

// helper: typing indicator bubble
function TgTyping() {
  return (
    <div className="tg-msg them" style={{padding:'10px 14px'}}>
      <span style={{display:'inline-flex',gap:4,alignItems:'center'}}>
        {[0,1,2].map(i => (
          <span key={i} style={{
            width:6,height:6,borderRadius:'50%',background:'rgba(255,255,255,0.5)',
            animation:`typeBounce 1.2s ${i*0.15}s infinite`,
          }}/>
        ))}
      </span>
    </div>
  );
}

// global keyframes injection
(function injectKF(){
  if (document.getElementById('grippay-kf')) return;
  const s = document.createElement('style'); s.id='grippay-kf';
  s.textContent = `
    @keyframes typeBounce {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
      30% { transform: translateY(-4px); opacity: 1; }
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    @keyframes successPop {
      0% { transform: scale(0.8); opacity: 0; }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); opacity: 1; }
    }
  `;
  document.head.appendChild(s);
})();

Object.assign(window, {
  StatusBar, AgentAvatar, TelegramHeader, TgMsg, TgInput, TabBar, TgDay, TgTyping,
  AGENT_COLORS,
});