/* ============================================================
   chrome.jsx — StatusBar + CommentFeed
   ============================================================ */
const { useRef, useEffect } = React;

const STAT_META = [
  { key: "hp",     name: "健康", icon: "❤️" },
  { key: "hunger", name: "饱腹", icon: "🍞" },
  { key: "sanity", name: "精神", icon: "🧠" },
  { key: "supply", name: "水分", icon: "💧" },
];

function StatusBar({ day, maxDay, stats, pack, floats, flashSlot }) {
  return (
    <div className="topbar">
      <div className="day-block">
        <div className="day-label">DAY {day} / {maxDay}</div>
        <div className="day-dots">
          {Array.from({ length: maxDay }).map((_, i) => {
            const n = i + 1;
            const cls = n < day ? "done" : n === day ? "cur" : "";
            return <div key={i} className={"day-dot " + cls} />;
          })}
        </div>
      </div>

      <div className="stats-block">
        {STAT_META.map((m) => {
          const v = stats[m.key];
          const pct = Math.max(0, Math.min(100, v));
          const myFloats = floats.filter((f) => f.stat === m.key);
          return (
            <div key={m.key} className={"stat " + m.key + (v <= 20 ? " low" : "")}>
              <div className="stat-top">
                <span className="stat-name">{m.icon} {m.name}</span>
                <span className="stat-val">{Math.round(v)}</span>
              </div>
              <div className="bar"><div className="fill" style={{ width: pct + "%" }} /></div>
              {myFloats.map((f) => (
                <span key={f.id} className={"float-num " + (f.delta >= 0 ? "up" : "down")}>
                  {f.delta >= 0 ? "+" + f.delta : f.delta}
                </span>
              ))}
            </div>
          );
        })}
      </div>

      <div className="pack-block">
        <div className="pack-label">背包 {pack.length}/6</div>
        <div className="pack-grid">
          {Array.from({ length: 6 }).map((_, i) => {
            const it = pack[i];
            return (
              <div key={i}
                className={"pack-slot " + (it ? "filled " : "") + (flashSlot === i ? "flash" : "")}>
                {it ? it.icon : ""}
                {it && it.qty > 1 ? <span className="qty">{it.qty}</span> : null}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function CommentFeed({ comments, viewers, likes, inputHot, chatBanner, isViewer, viewerChatVal, viewerSetChatVal, viewerSendComment }) {
  const listRef = useRef(null);
  useEffect(() => {
    if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
  }, [comments]);

  return (
    <div className="chat-col">
      <div className="chat-head">
        <div className="streamer-av">🎮</div>
        <div className="streamer-meta">
          <div className="streamer-name">荒原阿陈 <span className="live-tag">LIVE</span></div>
          <div className="viewers">👁 <b>{viewers.toLocaleString()}</b> 观看 · ❤️ {(likes || 0).toLocaleString()}</div>
        </div>
      </div>

      {chatBanner && (
        <div className={"chat-banner " + chatBanner.type}>{chatBanner.text}</div>
      )}

      <div className="chat-list" ref={listRef}>
        {comments.map((c) => (
          <div key={c.id}
            className={"cmt " + (c.mod ? "mod " : "") + (c.gift ? "gift " : "") +
              (c.adopted ? "adopted " : "") + (c.system ? "system " : "") +
              (c.merged ? "merged " : "") + (c.flash ? "flash" : "")}>
            <div className="c-av">{c.av}</div>
            <div className="c-body">
              <div className="c-name">{c.user}
                {c.dup > 1 && <span className="dup-badge">×{c.dup}</span>}
              </div>
              <div className="c-text">{c.text}</div>
              {c.adopted && <div className="adopt-tag">✓ 已融入游戏世界</div>}
              {c.merged && <div className="merge-tag">🔁 重复刷屏已合并 · 不计入采纳</div>}
            </div>
          </div>
        ))}
      </div>

      <div className={"chat-input " + (inputHot ? "hot" : "") + (isViewer ? " viewer" : "")}>
        <div className="chat-guide">🎮 {isViewer ? "发评论影响游戏世界" : "这片大陆会回应你的声音"}</div>
        <div className="input-row">
          {isViewer ? (
            <input value={viewerChatVal || ""} onChange={e => viewerSetChatVal && viewerSetChatVal(e.target.value)}
              placeholder="说点什么…和主播一起创造世界"
              onKeyDown={e => e.key === 'Enter' && viewerSendComment && viewerSendComment()}
              style={{ flex: 1, background: '#0c0a1c', border: '2px solid var(--line)', color: 'var(--txt)',
                fontFamily: 'var(--body)', fontSize: 'var(--t-sm)', padding: '11px 12px', outline: 'none' }} />
          ) : (
            <div className="input-fake">
              {inputHot ? "🎮 你的创意将出现在游戏中…" : "说点什么…"}
            </div>
          )}
          <div className="input-send" onClick={isViewer ? viewerSendComment : undefined}
            style={isViewer ? { cursor: 'pointer' } : undefined}>➤</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StatusBar, CommentFeed });