/* Vision Demo pages — โหลดหลัง app.jsx (ใช้ navigate/NotFoundPage global) ก่อน pages-w3.jsx */
function VisionPage({ t, k, toast }) {
  const html = (window.VISION_HTML || {})[k];
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const on = (e) => {
      const g = e.target.closest("[data-go]");
      if (g) {
        const v = g.getAttribute("data-go");
        navigate(v === "dashboard" ? "/app" : v === "trades" ? "/app/trades" : "/app/vision/" + v);
        return;
      }
      if (e.target.closest(".vd-btn")) toast("◆ VISION DEMO — ฟีเจอร์นี้อยู่ใน roadmap · ข้อมูลเป็นตัวอย่าง");
    };
    el.addEventListener("click", on);
    return () => el.removeEventListener("click", on);
  }, [k]);
  React.useEffect(() => { window.scrollTo(0, 0); }, [k]);
  React.useEffect(() => {
    if (k !== "overview" || !ref.current) return;
    const MAP = { "AI Insight": "insight", "Tiltmeter": "tilt", "LINE / Telegram": "notify",
      "Verified Badge": "verified", "Leaderboard": "leaderboard", "Ranking": "ranking",
      "รีวิว EA / Tools": "tools", "Broker Review": "broker", "Economic Calendar": "calendar" };
    ref.current.querySelectorAll(".vd-card").forEach((c) => {
      const titles = [...c.querySelectorAll("div")].map((d) => d.textContent.trim());
      for (const t2 in MAP) {
        if (titles.indexOf(t2) !== -1) { c.setAttribute("data-go", MAP[t2]); c.style.cursor = "pointer"; break; }
      }
    });
    const tour = [...ref.current.querySelectorAll(".vd-btn")].find((b) => b.textContent.indexOf("เริ่มทัวร์") !== -1);
    if (tour) tour.setAttribute("data-go", "insight");
  }, [k]);
  if (!html) return <NotFoundPage t={t} />;
  return <div className="vision-wrap" ref={ref}>
    <div><span className="vbanner">✦ Roadmap · ข้อมูลจำลอง</span></div>
    <div dangerouslySetInnerHTML={{ __html: html }} />
  </div>;
}

/* VisionEmbed — ฝัง fragment ในหน้าแอปจริง (ใช้รวม AI Insight เข้าหน้าอินไซต์) */
function VisionEmbed({ k, toast }) {
  const html = (window.VISION_HTML || {})[k];
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const on = (e) => {
      const g = e.target.closest("[data-go]");
      if (g) { const v = g.getAttribute("data-go"); navigate(v === "dashboard" ? "/app" : v === "trades" ? "/app/trades" : "/app/vision/" + v); return; }
      if (e.target.closest(".vd-btn")) toast("◆ VISION DEMO — ฟีเจอร์นี้อยู่ใน roadmap · ข้อมูลเป็นตัวอย่าง");
    };
    el.addEventListener("click", on);
    return () => el.removeEventListener("click", on);
  }, [k]);
  if (!html) return null;
  return <div className="vision-wrap" ref={ref} style={{ marginTop: "var(--sp-6)" }}>
    <div><span className="vbanner">✦ Roadmap · ข้อมูลจำลอง</span></div>
    <div dangerouslySetInnerHTML={{ __html: html }} />
  </div>;
}

