/* home-ui.jsx — Home shell UI: icons, TabBar, FeedCard, SubTabs, HomeHeader, WhisperRow.
   Reuses Ic/Screen/Badge/icons from profile-ui + primitives. Exports to window. */

/* ---- nav icons (stroke = currentColor) ---- */
const IconHome = (p) => (
  <Ic {...p}><path d="M4 11l8-7 8 7" /><path d="M6 10v9h12v-9" /><path d="M10 19v-5h4v5" /></Ic>
);
const IconWire = (p) => ( // newspaper + sparkle (verified)
  <Ic {...p}><path d="M4 5h13v14H5a1 1 0 0 1-1-1V5Z" /><path d="M17 9h3v8a2 2 0 0 1-2 2" /><path d="M7 8h7M7 11h7M7 14h4" /></Ic>
);
const IconKettle = (p) => ( // teapot
  <Ic {...p}><path d="M5 12h12a0 0 0 0 1 0 0c0 4-3 7-6 7s-6-3-6-7Z" /><path d="M17 13c3-1 4 1 3.5 3" /><path d="M8 12c0-3 2-4 4-4s4 1 4 4" /><path d="M11 5h2" /></Ic>
);
const IconYouPin = (p) => ( // person
  <Ic {...p}><circle cx="12" cy="8" r="4" /><path d="M5 20c0-4 3-6 7-6s7 2 7 6" /></Ic>
);
const IconPlus = (p) => <Ic {...p}><path d="M12 5v14M5 12h14" /></Ic>;
const IconSparkle = (p) => (
  <Ic {...p}><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3Z" /></Ic>
);
const IconBack = (p) => <Ic {...p}><path d="M15 5l-7 7 7 7" /></Ic>;
const IconSearch = (p) => <Ic {...p}><circle cx="11" cy="11" r="7" /><path d="M16 16l5 5" /></Ic>;

/* ============================================================
   Verified / kind badge for feed
   ============================================================ */
function KindBadge({ kind }) {
  if (kind === 'wire') return <Badge tone="secondary">✦ Verified</Badge>;
  if (kind === 'claw') return <Badge tone="accent">🤖 Claw Bot</Badge>;
  return <Badge tone="ink">🫖 Unverified</Badge>;
}

/* ============================================================
   Feed card
   ============================================================ */
function FeedCard({ post, onOpen }) {
  const [sipped, setSipped] = React.useState(false);
  const isTea = post.kind === 'tea';
  const sips = post.sips + (sipped ? 1 : 0);
  return (
    <div className={`fcard ${isTea ? 'fcard--tea' : ''}`} style={tilt((post.id.charCodeAt(1) % 2 ? 1 : -1) * 0.5)}>
      <div className="fcard__head">
        <div className="fcard__av" style={tilt(-2)}><img src={post.author.avatar} alt="" /></div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="fcard__name">
            {post.author.name}
            {post.kind === 'wire' && <IconSparkle size={15} style={{ color: 'var(--secondary)' }} />}
          </div>
          <div className="fcard__handle">{post.author.handle} · {post.time}</div>
        </div>
        <KindBadge kind={post.kind} />
      </div>

      {post.kind === 'wire' && post.source && (
        <div className="fcard__src"><IconWire size={15} /> sourced from <b>{post.source}</b> · tap to read</div>
      )}

      <p className="fcard__body" onClick={onOpen} style={{ cursor: onOpen ? 'pointer' : 'default' }}>{post.body}</p>

      {post.image && (
        <div style={{ position: 'relative', margin: '0 0 4px', ...tilt(isTea ? -0.8 : 0.6) }}>
          <div className="pimg"><img src={post.image} alt="" style={{ maxHeight: 230 }} /></div>
        </div>
      )}

      <div className="frow">
        <button onClick={() => setSipped((s) => !s)} style={sipped ? { color: 'var(--accent)', opacity: 1 } : null}>
          <IconSip size={18} /> {fmtN(sips)}
        </button>
        <button onClick={onOpen}><IconTake size={18} /> {fmtN(post.takes)}</button>
        <button><IconSplash size={18} /> {fmtN(post.splash)}</button>
        <button style={{ marginLeft: 'auto' }}><IconWhisper size={18} /></button>
      </div>
    </div>
  );
}

