// pages.jsx — route page components for saraslot.
// Loaded after games.jsx, before app.jsx. All data comes from Supabase via the
// hooks in data.jsx; no MOCK_* arrays remain.

const { useState: useStateP, useMemo: useMemoP } = React;

/* ─────────────────────────────────────────────────────────────
   Shared utilities
   ──────────────────────────────────────────────────────────── */
function fmtAmount(n, currency) {
  const cur = currency || "MYR";
  const v = Number(n || 0);
  return `${cur} ${v.toFixed(2)}`;
}

function fmtTs(iso) {
  if (!iso) return "";
  try {
    const d = new Date(iso);
    const date = d.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" });
    const time = d.toLocaleTimeString("en-GB", { hour: "numeric", minute: "2-digit", hour12: true }).toUpperCase().replace(" ", "");
    return `${date} ${time}`;
  } catch (e) {
    return String(iso);
  }
}

function PageEmpty({ title, sub, action }) {
  return (
    <div className="page-state">
      <div className="page-state-title">{title}</div>
      {sub && <div className="page-state-sub">{sub}</div>}
      {action && <div className="page-state-actions">{action}</div>}
    </div>
  );
}

function PageLoading({ label }) {
  return <div className="page-state"><div className="page-state-sub">{label || "Loading…"}</div></div>;
}

/* ─────────────────────────────────────────────────────────────
   HomePage
   ──────────────────────────────────────────────────────────── */
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 — products from `products` table
   ──────────────────────────────────────────────────────────── */
function ProductThumb({ p }) {
  const hue = p.hue ?? 38;
  const id = p.id || p.slug || "p";
  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-${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-${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-${id})`} />
        <circle cx="40" cy="48" r="44" fill={`url(#r-${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-${String(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 }) {
  const { data, loading } = window.useProducts();
  const b = window.useBranding ? window.useBranding() : window.BRANDING_DEFAULTS;
  const products = Array.isArray(data) ? data : [];
  return (
    <div className="page page-shop">
      <header className="shop-head">
        <div>
          <div className="shop-eyebrow">{b.shop_eyebrow}</div>
          <h2 className="shop-title accent-fill">{b.shop_title}</h2>
        </div>
        <span className="shop-count">{products.length} titles</span>
      </header>
      {loading && products.length === 0 ? <PageLoading /> : (
        <div className="shop-grid">
          {products.map((p) => <ProductCard key={p.id} p={p} />)}
        </div>
      )}
    </div>
  );
}
window.ShopPage = ShopPage;

/* ─────────────────────────────────────────────────────────────
   HistoryPage — gated; pulls own transactions + bets
   ──────────────────────────────────────────────────────────── */
function TxRow({ tx }) {
  const typeClass = String(tx.kind || tx.type || "").toLowerCase();
  const statusClass = String(tx.status || "").toLowerCase();
  const amt = Number(tx.amount || 0);
  return (
    <div className={`tx-row tx-${typeClass}`}>
      <div className="tx-head">
        <span className={`tx-type tx-type-${typeClass}`}>{tx.kind || tx.type}</span>
        <span className={`tx-status tx-status-${statusClass}`}>● {tx.status}</span>
      </div>
      <div className="tx-id">#{(tx.id || "").toString().slice(0, 12)}</div>
      <div className="tx-meta">
        <div className="tx-amount">Amount : {fmtAmount(amt, tx.currency)}</div>
        {tx.bank_name && <div>Bank : {tx.bank_name}</div>}
        {tx.account_name && <div>BankAccountName : {tx.account_name}</div>}
        {tx.account_no && tx.account_no !== "—" && <div>BankAccountNumber : {tx.account_no}</div>}
        {tx.method && <div>Method : {tx.method}</div>}
        {tx.remarks && <div>Remarks : {tx.remarks}</div>}
      </div>
      <div className="tx-ts">{fmtTs(tx.created_at)}</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 || "").toString().slice(0, 12)} · {bet.provider}</div>
      <div className="tx-meta">
        <div>Stake : MYR {Number(bet.stake || 0).toFixed(2)}</div>
        <div>Payout : MYR {Number(bet.payout || 0).toFixed(2)}</div>
      </div>
      <div className="tx-ts">{fmtTs(bet.played_at)}</div>
    </div>
  );
}

