/* Shared chrome: status bar, tab bar, common icons */

function StatusBar({ time = "9:41", dark }) {
  return (
    <div className="statusbar">
      <span>{time}</span>
      <span className="icons">
        {/* Signal */}
        <svg width="17" height="11" viewBox="0 0 17 11" fill="none">
          {[2,5,8,11].map((h,i)=>(
            <rect key={i} x={i*4} y={11-h} width="3" height={h} rx="0.5" fill="currentColor"/>
          ))}
        </svg>
        {/* Wifi */}
        <svg width="15" height="11" viewBox="0 0 15 11" fill="none">
          <path d="M7.5 1C4.5 1 2 2.5 0.5 4.3" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
          <path d="M7.5 4C5.7 4 4 4.9 3 6" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
          <circle cx="7.5" cy="9" r="1.3" fill="currentColor"/>
        </svg>
        {/* Battery */}
        <svg width="27" height="12" viewBox="0 0 27 12" fill="none">
          <rect x="0.5" y="0.5" width="22" height="11" rx="2.5" stroke="currentColor" opacity="0.5"/>
          <rect x="2" y="2" width="19" height="8" rx="1.5" fill="currentColor"/>
          <rect x="24" y="4" width="2" height="4" rx="1" fill="currentColor" opacity="0.5"/>
        </svg>
      </span>
    </div>
  );
}

function TabBar({ active = "explore", onChange }) {
  const tabs = [
    { id: "explore", label: "EXPLORE", icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <path d="M2 5 L8 3 L14 5 L20 3 L20 17 L14 19 L8 17 L2 19 Z" stroke="currentColor" strokeWidth="1.4" fill="none"/>
        <path d="M8 3 L8 17 M14 5 L14 19" stroke="currentColor" strokeWidth="1.4"/>
      </svg>
    )},
    { id: "contribute", label: "CONTRIBUTE", icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <path d="M11 2 L17 5 L17 11 C17 15 14.5 18 11 20 C7.5 18 5 15 5 11 L5 5 Z" stroke="currentColor" strokeWidth="1.4" fill="none"/>
        <path d="M8 11 L10.2 13.2 L14.4 8.6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    )},
    { id: "you", label: "YOU", icon: (
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <circle cx="11" cy="8" r="3.5" stroke="currentColor" strokeWidth="1.4"/>
        <path d="M3 19 C3 15 6.5 13 11 13 C15.5 13 19 15 19 19" stroke="currentColor" strokeWidth="1.4" fill="none"/>
      </svg>
    )},
  ];
  return (
    <div className="tabbar">
      {tabs.map(t => (
        <button key={t.id} data-active={t.id === active} onClick={() => onChange && onChange(t.id)}>
          {t.icon}
          <span>{t.label}</span>
          <span className="dot"></span>
        </button>
      ))}
    </div>
  );
}

function Pill({ tone, children, mono = true }) {
  return <span className="pill" data-tone={tone}>{children}</span>;
}

function Diff({ level }) {
  // 1=easy 2=med 3=adv
  return (
    <span className="diff">
      {[1,2,3].map(i => <i key={i} data-on={i <= level}/>)}
    </span>
  );
}

function Freshness({ daysAgo, max = 365 }) {
  const pct = Math.min(100, (daysAgo / max) * 100);
  let color;
  if (daysAgo < 60) color = 'var(--status-fresh)';
  else if (daysAgo < 180) color = 'var(--status-stale)';
  else color = 'oklch(0.62 0.14 25)';
  return (
    <div className="freshness" style={{'--fresh-pct': pct + '%', '--fresh-color': color}}/>
  );
}

Object.assign(window, { StatusBar, TabBar, Pill, Diff, Freshness });