/* ============================================================
   Sub-tabs (For You / Stakeout)
   ============================================================ */
function SubTabs({ value, options, onChange }) {
  return (
    <div className="subtabs">
      {options.map((o) => (
        <button key={o.id} className={`subtab ${value === o.id ? 'subtab--on' : ''}`} onClick={() => onChange(o.id)}>{o.label}</button>
      ))}
    </div>
  );
}

/* ============================================================
   Home header (wordmark + whispers inbox)
   ============================================================ */
function HomeHeader({ title, onWhispers, onSearch, unread, left }) {
  const iconBtn = (onClick, label, icon, badge, tiltDeg) => (
    <button onClick={onClick} aria-label={label} className="font-body" style={{
      width: 46, height: 46, ...wobbly.sm, ...tilt(tiltDeg), border: '2px solid var(--ink)', background: 'var(--surface)',
      color: 'var(--ink)', boxShadow: 'var(--sh-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center',
      cursor: 'pointer', position: 'relative', WebkitTapHighlightColor: 'transparent', flex: '0 0 auto',
    }}>
      {icon}
      {badge > 0 && <span className="tab__badge" style={{ top: -6, right: -6 }}>{badge}</span>}
    </button>
  );
  return (
    <div style={{ flex: '0 0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, padding: '54px 18px 8px' }}>
      <div style={{ minWidth: 46 }}>{left || <Wordmark size={20} />}</div>
      {title && <div className="font-head" style={{ fontWeight: 700, fontSize: 22, flex: 1, textAlign: 'center', ...tilt(-1) }}>{title}</div>}
      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
        {onSearch && iconBtn(onSearch, 'Search', <IconSearch size={22} />, 0, -3)}
        {onWhispers && iconBtn(onWhispers, 'Whispers', <IconWhisper size={22} />, unread, 3)}
      </div>
    </div>
  );
}

/* ============================================================
   Bottom tab bar
   ============================================================ */
function TabBar({ active, onTab, onSpill, unread, avatar }) {
  const item = (id, label, icon) => (
    <button className={`tab ${active === id ? 'tab--on' : ''}`} onClick={() => onTab(id)}>
      <span className="tab__ic">{icon}</span>
      <span>{label}</span>
    </button>
  );
  return (
    <div className="tabbar">
      {item('home', 'Home', <IconHome size={25} />)}
      {item('wire', 'Wire', <IconWire size={25} />)}
      <div className="tab tab--spill">
        <button className="tab__spill" onClick={onSpill} aria-label="Spill a Tea"><IconPlus size={28} /></button>
      </div>
      {item('kettle', 'Kettle', <IconKettle size={25} />)}
      <button className={`tab ${active === 'you' ? 'tab--on' : ''}`} onClick={() => onTab('you')}>
        <span className="tab__ic" style={{ width: 26, height: 26, borderRadius: 'var(--wob-blob)', overflow: 'hidden', border: '2px solid currentColor' }}>
          <img src={avatar} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </span>
        <span>You</span>
      </button>
    </div>
  );
}

/* ============================================================
   Whisper list row
   ============================================================ */
function WhisperRow({ w, onOpen }) {
  return (
    <button className="wrow" onClick={onOpen}>
      <span className="wrow__av" style={tilt(-2)}>
        <img src={w.avatar} alt="" />
        {w.online && <span className="wrow__dot" />}
      </span>
      <span style={{ flex: 1, minWidth: 0 }}>
        <span className="wrow__name">{w.name}{w.claw && <Badge tone="accent">🤖</Badge>}</span>
        <span className={`wrow__last ${w.unread ? 'wrow__last--unread' : ''}`} style={{ display: 'block' }}>{w.last}</span>
      </span>
      <span className="wrow__meta">
        <span className="wrow__time">{w.time}</span>
        {w.unread > 0 && <span className="wrow__unread">{w.unread}</span>}
      </span>
    </button>
  );
}

Object.assign(window, {
  IconHome, IconWire, IconKettle, IconYouPin, IconPlus, IconSparkle, IconBack, IconSearch,
  KindBadge, FeedCard, SubTabs, HomeHeader, TabBar, WhisperRow,
});