// pages.jsx — route page components for saraslot
// Loaded after games.jsx, before app.jsx.

const { useState: useStateP } = React;

/* ─────────────────────────────────────────────────────────────
   Mock data
   ──────────────────────────────────────────────────────────── */
const MOCK_PRODUCTS = [
  { id: "p01", name: "GOLDEN DRAGON",      tagline: "Hand-painted scatter slot — 8 reels, 96.5% RTP.",  price: "RM 88",  badge: "NEW", hue: 38 },
  { id: "p02", name: "NEON RACER",         tagline: "Cyber-arcade reels with x500 multiplier loops.",   price: "RM 168", badge: "HOT", hue: 200 },
  { id: "p03", name: "JADE EMPRESS",       tagline: "Imperial 5x4 grid, free-spin coin trail bonus.",   price: "RM 128", badge: null,  hue: 150 },
  { id: "p04", name: "TIGER REBORN",       tagline: "Cluster-pays mahjong tiger, daily jackpot drop.",  price: "RM 198", badge: "NEW", hue: 14 },
  { id: "p05", name: "BLACK PEARL",        tagline: "Deep-sea adventure, wild expanding pearls.",       price: "RM 108", badge: null,  hue: 280 },
  { id: "p06", name: "SAKURA STORM",       tagline: "Petal-fall reels with re-spin bloom feature.",     price: "RM 78",  badge: "HOT", hue: 330 },
  { id: "p07", name: "CRYPTO VAULT",       tagline: "Stacked-symbol heist game, hold & win frames.",    price: "RM 158", badge: null,  hue: 110 },
  { id: "p08", name: "PHOENIX FORTUNE",    tagline: "Rebirth wilds, 4-tier jackpot ladder.",            price: "RM 228", badge: "NEW", hue: 22 },
];

const MOCK_TRANSACTIONS = [
  { id: "16162085179", type: "WITHDRAW",  amount: 307.66, currency: "MYR", bank: "MAYBANK",    accountName: "Sara Lee",   accountNo: "10926135",   method: "Manual",         status: "COMPLETED", ts: "13 May 2026 7:59PM" },
  { id: "16161582035", type: "DEPOSIT",   amount: 30.00,  currency: "MYR", bank: "DUITNOW",    accountName: "Sara Lee",   accountNo: "—",          method: "Online",         status: "COMPLETED", ts: "13 May 2026 6:44PM" },
  { id: "16161546489", type: "FORFEITED", amount: -0.10,  currency: "MYR", bank: null,         accountName: null,         accountNo: null,         method: null,             status: "COMPLETED", ts: "13 May 2026 6:39PM", remarks: "Player Clear Balance" },
  { id: "16161523018", type: "BONUS",     amount: 2.40,   currency: "MYR", bank: null,         accountName: null,         accountNo: null,         method: null,             status: "COMPLETED", ts: "13 May 2026 6:35PM", remarks: "HOURLY FREE CREDIT 365" },
  { id: "16161520047", type: "FORFEITED", amount: -1.20,  currency: "MYR", bank: null,         accountName: null,         accountNo: null,         method: null,             status: "COMPLETED", ts: "13 May 2026 6:31PM", remarks: "Player Clear Balance" },
  { id: "16161482219", type: "DEPOSIT",   amount: 150.00, currency: "MYR", bank: "CIMB",       accountName: "Sara Lee",   accountNo: "—",          method: "Online",         status: "COMPLETED", ts: "13 May 2026 5:48PM" },
  { id: "16161421008", type: "WITHDRAW",  amount: 88.00,  currency: "MYR", bank: "CIMB",       accountName: "Sara Lee",   accountNo: "76554120",   method: "Manual",         status: "PENDING",   ts: "13 May 2026 4:12PM" },
  { id: "16161330912", type: "BONUS",     amount: 5.00,   currency: "MYR", bank: null,         accountName: null,         accountNo: null,         method: null,             status: "COMPLETED", ts: "13 May 2026 2:50PM", remarks: "DAILY CHECK-IN" },
  { id: "16161210055", type: "DEPOSIT",   amount: 50.00,  currency: "MYR", bank: "PUBLIC",     accountName: "Sara Lee",   accountNo: "—",          method: "Online",         status: "COMPLETED", ts: "13 May 2026 1:09PM" },
  { id: "16161099201", type: "WITHDRAW",  amount: 240.00, currency: "MYR", bank: "MAYBANK",    accountName: "Sara Lee",   accountNo: "10926135",   method: "Manual",         status: "COMPLETED", ts: "12 May 2026 11:33PM" },
  { id: "16160880014", type: "BONUS",     amount: 8.80,   currency: "MYR", bank: null,         accountName: null,         accountNo: null,         method: null,             status: "COMPLETED", ts: "12 May 2026 9:22PM",  remarks: "WEEKEND RELOAD" },
  { id: "16160712455", type: "DEPOSIT",   amount: 200.00, currency: "MYR", bank: "MAYBANK",    accountName: "Sara Lee",   accountNo: "—",          method: "Online",         status: "COMPLETED", ts: "12 May 2026 8:01PM" },
];

