/* =========================================================
   THÁCH THỨC LỤC ĐỊA MỚI — Shared + Cover/TOC/Map components
   ========================================================= */

const { useState, useRef, useEffect } = React;

/* ---------- shared bits ---------- */

function Eyebrow({ children, left }) {
  return <div className={"eyebrow" + (left ? " left" : "")}>{children}</div>;
}

function Ornament({ glyph = "ᛟ" }) {
  return (
    <div className="ornament">
      <span className="line"></span>
      <span className="glyph">{glyph}</span>
      <span className="line"></span>
    </div>
  );
}

function CharLink({ id, children, onJump, onHover, onLeave }) {
  return (
    <span
      className="charlink"
      onClick={(e) => { e.stopPropagation(); onJump && onJump(id); }}
      onMouseEnter={(e) => onHover && onHover(id, e)}
      onMouseLeave={() => onLeave && onLeave()}
    >
      {children}
    </span>
  );
}

/* ---------- cover ---------- */

function CoverFront() {
  return (
    <div className="cover cover-poster">
      <img className="cover-poster-img" src="assets/img/cover-poster.webp" alt="Thách Thức Lục Địa Mới — Vương Quốc Đột Phá" />
      <div className="cover-poster-meta">
        <div className="small">Quyển I · Bản blog · Sử thi gamification thời AI</div>
        <div className="meta">Anno Domini · MMXXVI</div>
      </div>
    </div>
  );
}

function CoverBack({ onJump }) {
  return (
    <div className="page-content">
      <div className="top">
        <Eyebrow left>Lời người chép sử</Eyebrow>
        <h2 style={{ marginTop: 6 }}>Trước khi bạn mở ra...</h2>
      </div>
      <div className="main" style={{ marginTop: 20 }}>
        <p className="lead">
          Có sáu loại người chơi trong vương quốc này: <CharLink id="aldric"  onJump={onJump}>vị lãnh chúa cũ</CharLink>,{" "}
          <CharLink id="brennon" onJump={onJump}>người cựu binh mắc kẹt</CharLink>,{" "}
          <CharLink id="kael"    onJump={onJump}>kẻ khai phá sương mù</CharLink>,{" "}
          <CharLink id="sora"    onJump={onJump}>tân thủ sinh ra trong Tân Địa</CharLink>,{" "}
          <CharLink id="heskel"  onJump={onJump}>kẻ giữ cổng</CharLink>, và <CharLink id="mentor" onJump={onJump}>vị thầy câm</CharLink>.
        </p>
        <p>
          Sách này nói về cả sáu — và cách bạn có thể là tất cả họ, lần lượt, trong cùng một đời người. Mỗi trang là một mảnh bản đồ. Mỗi nhân vật là một phiên bản có thể có của chính bạn — hoặc một bóng người bạn phải nhận ra để không bị mắc kẹt cùng họ.
        </p>
        <Ornament />
        <p className="small">Hãy đọc chậm. Cổng Lửa không hiện ra cho kẻ vội.</p>
      </div>
      <div className="bottom mt-auto">
        <p className="small">— Bản blog · viết tại Tháp Sương Mù, mùa Đông năm MMXXVI</p>
      </div>
    </div>
  );
}

/* ---------- TOC ---------- */

function TocItem({ entry, onJump }) {
  return (
    <>
      <li onClick={() => onJump(entry.page)}>
        <span className="ch-num">{entry.roman}</span>
        <span className="ch-title">{entry.label}</span>
        <span className="ch-dots"></span>
        <span className="ch-folio">tr. {entry.page + 1}</span>
      </li>
      {entry.subs && entry.subs.map((s, i) => (
        <li key={i} className="sub" onClick={() => onJump(s.page)}>
          <span className="ch-num">·</span>
          <span className="ch-title">{s.label}</span>
          <span className="ch-dots"></span>
          <span className="ch-folio">tr. {s.page + 1}</span>
        </li>
      ))}
    </>
  );
}

function TocLeft({ onJump }) {
  const half = TOC.slice(0, 3);
  return (
    <div className="page-content">
      <Eyebrow left>Mục lục — Phần I</Eyebrow>
      <h1 style={{ marginTop: 8 }}>Mục Lục</h1>
      <Ornament />
      <ol className="toc-list">
        {half.map(c => <TocItem key={c.chapter} entry={c} onJump={onJump} />)}
      </ol>
    </div>
  );
}

function TocRight({ onJump }) {
  const half = TOC.slice(3);
  return (
    <div className="page-content">
      <Eyebrow left>Mục lục — Phần II</Eyebrow>
      <h1 style={{ marginTop: 8, opacity: 0 }}>.</h1>
      <Ornament glyph="⚜" />
      <ol className="toc-list">
        {half.map(c => <TocItem key={c.chapter} entry={c} onJump={onJump} />)}
      </ol>
      <div className="mt-auto" style={{ paddingTop: 24 }}>
        <p className="small">Phụ lục A–E · Quest 30 ngày · Bảng thuật ngữ — trong ebook đầy đủ (link cuối trang)</p>
      </div>
    </div>
  );
}

