/* Panels — 顶栏(亲密度/称号)、状态计量条、手绘小图标 */

/* —— 手绘小图标 —— */
function HeartIcon({ filled, size = 13 }) {
  return (
    <svg
      className="hb"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      aria-hidden="true"
    >
      <path
        d="M12 21S3.5 14.6 3.5 8.9C3.5 6 5.8 4 8.3 4c1.7 0 3 .9 3.7 2.2C12.7 4.9 14 4 15.7 4c2.5 0 4.8 2 4.8 4.9C20.5 14.6 12 21 12 21z"
        fill={filled ? "#e8746a" : "none"}
        stroke="#2a2018"
        strokeWidth="2"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function MeterIcon({ kind }) {
  const stroke = "#2a2018";
  if (kind === "energy")
    return (
      <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true">
        <path
          d="M13 2 4 14h6l-1 8 9-12h-6l1-8z"
          fill="#93a86a"
          stroke={stroke}
          strokeWidth="1.8"
          strokeLinejoin="round"
        />
      </svg>
    );
  if (kind === "fullness")
    return (
      <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true">
        <path
          d="M3 11h18c0 5-4 8-9 8s-9-3-9-8z"
          fill="#e0a637"
          stroke={stroke}
          strokeWidth="1.8"
          strokeLinejoin="round"
        />
        <path
          d="M2 11h20"
          stroke={stroke}
          strokeWidth="1.8"
          strokeLinecap="round"
        />
      </svg>
    );
  // mood
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" aria-hidden="true">
      <circle
        cx="12"
        cy="12"
        r="9"
        fill="#efa6ac"
        stroke={stroke}
        strokeWidth="1.8"
      />
      <circle cx="9" cy="10" r="1.2" fill={stroke} />
      <circle cx="15" cy="10" r="1.2" fill={stroke} />
      <path
        d="M8.5 14c1 1.4 5 1.4 6 0"
        fill="none"
        stroke={stroke}
        strokeWidth="1.8"
        strokeLinecap="round"
      />
    </svg>
  );
}

function FoodIcon({ glyph }) {
  const s = "#2a2018";
  if (glyph === "fish")
    return (
      <svg className="food-ico" viewBox="0 0 32 32" aria-hidden="true">
        <path
          d="M5 16c4-6 14-7 19-2 2 2 3 0 5-2-1 4-1 4 0 8-2-2-3-4-5-2-5 5-15 4-19-2z"
          fill="#dfe6ef"
          stroke={s}
          strokeWidth="2"
          strokeLinejoin="round"
        />
        <circle cx="11" cy="15" r="1.4" fill={s} />
      </svg>
    );
  if (glyph === "can")
    return (
      <svg className="food-ico" viewBox="0 0 32 32" aria-hidden="true">
        <rect
          x="7"
          y="9"
          width="18"
          height="16"
          rx="3"
          fill="#e8a06a"
          stroke={s}
          strokeWidth="2"
        />
        <ellipse
          cx="16"
          cy="9"
          rx="9"
          ry="3"
          fill="#f3c79a"
          stroke={s}
          strokeWidth="2"
        />
        <path
          d="M11 16h10"
          stroke={s}
          strokeWidth="1.6"
          strokeLinecap="round"
        />
      </svg>
    );
  if (glyph === "freeze")
    return (
      <svg className="food-ico" viewBox="0 0 32 32" aria-hidden="true">
        <rect
          x="9"
          y="6"
          width="14"
          height="20"
          rx="3"
          fill="#f6ead0"
          stroke={s}
          strokeWidth="2"
        />
        <circle cx="14" cy="12" r="1.6" fill="#c98a52" />
        <circle cx="18" cy="17" r="1.6" fill="#c98a52" />
        <circle cx="14" cy="21" r="1.6" fill="#c98a52" />
      </svg>
    );
  // cup
  return (
    <svg className="food-ico" viewBox="0 0 32 32" aria-hidden="true">
      <path
        d="M8 11h14v8a6 6 0 0 1-6 6h-2a6 6 0 0 1-6-6z"
        fill="#bcd8a8"
        stroke={s}
        strokeWidth="2"
        strokeLinejoin="round"
      />
      <path
        d="M22 13h3a3 3 0 0 1 0 6h-3"
        fill="none"
        stroke={s}
        strokeWidth="2"
      />
      <path
        d="M12 5c-1 2 1 2 0 4M16 5c-1 2 1 2 0 4"
        fill="none"
        stroke={s}
        strokeWidth="1.6"
        strokeLinecap="round"
      />
    </svg>
  );
}

/* —— 顶栏 —— */
function TopBar({ intimacy, beijingTime, onMailbox, unread }) {
  const st = window.PET.intimacyState(intimacy);
  const hearts = Array.from({ length: 5 }, (_, i) => i < st.lv);
  return (
    <header className="topbar">
      <div className="avatar">
        <img src="./assets/action-frames/cute/frame-01.png" alt="社畜小猫" />
      </div>
      <div className="id-block">
        <div className="id-line">
          <span className="pet-name">社畜小猫</span>
          <span className="lv-pill">Lv.{st.lv}</span>
        </div>
        <div className="title-row">
          <span className="title-text">{st.title}</span>
          <span className="time-pill" title="北京时间">
            {beijingTime || "--:--"}
          </span>
          <span className="heart-row">
            {hearts.map((f, i) => (
              <HeartIcon key={i} filled={f} />
            ))}
          </span>
        </div>
        <div
          className="intimacy-bar"
          title={
            st.next
              ? `距离「${st.next.title}」还差 ${st.toNext}`
              : "已是最高亲密度"
          }
        >
          <div
            className="intimacy-fill"
            style={{ width: Math.round(st.ratio * 100) + "%" }}
          ></div>
        </div>
      </div>
      <button className="icon-btn" onClick={onMailbox} aria-label="信箱">
        <svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true">
          <rect
            x="3"
            y="6"
            width="18"
            height="13"
            rx="2.5"
            fill="#fff7e6"
            stroke="#2a2018"
            strokeWidth="2"
          />
          <path
            d="M4 8l8 6 8-6"
            fill="none"
            stroke="#2a2018"
            strokeWidth="2"
            strokeLinejoin="round"
          />
        </svg>
        {unread > 0 ? <span className="badge">{unread}</span> : null}
      </button>
    </header>
  );
}

/* —— 状态计量条 —— */
function Meters({ energy, fullness, mood }) {
  const rows = [
    { kind: "energy", v: energy, label: "能量" },
    { kind: "fullness", v: fullness, label: "饱腹" },
    { kind: "mood", v: mood, label: "心情" },
  ];
  return (
    <div className="meters">
      {rows.map((r) => (
        <div
          className={`meter ${r.kind} ${r.v < 25 ? "is-low" : ""}`}
          key={r.kind}
          title={`${r.label} ${Math.round(r.v)}`}
        >
          <span className="m-ico">
            <MeterIcon kind={r.kind} />
          </span>
          <span className="m-track">
            <span
              className="m-fill"
              style={{ width: Math.max(4, Math.min(100, r.v)) + "%" }}
            ></span>
          </span>
        </div>
      ))}
    </div>
  );
}

/* —— 场景切换 —— */
function SceneToggle({ scene, onScene }) {
  return (
    <div className="scene-toggle" role="tablist" aria-label="场景">
      <button
        className={scene === "office" ? "on" : ""}
        onClick={() => onScene("office")}
      >
        公司
      </button>
      <button
        className={scene === "home" ? "on" : ""}
        onClick={() => onScene("home")}
      >
        家
      </button>
    </div>
  );
}

/* —— 场景道具 —— */
function SceneSets() {
  return (
    <React.Fragment>
      <div className="scene-set scene-office" aria-hidden="true">
        <div className="prop p-window"></div>
        <div className="prop p-plant"></div>
        <div className="prop p-board">
          <i></i>
          <i></i>
          <i></i>
        </div>
      </div>
      <div className="scene-set scene-home" aria-hidden="true">
        <div className="prop p-lamp"></div>
        <div className="prop p-frame"></div>
        <div className="prop p-rug"></div>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, {
  TopBar,
  Meters,
  SceneToggle,
  SceneSets,
  HeartIcon,
  FoodIcon,
});