const MOCK_BETS = [
  { id: "B-901223", game: "GOLDEN DRAGON",   provider: "Pragmatic", stake: 5.00,  payout: 27.50,  ts: "13 May 2026 6:38PM", result: "WIN"  },
  { id: "B-901219", game: "NEON RACER",      provider: "PG Soft",   stake: 10.00, payout: 0.00,   ts: "13 May 2026 6:34PM", result: "LOSE" },
  { id: "B-901207", game: "JADE EMPRESS",    provider: "JILI",      stake: 2.00,  payout: 18.00,  ts: "13 May 2026 6:21PM", result: "WIN"  },
  { id: "B-901192", game: "TIGER REBORN",    provider: "Spadegaming",stake: 8.00, payout: 0.00,   ts: "13 May 2026 5:50PM", result: "LOSE" },
  { id: "B-901180", game: "SAKURA STORM",    provider: "Habanero",  stake: 1.00,  payout: 4.20,   ts: "13 May 2026 5:12PM", result: "WIN"  },
  { id: "B-901159", game: "BLACK PEARL",     provider: "Pragmatic", stake: 6.00,  payout: 12.00,  ts: "13 May 2026 4:34PM", result: "WIN"  },
  { id: "B-901144", game: "CRYPTO VAULT",    provider: "Hacksaw",   stake: 4.00,  payout: 0.00,   ts: "13 May 2026 3:08PM", result: "LOSE" },
  { id: "B-901101", game: "PHOENIX FORTUNE", provider: "PG Soft",   stake: 12.00, payout: 88.00,  ts: "13 May 2026 1:42PM", result: "WIN"  },
];

const MOCK_PROMOS = [
  { id: "wel",  percent: "50%", title: "WELCOME BONUS",     body: "Boost your first deposit with extra chips to win more.",      tags: ["ALL SLOTS", "NEW MEMBER", "NO LIVE GAME"] },
  { id: "day",  percent: "20%", title: "DAILY BONUS",       body: "Get daily refresh and increase your chances to win.",        tags: ["ALL SLOTS", "DAILY", "NO LIVE GAME"] },
  { id: "wkd",  percent: "30%", title: "WEEKEND BONUS",     body: "Join us every Saturday and Sunday for more fun and rewards.",tags: ["ALL SLOTS", "WEEKEND", "NO LIVE GAME"] },
  { id: "unl",  percent: "10%", title: "UNLIMITED BONUS",   body: "Enjoy unlimited slot bonuses with fast deposits and payouts.",tags: ["ALL SLOTS", "UNLIMITED", "NO LIVE GAME"] },
  { id: "fish", percent: "5%",  title: "TEMBAK IKAN BONUS", body: "Enjoy 5% bonus on every fish-shooter session.",               tags: ["FISH", "DAILY"] },
];

const MOCK_PROFILE = {
  username: "SARA888",
  name: "SARA LEE",
  phone: "60126668888",
  balance: "MYR 0.00",
  bank: { name: "Maybank Berhad", accountNo: "10926135", holder: "Sara Lee", bsb: "0625", payId: "0126668888" },
  email: "sara888@saraslot.my",
};

const MOCK_CHAT_INTRO = {
  ways: [
    { label: "SMS Register",      href: "#" },
    { label: "WhatsApp Register", href: "#" },
    { label: "Tukar Kata Laluan", href: "#" },
    { label: "Withdraw",          href: "#" },
  ],
  deposit: ["online", "ewallet", "telcopin"],
  contacts: [
    { label: "WhatsApp", value: "+60 12-666-8888" },
    { label: "Telegram", value: "@saraslot_my" },
    { label: "Line",     value: "saraslot.my" },
  ],
  sites: ["sara888.asia", "saraslot.org"],
};