/* ---------- MAP ---------- */
/* Bản đồ Cựu Địa (trái) <-> Cổng Lửa (giữa) <-> Tân Địa (phải) */

function MapLeft({ onJump, onPreviewHover, onPreviewLeave }) {
  return (
    <div className="page-content">
      <Eyebrow left>Atlas · Hai lục địa</Eyebrow>
      <h2 style={{ marginTop: 6 }}>Bản Đồ Vương Quốc</h2>
      <div className="map-wrap" style={{ marginTop: 14, flex: 1 }}>
        <svg className="map-svg" viewBox="0 0 400 300" preserveAspectRatio="none">
          {/* Cựu Địa background tint (left) */}
          <rect x="0" y="0" width="180" height="300" fill="rgba(176,133,52,0.06)" />
          {/* Tân Địa background tint (right) */}
          <rect x="220" y="0" width="180" height="300" fill="rgba(30,95,140,0.08)" />

          {/* Cựu Địa — mountains, fields, town */}
          <path d="M 20 220 L 50 160 L 80 200 L 110 140 L 140 200 L 170 180 Z"
                fill="none" stroke="#4a3a2a" strokeWidth="1.2"/>
          <text x="40" y="265" fontFamily="Cinzel" fontSize="13" fill="#4a3a2a">Thành Tarsen</text>
          <circle cx="80" cy="245" r="3.5" fill="#a8843a" />
          <text x="80" y="100" fontFamily="Cinzel" fontSize="13" fill="#7a2a22">Mỏ vàng phía Đông</text>
          <circle cx="155" cy="105" r="3.5" fill="#7a2a22" />
          <text x="14" y="178" fontFamily="Cinzel" fontSize="13" fill="#4a3a2a">Lò rèn cũ</text>
          <circle cx="55" cy="195" r="3.5" fill="#4a3a2a" />

          {/* Cổng Lửa — gate in middle */}
          <line x1="200" y1="40" x2="200" y2="260" stroke="#1E5F8C" strokeWidth="3"
                strokeDasharray="6 4" opacity="0.7"/>
          <rect x="190" y="120" width="20" height="80" rx="3"
                fill="rgba(30,95,140,0.18)" stroke="#1E5F8C" strokeWidth="1.5"/>
          <text x="200" y="32" textAnchor="middle" fontFamily="Cinzel" fontSize="15" fill="#1E5F8C" fontWeight="600">CỔNG LỬA</text>

          {/* Tân Địa — luminous forest, kingdoms, Cây Lửa */}
          <path d="M 240 230 Q 280 180 320 220 T 380 230" fill="none" stroke="#5C3A8C" strokeWidth="1.2" />
          <circle cx="280" cy="80" r="7" fill="#1D9E75" opacity="0.7"/>
          <text x="232" y="78" fontFamily="Cinzel" fontSize="13" fill="#1D9E75">Cây Lửa</text>
          <text x="236" y="160" fontFamily="Cinzel" fontSize="13" fill="#5C3A8C">Làng Korven</text>
          <circle cx="265" cy="170" r="3.5" fill="#5C3A8C" />
          <text x="290" y="123" fontFamily="Cinzel" fontSize="13" fill="#a86838">Thung Lũng Pha Lê</text>
          <circle cx="335" cy="135" r="3.5" fill="#a86838" />
          <text x="305" y="240" fontFamily="Cinzel" fontSize="13" fill="#4FB2D6">Vương Quốc Băng</text>
          <circle cx="355" cy="250" r="3.5" fill="#4FB2D6" />
        </svg>

        <div className="map-region-label cuu-dia">Cựu Địa</div>
        <div className="map-region-label tan-dia">Tân Địa</div>

        <div className="map-label" style={{ top: "82%", left: "5%" }}>Thành Tarsen</div>
        <div className="map-label small" style={{ top: "30%", left: "30%" }}>Mỏ vàng đã cạn</div>
        <div className="map-label small" style={{ top: "22%", left: "62%" }}>Cây Lửa</div>
        <div className="map-label small" style={{ top: "52%", left: "55%" }}>Làng Korven (kế toán)</div>
        <div className="map-label small" style={{ top: "78%", left: "75%" }}>V.Q. Aldoran (đóng băng)</div>

        <div className="map-compass">
          <div style={{ textAlign: "center" }}>
            <div style={{ fontSize: 18, fontWeight: 700 }}>✦</div>
            <div>BẮC</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function MapRight({ onJump, onPreviewHover, onPreviewLeave }) {
  return (
    <div className="page-content">
      <Eyebrow left>Atlas · Chú giải</Eyebrow>
      <h3 style={{ marginTop: 6 }}>Hai Lục Địa Không Quay Lại</h3>

      <div className="main" style={{ marginTop: 16 }}>
        <svg viewBox="0 0 320 200" style={{ width: "100%", height: "auto", maxHeight: 360 }}>
          {/* Cựu Địa side */}
          <ellipse cx="70" cy="100" rx="62" ry="76" fill="rgba(176,133,52,0.14)" stroke="#a8843a" strokeWidth="1.6"/>
          <text x="70" y="42" textAnchor="middle" fontFamily="Cinzel" fontSize="20" fill="#7a4a18" fontWeight="700">CỰU ĐỊA</text>
          <text x="70" y="64" textAnchor="middle" fontFamily="Cormorant Garamond" fontSize="14" fontStyle="italic" fill="#4a3a2a">Vàng đang cạn</text>
          <text x="70" y="110" textAnchor="middle" fontFamily="Cormorant Garamond" fontSize="13" fill="#4a3a2a">Aldric · Brennon</text>
          <text x="70" y="130" textAnchor="middle" fontFamily="Cormorant Garamond" fontSize="13" fill="#4a3a2a">Heskel</text>

          {/* Gate */}
          <rect x="153" y="74" width="14" height="68" fill="rgba(30,95,140,0.4)" stroke="#1E5F8C" strokeWidth="1.5"/>
          <text x="160" y="62" textAnchor="middle" fontFamily="Cinzel" fontSize="18" fill="#1E5F8C" fontWeight="700">CỔNG</text>
          <text x="160" y="162" textAnchor="middle" fontFamily="Cinzel" fontSize="14" fill="#1E5F8C">LỬA</text>

          {/* Tân Địa side */}
          <ellipse cx="250" cy="100" rx="62" ry="76" fill="rgba(92,58,140,0.14)" stroke="#5C3A8C" strokeWidth="1.6"/>
          <text x="250" y="42" textAnchor="middle" fontFamily="Cinzel" fontSize="20" fill="#3a2570" fontWeight="700">TÂN ĐỊA</text>
          <text x="250" y="64" textAnchor="middle" fontFamily="Cormorant Garamond" fontSize="14" fontStyle="italic" fill="#3a2570">Lửa Mới phát sáng</text>
          <text x="250" y="110" textAnchor="middle" fontFamily="Cormorant Garamond" fontSize="13" fill="#3a2570">Kael · Lyra · Sora</text>
          <text x="250" y="130" textAnchor="middle" fontFamily="Cormorant Garamond" fontSize="13" fill="#3a2570">Vị Thầy Câm (cả hai)</text>

          {/* arrows */}
          <path d="M 130 105 L 152 105" stroke="#4a3a2a" strokeWidth="1.6" markerEnd="url(#arrow)" />
          <defs>
            <marker id="arrow" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto">
              <polygon points="0 0, 7 3.5, 0 7" fill="#4a3a2a"/>
            </marker>
          </defs>
        </svg>

        <div className="callout principle-callout">
          <span className="callout-label">Nguyên Lý Con Chêm</span>
          Tiến bộ công nghệ không quay đầu. Cổng Lửa đã mở. Cựu Địa vẫn còn — nhưng vàng đang cạn. Người thắng không phải người giữ map cũ, mà là người biết <strong>nung lại vàng cũ thành dạng mới</strong>.
        </div>

        <p>
          Bấm để xem hồ sơ:{" "}
          <CharLink id="aldric"  onJump={() => onJump(9)}  onHover={onPreviewHover} onLeave={onPreviewLeave}>Aldric</CharLink>{" · "}
          <CharLink id="brennon" onJump={() => onJump(10)} onHover={onPreviewHover} onLeave={onPreviewLeave}>Brennon</CharLink>{" · "}
          <CharLink id="kael"    onJump={() => onJump(11)} onHover={onPreviewHover} onLeave={onPreviewLeave}>Kael</CharLink>{" · "}
          <CharLink id="sora"    onJump={() => onJump(12)} onHover={onPreviewHover} onLeave={onPreviewLeave}>Sora</CharLink>{" · "}
          <CharLink id="heskel"  onJump={() => onJump(13)} onHover={onPreviewHover} onLeave={onPreviewLeave}>Heskel</CharLink>{" · "}
          <CharLink id="mentor"  onJump={() => onJump(14)} onHover={onPreviewHover} onLeave={onPreviewLeave}>Vị Thầy Câm</CharLink>.
        </p>
      </div>
    </div>
  );
}

Object.assign(window, {
  Eyebrow, Ornament, CharLink,
  CoverFront, CoverBack,
  TocLeft, TocRight,
  MapLeft, MapRight,
});