/* 问问神龙 DivineScreen —— 心里默念一个问题，向上抛掷一对信杯(陀螺仪)。
   两片月牙信杯：一面平(正·陰)、一面凸(反·陽)，立体翻滚、上抛下落，各自落定。
   只示「正 / 反」之象——其意，问者自知，神龙不点破。
   手机：向上抛/晃(devicemotion)；桌面/无传感器：点「掷杯」。导出 window.WL.DivineScreen */
(function () {
  // 一片建模的月牙信杯：flat=正面(平)、conv=反面(凸)。toss: '' | 'wl-toss-zheng' | 'wl-toss-fan'
  function Bei({ toss, delay, label }) {
    return (
      <div className="wl-bei-wrap">
        <div className={"wl-bei " + (toss || "")} style={{ animationDelay: (delay || 0) + "ms" }}>
          <div className="wl-bei-face wl-bei-flat"><span className="wl-bei-cut"></span></div>
          <div className="wl-bei-face wl-bei-conv"><span className="wl-bei-glow"></span></div>
        </div>
        <div className={"wl-bei-sh " + (toss ? "wl-sh-go" : "")} style={{ animationDelay: (delay || 0) + "ms" }}></div>
        {label && <span className="wl-bei-label">{label}</span>}
      </div>
    );
  }

  function DivineScreen({ onClose, onWrite }) {
    const NS = window.U4e07U9cdeWU00e0nlU00ednDesignSystem_56bec1 || {};
    const { Button, IconButton } = NS;
    const [phase, setPhase] = React.useState("ask");   // ask | ready | tossing | result
    const [faces, setFaces] = React.useState(null);    // ['zheng'|'fan', 'zheng'|'fan']
    const [hint, setHint] = React.useState("双手捧起手机，向上一抛");
    const lastToss = React.useRef(0);
    const phaseRef = React.useRef(phase);
    React.useEffect(() => { phaseRef.current = phase; }, [phase]);

    function toss() {
      if (phaseRef.current === "tossing") return;
      const now = Date.now();
      if (now - lastToss.current < 1600) return;
      lastToss.current = now;
      setFaces([Math.random() < 0.5 ? "zheng" : "fan", Math.random() < 0.5 ? "zheng" : "fan"]);
      setPhase("tossing");
      setTimeout(() => setPhase("result"), 1450);
    }

    React.useEffect(() => {
      if (phase !== "ready") return;
      function onMotion(e) {
        const ag = e.acceleration && e.acceleration.x != null ? e.acceleration : null;
        const g = e.accelerationIncludingGravity;
        var mag, thr;
        if (ag) { mag = Math.sqrt((ag.x || 0) * (ag.x || 0) + (ag.y || 0) * (ag.y || 0) + (ag.z || 0) * (ag.z || 0)); thr = 16; }
        else if (g) { mag = Math.sqrt((g.x || 0) * (g.x || 0) + (g.y || 0) * (g.y || 0) + (g.z || 0) * (g.z || 0)); thr = 27; }
        else return;
        if (mag > thr) toss();
      }
      window.addEventListener("devicemotion", onMotion);
      return () => window.removeEventListener("devicemotion", onMotion);
    }, [phase]);

    async function begin() {
      try {
        if (typeof DeviceMotionEvent !== "undefined" && typeof DeviceMotionEvent.requestPermission === "function") {
          const p = await DeviceMotionEvent.requestPermission();
          setHint(p === "granted" ? "双手捧起手机，向上一抛" : "点下方「掷杯」也行");
        } else {
          setHint("手机上向上抛一下；电脑上点「掷杯」");
        }
      } catch (e) { setHint("点下方「掷杯」"); }
      setPhase("ready");
    }

    const tossing = phase === "tossing" || phase === "result";
    const tc = (i) => tossing && faces ? (faces[i] === "fan" ? "wl-toss-fan" : "wl-toss-zheng") : "";
    const fc = (f) => f === "zheng" ? "正" : "反";
    let headline = "";
    if (phase === "result" && faces) {
      const z = faces.filter((x) => x === "zheng").length;
      headline = z === 2 ? "两 面 皆 正" : (z === 0 ? "两 面 皆 反" : "一 正 一 反");
    }

    const overlay = { 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) 76%, transparent)", backdropFilter: "blur(5px)", animation: "wlFade var(--dur-base) var(--ease-out)" };
    const card = { position: "relative", width: "100%", maxWidth: 440, background: "var(--surface-card)", borderRadius: "var(--radius-xl)", borderTop: "2px dashed var(--stitch)", boxShadow: "var(--shadow-lg)", padding: "34px 26px 28px", textAlign: "center" };
    const kicker = { font: "var(--type-kicker)", textTransform: "uppercase", letterSpacing: "var(--tracking-widest)", color: "var(--text-accent)" };

    const Pair = (
      <div className="wl-bei-stage">
        <Bei toss={tc(0)} delay={0} label={phase === "result" && faces ? fc(faces[0]) : null} />
        <Bei toss={tc(1)} delay={150} label={phase === "result" && faces ? fc(faces[1]) : null} />
      </div>
    );

    return (
      <div className="wl-divine" onClick={onClose} style={overlay}>
        <div onClick={(e) => e.stopPropagation()} style={card}>
          <div style={{ position: "absolute", top: 12, right: 12 }}>
            <IconButton aria-label="关闭" variant="ghost" onClick={onClose}><i data-lucide="x"></i></IconButton>
          </div>

          {phase === "ask" && (
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
              <span style={kicker}>问问神龙 · 掷信杯</span>
              <h2 style={{ font: "var(--type-title)", color: "var(--text-strong)", margin: 0 }}>心中有问，便来问龙</h2>
              <p style={{ font: "var(--type-body)", color: "var(--text-muted)", maxWidth: 320, margin: "2px 0 0", lineHeight: 1.9 }}>
                闭上眼，在心里默念你的问题——<br />只你与龙知道。<br />想好了，把手机向上轻轻一抛。
              </p>
              <Button variant="primary" size="lg" onClick={begin} iconLeft={<i data-lucide="sparkles" style={{ width: 18, height: 18 }}></i>}>请杯</Button>
            </div>
          )}

          {(phase === "ready" || phase === "tossing") && (
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
              <span style={kicker}>诚心默念，向上一抛</span>
              {Pair}
              <p style={{ font: "var(--type-body-sm)", color: "var(--text-muted)", maxWidth: 300, margin: 0, minHeight: 36 }}>
                {phase === "tossing" ? "信杯腾空，落定中……" : hint}
              </p>
              <Button variant={phase === "tossing" ? "ghost" : "primary"} size="lg" disabled={phase === "tossing"} onClick={toss}>
                {phase === "tossing" ? "请稍候" : "掷杯"}
              </Button>
            </div>
          )}

          {phase === "result" && faces && (
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
              <span style={kicker}>杯 · 落定</span>
              {Pair}
              <h2 style={{ font: "var(--fw-semibold) 30px/1.2 var(--font-serif)", color: "var(--text-strong)", letterSpacing: "0.16em", margin: "4px 0 0" }}>
                {headline}
              </h2>
              <p style={{ font: "var(--type-body)", color: "var(--text-muted)", maxWidth: 320, margin: 0 }}>
                神龙不言，只示其象。<br />正反之意，你心自知。
              </p>
              <div style={{ display: "flex", gap: 10, marginTop: 6, flexWrap: "wrap", justifyContent: "center" }}>
                <Button variant="primary" size="md" onClick={() => { setFaces(null); setPhase("ready"); }}>再问一次</Button>
                <Button variant="ghost" size="md" onClick={() => onWrite && onWrite()} iconLeft={<i data-lucide="scissors" style={{ width: 16, height: 16 }}></i>}>为它缝一片</Button>
              </div>
            </div>
          )}
        </div>

        <style>{`
          .wl-bei-stage{display:flex;gap:34px;align-items:flex-end;justify-content:center;min-height:128px;perspective:760px}
          .wl-bei-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px}
          .wl-bei{position:relative;width:108px;height:62px;transform-style:preserve-3d;transform:rotateX(0deg);filter:drop-shadow(2px 5px 5px rgba(28,24,19,.32))}
          .wl-bei-face{position:absolute;inset:0;backface-visibility:hidden;border:2px solid #caa44a;box-sizing:border-box;
            border-radius:52% 52% 48% 48% / 66% 66% 40% 40%}
          /* 正面：平、矜持哑光，中一道刻线(月牙的平切口) */
          .wl-bei-flat{background:linear-gradient(168deg,#9c3724,#6d2516);box-shadow:inset 0 0 0 1px rgba(0,0,0,.22),inset 0 7px 15px rgba(0,0,0,.34),inset 0 -3px 8px rgba(255,210,170,.14)}
          .wl-bei-cut{position:absolute;left:17%;right:17%;top:52%;height:2.5px;transform:translateY(-50%);border-radius:3px;background:rgba(0,0,0,.32)}
          /* 反面：凸、圆鼓，顶部高光(月牙的隆起背) */
          .wl-bei-conv{transform:rotateX(180deg);background:#7a2a1a;overflow:hidden}
          .wl-bei-glow{position:absolute;inset:5%;border-radius:52% 52% 48% 48% / 66% 66% 40% 40%;background:radial-gradient(ellipse at 50% 30%,#dc6645,#8a3120 56%,#561d11 90%);box-shadow:inset 0 6px 13px rgba(255,228,190,.4)}
          .wl-bei-sh{width:84px;height:13px;border-radius:50%;background:radial-gradient(ellipse,rgba(28,24,19,.32),transparent 70%);margin-top:2px}
          .wl-bei-label{font:600 13px/1 var(--font-sans);letter-spacing:.26em;color:var(--text-accent)}
          @media (prefers-reduced-motion: no-preference){
            .wl-toss-zheng{animation:wlTossZheng 1.45s cubic-bezier(.34,.62,.28,1) both}
            .wl-toss-fan{animation:wlTossFan 1.45s cubic-bezier(.34,.62,.28,1) both}
            @keyframes wlTossZheng{
              0%{transform:translateY(0) rotateX(0) rotateZ(0)}
              40%{transform:translateY(-168px) rotateX(560deg) rotateZ(16deg)}
              68%{transform:translateY(-46px) rotateX(880deg) rotateZ(8deg)}
              100%{transform:translateY(0) rotateX(1080deg) rotateZ(0)}   /* 1080=3圈→正面(平)朝上 */
            }
            @keyframes wlTossFan{
              0%{transform:translateY(0) rotateX(0) rotateZ(0)}
              40%{transform:translateY(-168px) rotateX(620deg) rotateZ(-16deg)}
              68%{transform:translateY(-46px) rotateX(960deg) rotateZ(-8deg)}
              100%{transform:translateY(0) rotateX(1260deg) rotateZ(0)}   /* 1260=3.5圈→反面(凸)朝上 */
            }
            .wl-sh-go{animation:wlTossShadow 1.45s cubic-bezier(.34,.62,.28,1) both}
            @keyframes wlTossShadow{0%{opacity:.32;transform:scale(1)}40%{opacity:.08;transform:scale(.45)}68%{opacity:.18;transform:scale(.7)}100%{opacity:.32;transform:scale(1)}}
          }
        `}</style>
      </div>
    );
  }
  window.WL = window.WL || {};
  window.WL.DivineScreen = DivineScreen;
})();