function HistoryBody() {
  const [tab, setTab] = useStateP("tx");
  const txq = window.useTransactions();
  const betq = window.useBets();
  const txs = Array.isArray(txq.data) ? txq.data : [];
  const bets = Array.isArray(betq.data) ? betq.data : [];
  const loading = (tab === "tx" ? txq.loading : betq.loading);

  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>
      {loading ? <PageLoading /> : (
        <div className="tx-list">
          {tab === "tx"
            ? (txs.length === 0
                ? <PageEmpty title="No transactions yet" sub="Your deposits, withdrawals and bonuses will appear here." />
                : txs.map((t) => <TxRow key={t.id} tx={t} />))
            : (bets.length === 0
                ? <PageEmpty title="No bets yet" sub="Your bet history will appear here once you play." />
                : bets.map((b) => <BetRow key={b.id} bet={b} />))
          }
        </div>
      )}
    </div>
  );
}

function HistoryPage({ theme }) {
  return (
    <window.AuthGate fallback={
      <div className="page"><PageEmpty title="Log in to view history" sub="Sign in to see your transactions and bet history." /></div>
    }>
      <HistoryBody />
    </window.AuthGate>
  );
}
window.HistoryPage = HistoryPage;

/* ─────────────────────────────────────────────────────────────
   PromoPage — promos table
   ──────────────────────────────────────────────────────────── */
function PromoCard({ p }) {
  const id = p.id || p.slug;
  const tags = Array.isArray(p.tags) ? p.tags : [];
  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-${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-${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">
        {tags.map((t) => <span key={t} className="promo-chip">{t}</span>)}
      </div>
    </article>
  );
}

function PromoPage({ theme }) {
  const { data, loading } = window.usePromos();
  const b = window.useBranding ? window.useBranding() : window.BRANDING_DEFAULTS;
  const promos = Array.isArray(data) ? data : [];
  return (
    <div className="page page-promo">
      <header className="promo-head">
        <h2 className="accent-fill">{b.promo_title}</h2>
        <p>{b.promo_sub}</p>
      </header>
      {loading && promos.length === 0 ? <PageLoading /> : (
        <div className="promo-stack">
          {promos.map((p) => <PromoCard key={p.id} p={p} />)}
        </div>
      )}
    </div>
  );
}
window.PromoPage = PromoPage;

/* ─────────────────────────────────────────────────────────────
   LiveChatPage — intro from site_settings('chat_intro')
   ──────────────────────────────────────────────────────────── */
const CHAT_INTRO_FALLBACK = { ways: [], deposit: [], contacts: [], sites: [] };

function LiveChatPage({ theme }) {
  const [draft, setDraft] = useStateP("");
  const [history, setHistory] = useStateP([
    { from: "bot", text: "Selamat Datang ke SARASLOT. How can we help today?" },
  ]);
  const cfgQuery = window.useSiteSetting("chat_intro");
  const cfg = (cfgQuery.data && cfgQuery.data.value) || CHAT_INTRO_FALLBACK;
  const b = window.useBranding ? window.useBranding() : window.BRANDING_DEFAULTS;

  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">{b.chat_brand}</div>

      <section className="lc-welcome">
        <h3>{b.chat_welcome}</h3>
        <div className="lc-logo accent-fill">{b.chat_brand}</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>

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

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

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

        {cfg.sites?.length > 0 && (
          <div className="lc-sites">
            {cfg.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 — gated; pulls own profile
   ──────────────────────────────────────────────────────────── */
function ProfileRow({ 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, onClick }) {
  return (
    <button type="button" className="setting-row" onClick={onClick}>
      <span>{label}</span>
      <span className="setting-chevron">›</span>
    </button>
  );
}

function SettingBody() {
  const { data: p, loading } = window.useProfile();
  const handleLogout = async () => { if (window.signOut) await window.signOut(); };

  if (loading || !p) return <PageLoading />;

  return (
    <div className="page page-setting">
      <header className="profile-head">
        <h2 className="accent-fill">PROFILE</h2>
      </header>

      <section className="profile-grid">
        <ProfileRow label="Username"            value={p.username} />
        <ProfileRow label="Name"                value={p.full_name} />
        <ProfileRow label="Phone Number"        value={p.phone} />
        <ProfileRow label="Wallet Balance"      value={`MYR ${Number(p.balance || 0).toFixed(2)}`} />
        <ProfileRow label="Bank Name"           value={p.bank_name} />
        <ProfileRow label="Bank Account Name"   value={p.bank_holder} />
        <ProfileRow label="Bank Account Number" value={p.bank_account_no} />
        <ProfileRow label="Bank BSB"            value={p.bank_bsb} />
        <ProfileRow label="Pay ID"              value={p.pay_id} />
        <ProfileRow 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" onClick={handleLogout} />
      </section>
    </div>
  );
}

function SettingPage({ theme }) {
  return (
    <window.AuthGate fallback={
      <div className="page"><PageEmpty title="Log in to view settings" sub="Sign in to access your profile and account settings." /></div>
    }>
      <SettingBody />
    </window.AuthGate>
  );
}
window.SettingPage = SettingPage;