/* ---- การ์ด vision แทรกตามบริบทบนหน้าภาพรวม (มติคุณเอก) ---- */
function VChip() {
  return <span style={{ flex: "0 0 auto", fontSize: 10, fontWeight: 800, letterSpacing: ".6px", color: "var(--brand-strong)", background: "var(--brand-soft)", border: "1px solid var(--brand-edge)", borderRadius: "var(--radius-full)", padding: "3px 9px" }}>✦ VISION</span>;
}
function VCard({ to, style, children }) {
  return <div className="card" role="button" tabIndex={0} onClick={() => navigate(to)}
    onKeyDown={(e) => { if (e.key === "Enter") navigate(to); }}
    style={Object.assign({ cursor: "pointer", border: "1px solid var(--brand-edge)", boxShadow: "0 4px 16px rgba(109,59,240,.08)" }, style)}>{children}</div>;
}
function VisionAIStrip() {
  return <VCard to="/app/insights">
    <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
      <VChip />
      <div style={{ flex: "1 1 260px", minWidth: 0, fontSize: "var(--fs-body)" }}>
        <b>AI Insight:</b> คุณชนะ <b style={{ color: "var(--profit)" }}>75%</b> ที่ XAUUSD ช่วงลอนดอน แต่เสีย <b style={{ color: "var(--loss)" }}>80%</b> หลังเที่ยงคืน — หยุดเทรดหลัง 23:00 เดือนนี้พอร์ตจะ <b style={{ color: "var(--profit)" }}>+12%</b>
      </div>
      <span style={{ flex: "0 0 auto", color: "var(--brand-bright)", fontWeight: 700, fontSize: "var(--fs-caption)" }}>ดูอินไซต์ทั้ง 5 →</span>
    </div>
  </VCard>;
}
function VisionTiltCard() {
  return <VCard to="/app/vision/tilt">
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
      <b>Tiltmeter — วันนี้</b><VChip />
    </div>
    <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
      <span className="num" style={{ fontSize: 34, fontWeight: 800, color: "#e8912d", lineHeight: 1 }}>72</span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ height: 8, borderRadius: 99, background: "var(--brand-soft)", overflow: "hidden" }}>
          <div style={{ width: "72%", height: "100%", borderRadius: 99, background: "linear-gradient(90deg,#4bb98a,#fbbf24,#e0655c)" }} />
        </div>
        <div style={{ color: "var(--ink-mute)", fontSize: "var(--fs-micro)", marginTop: 5 }}>เริ่มร้อน · ค่าเฉลี่ย 7 วัน = 44 · แตะดูตัวประกอบ +39 แต้มวันนี้</div>
      </div>
    </div>
  </VCard>;
}
function VisionNewsCard() {
  return <VCard to="/app/vision/calendar">
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
      <b>ข่าวแรงถัดไป</b><VChip />
    </div>
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <span style={{ flex: "0 0 auto", fontSize: "var(--fs-caption)", fontWeight: 800, color: "var(--loss)", background: "#fdecef", border: "1px solid rgba(224,101,92,.3)", borderRadius: "var(--radius-full)", padding: "5px 11px" }}>อีก 45 นาที</span>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontWeight: 700 }}>Non-Farm Payrolls <span style={{ color: "var(--ink-mute)", fontWeight: 400 }}>USD · 19:30</span></div>
        <div style={{ color: "var(--ink-mute)", fontSize: "var(--fs-micro)" }}>Impact สูง — XAUUSD/US30 เหวี่ยงแรง · เตือนผ่าน LINE เปิดอยู่ ✓</div>
      </div>
    </div>
  </VCard>;
}
function VisionRankStrip() {
  return <VCard to="/app/vision/leaderboard">
    <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
      <VChip />
      <div style={{ flex: "1 1 240px", minWidth: 0 }}>
        <b>คุณอยู่อันดับ #7</b> จาก 2,847 พอร์ต · <b style={{ color: "var(--brand-bright)" }}>Top 18%</b> ของเทรดเดอร์ทั้งหมด
        <div style={{ height: 7, borderRadius: 99, background: "var(--brand-soft)", overflow: "hidden", marginTop: 7 }}>
          <div style={{ width: "82%", height: "100%", borderRadius: 99, background: "var(--brand-grad)" }} />
        </div>
      </div>
      <span style={{ flex: "0 0 auto", color: "var(--brand-bright)", fontWeight: 700, fontSize: "var(--fs-caption)" }}>ดู Leaderboard →</span>
    </div>
  </VCard>;
}