/* ─────────────────────────────────────────────────────────────
   HomePage — extracts the legacy homepage body
   ──────────────────────────────────────────────────────────── */
function HomePage({ theme }) {
  return (
    <div className="page page-home">
      <HeroCarousel theme={theme} />
      <MarqueeStrip />
      <FeatureCardRow theme={theme} />
      <ReferralBar theme={theme} />
      <TopHotGames theme={theme} />
      <ProviderSection theme={theme} />
    </div>
  );
}
window.HomePage = HomePage;

/* ─────────────────────────────────────────────────────────────
   ShopPage — the new "♀ NEW" landing
   ──────────────────────────────────────────────────────────── */
function ProductThumb({ p }) {
  const hue = p.hue ?? 38;
  return (
    <div className="shop-thumb" style={{ "--thumb-hue": hue }}>
      <svg viewBox="0 0 120 160" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
        <defs>
          <linearGradient id={`g-${p.id}`} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0"   stopColor={`hsl(${hue}, 80%, 58%)`} />
            <stop offset=".55" stopColor={`hsl(${(hue + 25) % 360}, 70%, 30%)`} />
            <stop offset="1"   stopColor={`hsl(${(hue + 60) % 360}, 75%, 14%)`} />
          </linearGradient>
          <radialGradient id={`r-${p.id}`} cx=".5" cy=".4" r=".5">
            <stop offset="0" stopColor="rgba(255,255,255,.5)" />
            <stop offset="1" stopColor="rgba(255,255,255,0)" />
          </radialGradient>
        </defs>
        <rect x="0" y="0" width="120" height="160" fill={`url(#g-${p.id})`} />
        <circle cx="40" cy="48" r="44" fill={`url(#r-${p.id})`} />
        <g opacity=".25" stroke="#fff" strokeWidth="1" fill="none">
          <circle cx="60" cy="80" r="50" />
          <circle cx="60" cy="80" r="38" />
          <circle cx="60" cy="80" r="26" />
        </g>
        <text x="60" y="92" textAnchor="middle" fill="rgba(255,255,255,.92)" fontSize="14" fontWeight="800" fontFamily="var(--font-display)" letterSpacing="2">
          {p.name.split(" ")[0]}
        </text>
        <text x="60" y="112" textAnchor="middle" fill="rgba(255,255,255,.65)" fontSize="8" letterSpacing="3">
          {p.name.split(" ").slice(1).join(" ") || "SLOT"}
        </text>
      </svg>
      {p.badge && <span className={`shop-badge shop-badge-${p.badge.toLowerCase()}`}>{p.badge}</span>}
    </div>
  );
}

function ProductCard({ p }) {
  return (
    <article className="shop-card">
      <ProductThumb p={p} />
      <div className="shop-body">
        <h3 className="shop-name">{p.name}</h3>
        <p className="shop-desc">{p.tagline}</p>
        <div className="shop-foot">
          <span className="shop-price">{p.price}</span>
          <button className="btn btn-primary shop-cta" type="button">Play</button>
        </div>
      </div>
    </article>
  );
}

function ShopPage({ theme }) {
  return (
    <div className="page page-shop">
      <header className="shop-head">
        <div>
          <div className="shop-eyebrow">Drop · 05.2026</div>
          <h2 className="shop-title accent-fill">NEW DROPS</h2>
        </div>
        <span className="shop-count">{MOCK_PRODUCTS.length} titles</span>
      </header>
      <div className="shop-grid">
        {MOCK_PRODUCTS.map((p) => <ProductCard key={p.id} p={p} />)}
      </div>
    </div>
  );
}
window.ShopPage = ShopPage;

/* ─────────────────────────────────────────────────────────────
   HistoryPage
   ──────────────────────────────────────────────────────────── */
