/* 发送页 SendScreen —— 郑重地把这片鳞送出去。导出 window.WL.SendScreen */
(function () {
  function SendScreen({ draft, onBack, onSend }) {
    const NS = window.U4e07U9cdeWU00e0nlU00ednDesignSystem_56bec1 || {};
    const { Button, IconButton, ScaleChip, Dialog } = NS;
    const D = window.WL_DATA;
    const [confirm, setConfirm] = React.useState(false);
    const clothImg = (k) => (D.cloths.find((c) => c.key === k) || {}).img;

    return (
      <div style={{ position: "relative", minHeight: "100%", display: "flex", flexDirection: "column", background: "var(--surface-page)" }}>
        <div style={{ padding: "18px 24px" }}>
          <IconButton aria-label="返回" variant="ghost" onClick={onBack}>
            <i data-lucide="arrow-left"></i>
          </IconButton>
        </div>

        <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", padding: "0 24px 64px", gap: 24 }}>
          <span style={{ font: "var(--type-kicker)", textTransform: "uppercase", letterSpacing: "var(--tracking-widest)", color: "var(--text-accent)" }}>就要交给龙了</span>

          <ScaleChip img={clothImg(draft.cloth)} size={172} rotate={-2} joined />

          <p style={{ font: "var(--fw-regular) var(--text-2xl)/1.8 var(--font-hand)", color: "var(--text-strong)", maxWidth: 560, textWrap: "balance", margin: 0 }}>
            “{draft.text || "——"}”
          </p>
          <span style={{ font: "var(--type-body-sm)", color: "var(--text-muted)" }}>
            {draft.author || "佚名"}{draft.place ? " · 来自 " + draft.place : ""}
          </span>

          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12, marginTop: 8 }}>
            <Button variant="primary" size="lg" onClick={() => setConfirm(true)}>
              系上龙身
            </Button>
            <span style={{ font: "var(--type-meta)", color: "var(--text-faint)" }}>送出后,全网都能在龙身上点开这句话</span>
          </div>
        </div>

        <Dialog open={confirm} onClose={() => setConfirm(false)} title="把这片鳞系上龙身?"
          footer={<>
            <Button variant="ghost" onClick={() => setConfirm(false)}>再想想</Button>
            <Button variant="primary" onClick={() => { setConfirm(false); onSend(); }}>系上去</Button>
          </>}>
          像龙族万鳞甲那样,每个人献出自己的一片鳞,系上同一条龙。送出后不可更改,这句话会长久留在龙身上。
        </Dialog>
      </div>
    );
  }
  window.WL = window.WL || {};
  window.WL.SendScreen = SendScreen;
})();