// demo-modal.jsx — skill detail overlay, connectfarm1.com content + terminal left/right layout.

const DemoModal = ({ skill, accent = "#00ff88", onClose, lang = "EN" }) => {
  const isCN = lang === "CN";
  const accentRGB = useMemo(() => hexToRgb(accent), [accent]);
  const [copied, setCopied] = useState(false);
  const tFrame = useFrame();

  const handleCopy = () => {
    navigator.clipboard.writeText(skill.install || "").then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    });
  };

  // Pulsing glow intensity for right panel
  const glowPulse = 0.18 + 0.12 * Math.sin(tFrame / 700);
  const barPulse = 0.5 + 0.5 * Math.abs(Math.sin(tFrame / 900));

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 1000,
      background: "rgba(0,0,0,0.84)",
      backdropFilter: "blur(8px)",
      display: "flex", alignItems: "center", justifyContent: "center",
      padding: 32,
      fontFamily: "Geist Mono, Roboto Mono, ui-monospace, monospace",
      animation: "fadeIn .18s",
    }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{
        width: "100%", maxWidth: 920,
        background: "#050807",
        border: `1px solid rgba(${accentRGB},0.35)`,
        boxShadow: `0 0 60px rgba(${accentRGB},${glowPulse}), 0 0 0 1px rgba(${accentRGB},0.1)`,
        color: "#e8f0ec",
        position: "relative",
        transition: "box-shadow .1s",
      }}>

        {/* Header bar */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          padding: "12px 20px",
          borderBottom: `1px solid rgba(${accentRGB},0.2)`,
          fontSize: 11, letterSpacing: "0.18em",
        }}>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <PulseDot color={accent} size={7} intensity={1.1} />
            <span style={{ color: accent }}>{skill.code} — {isCN ? skill.name_cn : skill.name}</span>
          </div>
          <button onClick={onClose} style={{
            background: "none", border: `1px solid rgba(${accentRGB},0.35)`,
            color: accent, padding: "4px 12px", cursor: "pointer",
            fontFamily: "inherit", fontSize: 11, letterSpacing: "0.18em",
          }}>CLOSE ✕</button>
        </div>

        {/* Body — left + right */}
        <div style={{ display: "grid", gridTemplateColumns: "1.55fr 1fr", minHeight: 400 }}>

          {/* LEFT — connectfarm1 content */}
          <div style={{ padding: "24px 28px", borderRight: `1px solid rgba(${accentRGB},0.15)` }}>

            {/* Tags */}
            <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginBottom: 18 }}>
              {skill.tags.map(t => (
                <span key={t} style={{
                  fontSize: 11, padding: "3px 9px",
                  border: `1px solid rgba(${accentRGB},0.45)`,
                  color: accent, letterSpacing: "0.1em",
                }}>{t}</span>
              ))}
            </div>

            {/* Name */}
            <div style={{
              fontSize: 26, fontWeight: 700, color: "#fff",
              letterSpacing: "-0.02em", lineHeight: 1.15, marginBottom: 10,
            }}>
              {isCN ? skill.name_cn : skill.name}
            </div>

            {/* Blurb + date */}
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 22, gap: 12 }}>
              <div style={{ fontSize: 13, color: "rgba(255,255,255,0.58)", lineHeight: 1.65, flex: 1 }}>
                {isCN ? skill.blurb_cn : skill.blurb}
              </div>
              <div style={{ fontSize: 11, color: `rgba(${accentRGB},0.6)`, whiteSpace: "nowrap", flexShrink: 0, paddingTop: 2 }}>
                {skill.deployed}
              </div>
            </div>

            {/* Divider */}
            <div style={{ borderTop: `1px solid rgba(${accentRGB},0.12)`, marginBottom: 20 }} />

            {/* NOTES */}
            <div style={{ marginBottom: 22 }}>
              <div style={{ fontSize: 10, color: accent, letterSpacing: "0.2em", marginBottom: 10, opacity: 0.7 }}>
                // NOTES
              </div>
              <div style={{
                borderLeft: `3px solid rgba(${accentRGB},0.5)`,
                paddingLeft: 14,
                fontSize: 12, color: "rgba(255,255,255,0.65)", lineHeight: 1.8,
              }}>
                {isCN && skill.notes_cn ? skill.notes_cn : skill.notes}
              </div>
            </div>

            {/* INSTALL */}
            <div>
              <div style={{ fontSize: 10, color: accent, letterSpacing: "0.2em", marginBottom: 8, opacity: 0.7 }}>
                // INSTALL
              </div>
              <div style={{
                background: "#020604",
                border: `1px solid rgba(${accentRGB},0.18)`,
                overflow: "hidden",
              }}>
                <div style={{
                  display: "flex", alignItems: "center", justifyContent: "space-between",
                  padding: "7px 12px",
                  background: "#0a100d",
                  borderBottom: `1px solid rgba(${accentRGB},0.1)`,
                }}>
                  <div style={{ display: "flex", gap: 6 }}>
                    <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#ff5f57", display: "inline-block" }} />
                    <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#febc2e", display: "inline-block" }} />
                    <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#28c840", display: "inline-block" }} />
                  </div>
                  <button onClick={handleCopy} style={{
                    background: copied ? `rgba(${accentRGB},0.15)` : "transparent",
                    border: `1px solid rgba(${accentRGB},${copied ? 0.5 : 0.22})`,
                    color: copied ? accent : "rgba(255,255,255,0.4)",
                    fontSize: 10, padding: "2px 9px", cursor: "pointer",
                    fontFamily: "inherit", letterSpacing: "0.14em",
                    transition: "all .15s",
                  }}>
                    {copied ? "COPIED ✓" : "COPY"}
                  </button>
                </div>
                <div style={{ padding: "12px 16px", fontSize: 12, color: accent, letterSpacing: "0.02em" }}>
                  $ {skill.install}
                </div>
              </div>
            </div>
          </div>

          {/* RIGHT — status + metric + pulse */}
          <div style={{ padding: "24px 22px", display: "flex", flexDirection: "column", gap: 20 }}>

            {/* Status */}
            <div>
              <div style={{ fontSize: 10, opacity: 0.5, letterSpacing: "0.2em", marginBottom: 8 }}>// STATUS</div>
              <div style={{ fontSize: 22, fontWeight: 700, color: accent, display: "flex", alignItems: "center", gap: 10 }}>
                <PulseDot color={accent} size={8} intensity={1.2} />
                {isCN ? "运行中" : "LIVE"}
              </div>
            </div>

            {/* Metric */}
            <div>
              <div style={{ fontSize: 10, opacity: 0.5, letterSpacing: "0.2em", marginBottom: 6 }}>// {skill.metric.label.toUpperCase()}</div>
              <div style={{ fontSize: 36, fontWeight: 700, color: accent, lineHeight: 1 }}>{skill.metric.value}</div>
            </div>

            {/* EQ pulse bars */}
            <div>
              <div style={{ fontSize: 10, opacity: 0.5, letterSpacing: "0.2em", marginBottom: 8 }}>// PULSE</div>
              <EQBars count={24} color={accent} height={38} intensity={barPulse} />
            </div>

            {/* Skill stats */}
            <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 10, fontSize: 11 }}>
              {[
                ["code", skill.code],
                ["deployed", skill.deployed],
                ["status", skill.status],
              ].map(([k, v]) => (
                <div key={k} style={{
                  display: "flex", justifyContent: "space-between",
                  borderBottom: `1px dashed rgba(${accentRGB},0.15)`,
                  paddingBottom: 6,
                }}>
                  <span style={{ opacity: 0.45 }}>{k}</span>
                  <span style={{ color: accent }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Footer */}
        <div style={{
          padding: "10px 20px", borderTop: `1px solid rgba(${accentRGB},0.15)`,
          fontSize: 10, opacity: 0.45, display: "flex", justifyContent: "space-between",
        }}>
          <span>{skill.tags.join(" · ")}</span>
          <span>{isCN ? "点击外部关闭" : "click outside to close"}</span>
        </div>
      </div>
    </div>
  );
};

window.DemoModal = DemoModal;