function TxRow({ tx }) {
  const typeClass = tx.type.toLowerCase();
  return (
    <div className={`tx-row tx-${typeClass}`}>
      <div className="tx-head">
        <span className={`tx-type tx-type-${typeClass}`}>{tx.type}</span>
        <span className={`tx-status tx-status-${tx.status.toLowerCase()}`}>● {tx.status}</span>
      </div>
      <div className="tx-id">#{tx.id}</div>
      <div className="tx-meta">
        <div className="tx-amount">Amount : {tx.currency} {tx.amount.toFixed(2)}</div>
        {tx.bank && <div>Bank : {tx.bank}</div>}
        {tx.accountName && <div>BankAccountName : {tx.accountName}</div>}
        {tx.accountNo && tx.accountNo !== "—" && <div>BankAccountNumber : {tx.accountNo}</div>}
        {tx.method && <div>Method : {tx.method}</div>}
        {tx.remarks && <div>Remarks : {tx.remarks}</div>}
      </div>
      <div className="tx-ts">{tx.ts}</div>
    </div>
  );
}

function BetRow({ bet }) {
  const win = bet.result === "WIN";
  return (
    <div className={`tx-row tx-bet ${win ? "tx-bet-win" : "tx-bet-lose"}`}>
      <div className="tx-head">
        <span className="tx-type">{bet.game}</span>
        <span className={`tx-status ${win ? "tx-status-completed" : "tx-status-failed"}`}>● {bet.result}</span>
      </div>
      <div className="tx-id">#{bet.id} · {bet.provider}</div>
      <div className="tx-meta">
        <div>Stake : MYR {bet.stake.toFixed(2)}</div>
        <div>Payout : MYR {bet.payout.toFixed(2)}</div>
      </div>
      <div className="tx-ts">{bet.ts}</div>
    </div>
  );
}

function HistoryPage({ theme }) {
  const [tab, setTab] = useStateP("tx");
  return (
    <div className="page page-history">
      <div className="hp-tabs">
        <button type="button" className={`hp-tab ${tab === "tx"  ? "active" : ""}`} onClick={() => setTab("tx")}>Transactions</button>
        <button type="button" className={`hp-tab ${tab === "bet" ? "active" : ""}`} onClick={() => setTab("bet")}>Bet History</button>
      </div>
      <div className="hp-section-title">
        {tab === "tx" ? "Transactions" : "Bet History"}
        <span className="hp-section-side">Status</span>
      </div>
      <div className="tx-list">
        {tab === "tx"
          ? MOCK_TRANSACTIONS.map((t) => <TxRow key={t.id} tx={t} />)
          : MOCK_BETS.map((b) => <BetRow key={b.id} bet={b} />)
        }
      </div>
    </div>
  );
}
window.HistoryPage = HistoryPage;

/* ─────────────────────────────────────────────────────────────
   PromoPage
   ──────────────────────────────────────────────────────────── */
function PromoCard({ p }) {
  return (
    <article className="promo-card">
      <div className="promo-stripe">
        <div className="promo-percent">{p.percent}</div>
        <div className="promo-title">{p.title}</div>
        <p className="promo-body">{p.body}</p>
        <button type="button" className="btn btn-primary promo-cta">Claim Now ›</button>
      </div>
      <div className="promo-art" aria-hidden="true">
        <svg viewBox="0 0 120 120" width="100%" height="100%">
          <defs>
            <radialGradient id={`pg-${p.id}`} cx=".5" cy=".5" r=".6">
              <stop offset="0" stopColor="var(--accent-1)" stopOpacity=".7"/>
              <stop offset="1" stopColor="var(--accent-2)" stopOpacity="0"/>
            </radialGradient>
          </defs>
          <circle cx="60" cy="60" r="56" fill={`url(#pg-${p.id})`} />
          <text x="60" y="74" textAnchor="middle" fill="var(--accent-1)" fontSize="44" fontFamily="var(--font-display)" fontWeight="800">{p.percent}</text>
        </svg>
      </div>
      <div className="promo-tags">
        {p.tags.map((t) => <span key={t} className="promo-chip">{t}</span>)}
      </div>
    </article>
  );
}

function PromoPage({ theme }) {
  return (
    <div className="page page-promo">
      <header className="promo-head">
        <h2 className="accent-fill">PROMOTIONS</h2>
        <p>Boost every spin — fresh drops every week.</p>
      </header>
      <div className="promo-stack">
        {MOCK_PROMOS.map((p) => <PromoCard key={p.id} p={p} />)}
      </div>
    </div>
  );
}
window.PromoPage = PromoPage;

/* ─────────────────────────────────────────────────────────────
   LiveChatPage
   ──────────────────────────────────────────────────────────── */
