/* Mailbox — 等待与惊喜:回来时的明信片弹窗 + 信箱历史 */

function effChips(effect) {
  effect = effect || {};
  const chips = [];
  if (effect.energy) chips.push({ t: `能量 +${effect.energy}`, c: "" });
  if (effect.fullness)
    chips.push({ t: `饱腹 +${effect.fullness}`, c: "honey" });
  if (effect.mood) chips.push({ t: `心情 +${effect.mood}`, c: "coral" });
  if (effect.intimacy)
    chips.push({ t: `亲密度 +${effect.intimacy}`, c: "coral" });
  return chips;
}

/* 回来时弹出的明信片(可能有多张,翻页领取)*/
function SurpriseModal({ cards, onClaim }) {
  const [i, setI] = React.useState(0);
  if (!cards || !cards.length) return null;
  const card = cards[i];
  const stamp = window.PET.STICKERS[card.stamp];
  const last = i >= cards.length - 1;

  return (
    <div className="scrim">
      <div className="postcard">
        <div
          className="pc-stamp"
          style={{ backgroundImage: `url(${stamp})` }}
        ></div>
        <div className="pc-kicker">
          {card.kind === "exploration"
            ? "小猫出门 · 互联网来信"
            : "趁你不在 · 小猫日志"}
        </div>
        <h2 className="pc-title">{card.title}</h2>
        <p className="pc-body">{card.body}</p>
        {card.sourceTitle ? (
          <div className="pc-source">
            <span>{card.topic || "互联网发现"}</span>
            {card.sourceUrl ? (
              <a href={card.sourceUrl} target="_blank" rel="noreferrer">
                {card.sourceTitle}
              </a>
            ) : (
              <em>{card.sourceTitle}</em>
            )}
          </div>
        ) : null}
        <div className="pc-effects">
          {effChips(card.effect).map((c, k) => (
            <span className={`pc-eff ${c.c}`} key={k}>
              {c.t}
            </span>
          ))}
        </div>
        <button
          className="pc-btn"
          onClick={() => {
            if (last) onClaim();
            else setI(i + 1);
          }}
        >
          {last ? "收下啦,谢谢小猫 ♥" : "下一张 →"}
        </button>
        {cards.length > 1 ? (
          <div className="pc-dot-nav">
            {cards.map((_, k) => (
              <i key={k} className={k === i ? "on" : ""}></i>
            ))}
          </div>
        ) : null}
      </div>
    </div>
  );
}

/* 信箱历史 */
function Mailbox({ items, onClose }) {
  return (
    <div className="scrim" onClick={onClose}>
      <div className="mailbox" onClick={(e) => e.stopPropagation()}>
        <div className="mailbox-head">
          <h3>小猫信箱</h3>
          <button
            className="icon-btn"
            onClick={onClose}
            aria-label="关闭"
            style={{ width: 36, height: 36 }}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true">
              <path
                d="M6 6l12 12M18 6L6 18"
                stroke="#2a2018"
                strokeWidth="2.4"
                strokeLinecap="round"
              />
            </svg>
          </button>
        </div>
        <div className="mailbox-list">
          {items && items.length ? (
            items
              .slice()
              .reverse()
              .map((it) => (
                <div className="mail-item" key={it.at}>
                  <div
                    className="mi-stamp"
                    style={{
                      backgroundImage: `url(${window.PET.STICKERS[it.stamp]})`,
                    }}
                  ></div>
                  <div>
                    {it.kind === "exploration" ? (
                      <div className="mi-kicker">小猫探索 · {it.topic}</div>
                    ) : null}
                    <div className="mi-title">{it.title}</div>
                    <div className="mi-body">{it.body}</div>
                    {it.sourceTitle ? (
                      <div className="mi-source">
                        {it.sourceUrl ? (
                          <a
                            href={it.sourceUrl}
                            target="_blank"
                            rel="noreferrer"
                          >
                            来源: {it.sourceTitle}
                          </a>
                        ) : (
                          <span>来源: {it.sourceTitle}</span>
                        )}
                      </div>
                    ) : null}
                  </div>
                </div>
              ))
          ) : (
            <div className="mail-empty">
              还没有明信片~
              <br />
              离开一会儿再回来,小猫会留言给你。
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SurpriseModal, Mailbox });