/* 写一句话页 WriteScreen —— 挑旧布 + 写那句话。导出 window.WL.WriteScreen */
(function () {
  function WriteScreen({ draft, setDraft, onBack, onNext }) {
    const NS = window.U4e07U9cdeWU00e0nlU00ednDesignSystem_56bec1 || {};
    const { Button, IconButton, Textarea, Input, ScaleChip, Card } = NS;
    const D = window.WL_DATA;
    const ready = draft.text.trim().length > 0;
    const clothImg = (k) => (D.cloths.find((c) => c.key === k) || {}).img;

    return (
      <div style={{ maxWidth: 880, margin: "0 auto", padding: "20px 24px 48px" }}>
        <style>{`.wl-write-grid{grid-template-columns:260px 1fr}@media(max-width:720px){.wl-write-grid{grid-template-columns:1fr}.wl-write-grid>:first-child{position:static!important;top:auto!important}}`}</style>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 22 }}>
          <IconButton aria-label="返回" variant="ghost" onClick={onBack}><i data-lucide="arrow-left"></i></IconButton>
          <h2 style={{ font: "var(--type-title)", color: "var(--text-strong)" }}>缝一片你的鳞</h2>
        </div>

        <div className="wl-write-grid" style={{ display: "grid", gap: 28, alignItems: "start" }}>
          {/* 实时预览 */}
          <Card elevation="md" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 16, position: "sticky", top: 20 }}>
            <span style={{ font: "var(--type-kicker)", textTransform: "uppercase", letterSpacing: "var(--tracking-widest)", color: "var(--text-muted)" }}>你这片鳞</span>
            <ScaleChip img={clothImg(draft.cloth)} size={120} rotate={-3} joined />
            <p style={{ font: "var(--type-written)", color: "var(--text-body)", textAlign: "center", minHeight: 56 }}>
              {draft.text || "把那句话写在这里…"}
            </p>
            <span style={{ font: "var(--type-meta)", color: "var(--text-faint)" }}>
              {draft.author ? draft.author : "佚名"}{draft.place ? " · " + draft.place : ""}
            </span>
          </Card>

          {/* 表单 */}
          <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            <div>
              <p style={{ font: "var(--type-label)", color: "var(--text-strong)", marginBottom: 12 }}>挑一块旧布</p>
              <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
                {D.cloths.map((c) => (
                  <div key={c.key} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
                    <ScaleChip img={c.img} cloth={c.key} size={56} rotate={0} selected={draft.cloth === c.key}
                      onClick={() => setDraft({ ...draft, cloth: c.key })} />
                    <span style={{ font: "var(--type-meta)", color: draft.cloth === c.key ? "var(--text-strong)" : "var(--text-muted)" }}>{c.name}</span>
                  </div>
                ))}
              </div>
            </div>

            <Textarea label="写给龙的一句话" maxLength={40} rows={3}
              placeholder="奶奶的旧蓝布衫,缝在龙身上——她说龙会记得。"
              value={draft.text} onChange={(e) => setDraft({ ...draft, text: e.target.value })} />

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <Input label="署名(可不填)" placeholder="昵称" value={draft.author}
                onChange={(e) => setDraft({ ...draft, author: e.target.value })} />
              <Input label="来自" placeholder="城市" icon={<i data-lucide="map-pin" style={{ width: 16, height: 16 }}></i>}
                value={draft.place} onChange={(e) => setDraft({ ...draft, place: e.target.value })} />
            </div>

            <Button variant="primary" size="lg" block disabled={!ready} onClick={onNext}
              iconRight={<i data-lucide="arrow-right" style={{ width: 18, height: 18 }}></i>}>
              {ready ? "看看我的鳞片" : "先写一句话"}
            </Button>
          </div>
        </div>
      </div>
    );
  }
  window.WL = window.WL || {};
  window.WL.WriteScreen = WriteScreen;
})();