/* 读鳞页 ReaderScreen —— 点开一片鳞,读那个人的话。覆盖层。导出 window.WL.ReaderScreen */
(function () {
  function ReaderScreen({ scale, onClose, onStart }) {
    const NS = window.U4e07U9cdeWU00e0nlU00ednDesignSystem_56bec1 || {};
    const { Button, IconButton, ScaleChip, Badge, Avatar } = NS;
    const D = window.WL_DATA;
    if (!scale) return null;
    const clothImg = (k) => (D.cloths.find((c) => c.key === k) || {}).img;

    return (
      <div onClick={onClose} style={{
        position: "fixed", inset: 0, zIndex: "var(--z-overlay)",
        display: "flex", alignItems: "center", justifyContent: "center", padding: "var(--space-5)",
        background: "color-mix(in srgb, var(--ink-900) 62%, transparent)", backdropFilter: "blur(4px)",
        animation: "wlFade var(--dur-base) var(--ease-out)",
      }}>
        <div onClick={(e) => e.stopPropagation()} style={{
          position: "relative", width: "100%", maxWidth: 460,
          background: "var(--surface-card)", borderRadius: "var(--radius-xl)",
          borderTop: "2px dashed var(--stitch)", boxShadow: "var(--shadow-lg)",
          padding: "var(--space-8) var(--space-6) var(--space-6)", textAlign: "center",
          animation: "wlRise var(--dur-slow) var(--ease-thread)",
        }}>
          <div style={{ position: "absolute", top: 12, right: 12 }}>
            <IconButton aria-label="关闭" variant="ghost" onClick={onClose}><i data-lucide="x"></i></IconButton>
          </div>

          <div style={{ display: "flex", justifyContent: "center", marginTop: -56, marginBottom: 8 }}>
            <ScaleChip img={clothImg(scale.cloth)} cloth={scale.cloth} size={104} rotate={-3} joined />
          </div>

          <div style={{ display: "flex", justifyContent: "center", marginBottom: 16 }}>
            <Badge tone="brass">第 {scale.id.toLocaleString("zh-CN")} 片</Badge>
          </div>

          <p style={{ font: "var(--fw-regular) var(--text-xl)/1.85 var(--font-hand)", color: "var(--text-body)", textWrap: "balance" }}>
            “{scale.text}”
          </p>

          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, margin: "20px 0 24px" }}>
            <Avatar name={scale.author} size={34} />
            <span style={{ font: "var(--type-body-sm)", color: "var(--text-muted)" }}>
              {scale.author} · 来自 {scale.place} · {scale.t}
            </span>
          </div>

          <div className="wl-seam" style={{ margin: "0 0 20px" }}></div>

          <Button variant="primary" block size="lg" onClick={onStart}
            iconLeft={<i data-lucide="scissors" style={{ width: 18, height: 18 }}></i>}>
            我也缝一片
          </Button>
        </div>
        <style>{`@keyframes wlFade{from{opacity:0}to{opacity:1}}@keyframes wlRise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}`}</style>
      </div>
    );
  }
  window.WL = window.WL || {};
  window.WL.ReaderScreen = ReaderScreen;
})();