function LiveChatPage({ theme }) {
  const [draft, setDraft] = useStateP("");
  const [history, setHistory] = useStateP([
    { from: "bot", text: "Selamat Datang ke SARASLOT. How can we help today?" },
  ]);

  const send = () => {
    const v = draft.trim();
    if (!v) return;
    setHistory((h) => [...h, { from: "me", text: v }]);
    setDraft("");
    setTimeout(() => {
      setHistory((h) => [...h, { from: "bot", text: "Thanks! A live agent will reply shortly." }]);
    }, 600);
  };

  return (
    <div className="page page-chat">
      <div className="lc-clock">9:14pm</div>
      <div className="lc-name">SARASLOT</div>

      <section className="lc-welcome">
        <h3>Selamat Datang ke</h3>
        <div className="lc-logo accent-fill">SARASLOT</div>

        <div className="lc-btns">
          <button type="button" className="lc-btn">REGISTER</button>
          <button type="button" className="lc-btn">LOGIN</button>
          <button type="button" className="lc-btn">LUPA PW</button>
        </div>

        <div className="lc-list">
          <div className="lc-list-title">CARA UNTUK</div>
          {MOCK_CHAT_INTRO.ways.map((w) => (
            <a key={w.label} className="lc-list-row" href={w.href}>• {w.label}</a>
          ))}
        </div>

        <div className="lc-deposit">
          <div className="lc-list-title">CARA DEPOSIT</div>
          <div className="lc-deposit-row">
            {MOCK_CHAT_INTRO.deposit.map((d) => <span key={d} className="lc-tag">{d}</span>)}
          </div>
        </div>

        <div className="lc-contacts">
          <div className="lc-list-title">CONTACT</div>
          {MOCK_CHAT_INTRO.contacts.map((c) => (
            <div key={c.label} className="lc-contact-row">
              <span>{c.label}</span><span>{c.value}</span>
            </div>
          ))}
        </div>

        <div className="lc-sites">
          {MOCK_CHAT_INTRO.sites.map((s) => <span key={s} className="lc-site">◆ {s}</span>)}
        </div>
      </section>

      <div className="lc-thread">
        {history.map((m, i) => (
          <div key={i} className={`lc-msg lc-msg-${m.from}`}>{m.text}</div>
        ))}
      </div>

      <div className="lc-input">
        <input
          type="text"
          placeholder="Text here..."
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter") send(); }}
        />
        <button type="button" className="lc-send" onClick={send} aria-label="Send">➤</button>
      </div>
    </div>
  );
}
window.LiveChatPage = LiveChatPage;

/* ─────────────────────────────────────────────────────────────
   SettingPage
   ──────────────────────────────────────────────────────────── */
function SettingRow({ label, value }) {
  return (
    <div className="profile-row">
      <span className="profile-label">{label}</span>
      <span className="profile-colon">:</span>
      <span className="profile-value">{value}</span>
    </div>
  );
}

function SettingMenuRow({ label }) {
  return (
    <button type="button" className="setting-row">
      <span>{label}</span>
      <span className="setting-chevron">›</span>
    </button>
  );
}

function SettingPage({ theme }) {
  const p = MOCK_PROFILE;
  return (
    <div className="page page-setting">
      <header className="profile-head">
        <h2 className="accent-fill">PROFILE</h2>
      </header>

      <section className="profile-grid">
        <SettingRow label="Username"           value={p.username} />
        <SettingRow label="Name"               value={p.name} />
        <SettingRow label="Phone Number"       value={p.phone} />
        <SettingRow label="Wallet Balance"     value={p.balance} />
        <SettingRow label="Bank Name"          value={p.bank.name} />
        <SettingRow label="Bank Account Name"  value={p.bank.holder} />
        <SettingRow label="Bank Account Number"value={p.bank.accountNo} />
        <SettingRow label="Bank BSB"           value={p.bank.bsb} />
        <SettingRow label="Pay ID"             value={p.bank.payId} />
        <SettingRow label="Email Address"      value={p.email} />
      </section>

      <header className="profile-head">
        <h2 className="accent-fill">SETTING</h2>
      </header>

      <section className="setting-list">
        <SettingMenuRow label="Mobile Number" />
        <SettingMenuRow label="Email" />
        <SettingMenuRow label="Password" />
        <SettingMenuRow label="Language" />
        <SettingMenuRow label="Report A Problem" />
        <SettingMenuRow label="Logout" />
      </section>
    </div>
  );
}
window.SettingPage = SettingPage;