// Represents: nothing in the admin — /payments/frontend is prototype-only
/* Traced Aug 2026 (architecture item 2), and the trace is deliberately empty.
   AdminPaymentsController's ten sections do not include `frontend`. What this
   screen previews IS real — the player-facing site served from routes/web.php
   under the frontendweb middleware group, driven by the same per-skin method
   config PayBO edits — but there is no admin screen upstream that renders it.
   Recorded so nobody looks for a controller that was never there. */
/* Frontend — player-facing casino preview wired to the backend.

   Why this page exists in the back-office: every value the player sees
   (which methods are visible, min / max per tx, fees, processing times,
   level-based daily caps) is configured in PayBO. The CTO needs a
   single screen that shows the operator side and the player side of
   the same setting, so they can verify "what I changed in Settings →
   Methods is what the player gets".

   Theme: JuegoJoker (dark purple + yellow). Scoped via inline styles
   on a single root container so it doesn't bleed into the rest of the
   admin which uses the light Iwakiri/Metronic theme. */

const Frontend = ({ brand, brands }) => {
  window.useLocale && window.useLocale();
  const T = window.T || ((k, fb) => fb || k);
  const MOCK = window.MOCK || {};
  const METHODS = MOCK.METHODS || [];
  const LEVELS  = MOCK.LEVELS  || [];

  // The brand the operator is currently filtering by — drives currency
  // and which methods are visible to the player. "All brands" is a
  // back-office aggregate; for the preview we fall back to the first.
  const activeBrand = (brand && !brand.isAll && brand) || (brands && brands[0]) || { name:"Brand", currency:"EUR" };
  const cur = activeBrand.currency || "EUR";
  const sym = window.currencySymbol ? window.currencySymbol(cur).trim() : cur;
  const fmt = (n) => `${sym} ${Number(n).toLocaleString()}`;

  // Player session — a single mock player whose level the operator can
  // toggle to see how the auto-approve threshold and daily cap change
  // on the player UI. In production this comes from the auth session.
  const [playerLevel, setPlayerLevel] = useState((LEVELS.find(l => l.name === "Gold") || LEVELS[3] || LEVELS[0] || { name:"Gold", auto_approve_under:1500, color:"#e6a82c" }).name);
  const level = LEVELS.find(l => l.name === playerLevel) || { auto_approve_under: 1500, color: "#e6a82c" };

  /* The "API response" shape — what /api/v1/methods?brand=X&player=Y
     would return in production. Constructed here from MOCK so the
     operator can see exactly which back-office fields drive each
     player-visible value. */
  const brandIdx = (brands || []).findIndex(b => b.id === activeBrand.id);
  const apiMethods = METHODS.map((m, mi) => {
    const procDeposit    = m.kind === "Crypto" ? "T+0 · network confirms" : m.kind === "Bank" ? "Up to 30 min" : "Up to 5 min";
    const procWithdrawal = m.kind === "Crypto" ? "T+0 · network confirms" : m.kind === "Bank" ? "T+1 to T+2"   : "Up to 24h";
    const enabled = !(brandIdx === 2 && m.id === "bitcoin"); // mirrors Methods.jsx seed (3rd brand, bi===2)
    return {
      id: m.id, name: m.name, short: m.short, icon: m.icon, kind: m.kind, color: m.color,
      enabled,
      deposit: {
        min:  10 + mi * 5,
        max:  50000 + mi * 5000,
        feePct: +(1 + mi * 0.20).toFixed(2),
        processing: procDeposit,
      },
      withdrawal: {
        enabled: m.id !== "paysafe", // vouchers don't pay back out
        min:  20 + mi * 5,
        max:  25000 + mi * 2000,
        feePct: +(1.5 + mi * 0.25).toFixed(2),
        processing: procWithdrawal,
      },
    };
  });

  // Per-window remaining (mock — in prod the engine returns this
  // alongside the method list so each row can show "X remaining today"
  // and prevent overshoot before the request is even submitted).
  const limitsRemaining = {
    daily:   { used: 1240, cap: level.auto_approve_under * 6 },
    weekly:  { used: 4830, cap: level.auto_approve_under * 25 },
    monthly: { used: 11200, cap: level.auto_approve_under * 80 },
  };

  /* UI state */
  const [view, setView] = useState("casino");      // casino | account
  const [accountTab, setAccountTab] = useState("deposit"); // deposit | withdrawal | transactions
  const [depositOpen, setDepositOpen]       = useState(false);
  const [withdrawalOpen, setWithdrawalOpen] = useState(false);
  const [expandedMethod, setExpandedMethod] = useState(null);
  const [selectedSidebar, setSelectedSidebar] = useState("home");
  const [casinoTab, setCasinoTab] = useState("casino"); // casino | sport
  const [balance, setBalance] = useState(0);

  // Theme — kept on this object so re-skinning is one place
  // The dark chrome/shell is shared across every skin (same white-label
  // frame), but the accent — CTAs, highlights, the brand-color elements a
  // player actually associates with the skin — pulls from the selected
  // brand's own color so the preview doesn't look identical for every
  // brand regardless of which one is picked.
  const brandHexes = (activeBrand.color && activeBrand.color.match(/#[0-9a-fA-F]{6}/g)) || [];
  const C = {
    bg:        "#15082a",
    bgPanel:   "#1f0d3a",
    bgCard:    "#2a1748",
    bgRaised:  "#321a55",
    border:    "#3d2566",
    borderSub: "#2e1947",
    text:      "#ffffff",
    text2:     "#b8a9d9",
    text3:     "#7d6b9c",
    yellow:    brandHexes[0] || "#ffd60a",
    yellowDk:  brandHexes[1] || brandHexes[0] || "#f7c700",
    success:   "#4ade80",
    danger:    "#f87171",
  };

  /* ----------------------------- Sub-views ----------------------------- */

  const SIDE_CASINO = [
    { id:"home",     icon:"dashboard",   label:"Home",       active:true },
    { id:"slot",     icon:"grid",        label:"Slot" },
    { id:"hot",      icon:"zap",         label:"Hot Games" },
    { id:"joker",    icon:"crown",       label:"Joker" },
    { id:"live",     icon:"users",       label:"Live Casino" },
    { id:"tables",   icon:"list",        label:"Tables in Spanish" },
    { id:"themes",   icon:"star",        label:"Themes" },
  ];
  const SIDE_FOOTER = [
    { id:"promotions", icon:"tag",     label:"Promotions" },
    { id:"races",      icon:"crown",   label:"Races" },
    { id:"chat",       icon:"mail",    label:"Chat" },
    { id:"faq",        icon:"help",    label:"FAQ" },
  ];

  const Sidebar = () => (
    <aside style={{
      width: 220, flexShrink:0, background: C.bgPanel,
      padding: "10px 12px", display:"flex", flexDirection:"column", gap:14,
      borderRight: `1px solid ${C.borderSub}`, overflowY:"auto",
    }}>
      {/* Casino / Sport tabs */}
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:6}}>
        {[["casino","Casino"],["sport","Sport"]].map(([id,label]) => {
          const on = casinoTab === id;
          return (
            <button key={id} onClick={()=>setCasinoTab(id)} style={{
              padding:"8px 12px", borderRadius:8,
              background: on ? C.yellow : "transparent",
              border: on ? `1px solid ${C.yellow}` : `1px solid ${C.border}`,
              color: on ? "#1a0d2b" : C.text2,
              fontWeight:700, fontSize:12.5, cursor:"pointer",
              display:"inline-flex", alignItems:"center", justifyContent:"center", gap:6,
            }}>
              <Icon name={id === "casino" ? "globe" : "zap"} size={12}/> {label}
            </button>
          );
        })}
      </div>

      {/* Primary nav */}
      <div style={{display:"flex", flexDirection:"column", gap:2}}>
        {SIDE_CASINO.map(it => {
          const on = selectedSidebar === it.id;
          return (
            <button key={it.id} onClick={()=>setSelectedSidebar(it.id)} style={{
              display:"flex", alignItems:"center", gap:10,
              padding:"9px 12px", borderRadius:8,
              background: on ? `linear-gradient(90deg, ${C.yellow}1a, transparent)` : "transparent",
              border: on ? `1px solid ${C.yellow}66` : "1px solid transparent",
              color: on ? C.yellow : C.text2,
              fontWeight: on ? 700 : 500, fontSize:13, cursor:"pointer", textAlign:"left",
            }}>
              <Icon name={it.icon} size={14}/> {it.label}
            </button>
          );
        })}
      </div>

      <div style={{height:1, background:C.borderSub, margin:"4px 0"}}/>

      <div style={{display:"flex", flexDirection:"column", gap:2}}>
        {SIDE_FOOTER.map(it => (
          <button key={it.id} style={{
            display:"flex", alignItems:"center", gap:10,
            padding:"9px 12px", borderRadius:8, background:"transparent", border:"1px solid transparent",
            color: C.text2, fontWeight:500, fontSize:13, cursor:"pointer", textAlign:"left",
          }}>
            <Icon name={it.icon} size={14}/> {it.label}
          </button>
        ))}
      </div>
    </aside>
  );

  const Topbar = () => (
    <div style={{
      height:60, background: C.bgPanel, borderBottom:`1px solid ${C.borderSub}`,
      display:"flex", alignItems:"center", padding:"0 16px", gap:14, flexShrink:0,
    }}>
      <button title="Toggle sidebar" style={{width:34, height:34, borderRadius:8, background:"transparent", border:`1px solid ${C.border}`, color:C.text2, display:"grid", placeItems:"center", cursor:"pointer"}}>
        <Icon name="list" size={14}/>
      </button>

      {/* Brand wordmark — uses the active brand's color so the operator
          sees the multi-brand connection. */}
      <button onClick={()=>setView("casino")} style={{
        display:"inline-flex", alignItems:"center", gap:8, background:"transparent", border:0, cursor:"pointer", padding:0,
      }}>
        <span style={{
          width:34, height:34, borderRadius:8,
          background: activeBrand.color || "linear-gradient(135deg,#ffd60a,#f7c700)",
          display:"grid", placeItems:"center", fontWeight:800, color:"#1a0d2b", fontSize:11, letterSpacing:".02em",
        }}>{activeBrand.short || (activeBrand.name || "JJ").slice(0,2).toUpperCase()}</span>
        <span style={{fontSize:18, fontWeight:800, color:C.text, letterSpacing:"-.01em"}}>
          {activeBrand.name || "JuegoJoker"}
        </span>
      </button>

      <div style={{flex:1}}/>

      <button title="Search" style={{width:36, height:36, borderRadius:8, background:"transparent", border:`1px solid ${C.border}`, color:C.text2, display:"grid", placeItems:"center", cursor:"pointer"}}>
        <Icon name="search" size={14}/>
      </button>
      <button title="Promotions" style={{width:36, height:36, borderRadius:8, background:"transparent", border:`1px solid ${C.border}`, color:C.text2, display:"grid", placeItems:"center", cursor:"pointer"}}>
        <Icon name="tag" size={14}/>
      </button>

      {/* Balance + Deposit + Username — visible because we treat the
          preview as a logged-in session. */}
      <div style={{padding:"0 12px", height:36, display:"inline-flex", alignItems:"center", color:C.text, fontSize:13, fontWeight:600}}>
        {cur} {balance.toFixed(2)}
      </div>
      <button onClick={()=>{ setDepositOpen(true); setExpandedMethod(null); }} style={{
        height:36, padding:"0 14px", borderRadius:8,
        background:C.yellow, border:`1px solid ${C.yellowDk}`, color:"#1a0d2b",
        fontWeight:700, fontSize:13, cursor:"pointer", display:"inline-flex", alignItems:"center", gap:6,
      }}>
        <Icon name="arrow_down" size={12}/> Deposit
      </button>
      <button onClick={()=>setView("account")} style={{
        height:36, padding:"0 12px", borderRadius:8,
        background:"transparent", border:`1px solid ${C.border}`, color:C.text,
        fontSize:13, fontWeight:600, cursor:"pointer", display:"inline-flex", alignItems:"center", gap:6,
      }}>
        <span style={{width:22, height:22, borderRadius:999, background:C.yellow, display:"grid", placeItems:"center", color:"#1a0d2b", fontWeight:800, fontSize:10}}>T</span>
        Topoino
        <Icon name="chevron_down" size={11}/>
      </button>
    </div>
  );

  /* Casino content — banners + game grid (visual only) */
  const CasinoView = () => (
    <div style={{padding:"16px 20px", display:"flex", flexDirection:"column", gap:18, color:C.text}}>
      {/* Hero banners */}
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:14}}>
        {[
          { tag:"Promo",      title:"¡La Carrera del Joker!",  sub:"Joker Slot Race Semanal",                    grad:"linear-gradient(120deg,#3d1a64,#5a247a)" },
          { tag:"Juego Nuevo",title:"El Bufón Porteño",        sub:"Jugá nuestro nuevo juego exclusivo y ganá",  grad:"linear-gradient(120deg,#7a1f3a,#c2434c)" },
        ].map((b, i) => (
          <div key={i} style={{
            padding:"22px 24px", borderRadius:14, background:b.grad,
            display:"flex", flexDirection:"column", gap:10, justifyContent:"space-between",
            minHeight:170, position:"relative", overflow:"hidden",
          }}>
            <span style={{alignSelf:"flex-start", padding:"3px 10px", borderRadius:999, border:`1px solid ${C.yellow}`, color:C.yellow, fontSize:11, fontWeight:700}}>{b.tag}</span>
            <div>
              <div style={{fontSize:22, fontWeight:800, lineHeight:1.1}}>{b.title}</div>
              <div style={{fontSize:13, color:C.text2, marginTop:4, maxWidth:300}}>{b.sub}</div>
            </div>
            <button style={{
              alignSelf:"flex-start", padding:"8px 14px", borderRadius:8,
              background:"transparent", border:`1px solid ${C.yellow}`, color:C.yellow,
              fontWeight:700, fontSize:12, cursor:"pointer",
            }}>¡Jugá ahora!</button>
          </div>
        ))}
      </div>

      {/* Recent Big Wins (placeholder strip) */}
      <div>
        <div style={{fontSize:16, fontWeight:700, marginBottom:10}}>Recent Big Wins</div>
        <div style={{height:130, borderRadius:12, background:C.bgPanel, border:`1px solid ${C.borderSub}`, display:"grid", placeItems:"center", color:C.text3, fontSize:12}}>
          Live ticker · player wins stream in here
        </div>
      </div>

      {/* Search + filters */}
      <div style={{display:"grid", gridTemplateColumns:"1fr 200px 200px", gap:10}}>
        <div style={{display:"flex", alignItems:"center", gap:8, padding:"0 14px", height:42, borderRadius:10, background:C.bgPanel, border:`1px solid ${C.borderSub}`}}>
          <Icon name="search" size={13} style={{color:C.text3}}/>
          <input placeholder="Search Games" style={{flex:1, background:"transparent", border:0, outline:"none", color:C.text, fontSize:13}}/>
        </div>
        <select style={{height:42, padding:"0 12px", borderRadius:10, background:C.bgPanel, border:`1px solid ${C.borderSub}`, color:C.text2, fontSize:13}}>
          <option>Provider</option>
          <option>Pragmatic Play</option>
          <option>NetEnt</option>
        </select>
        <select style={{height:42, padding:"0 12px", borderRadius:10, background:C.bgPanel, border:`1px solid ${C.borderSub}`, color:C.text2, fontSize:13}}>
          <option>Category</option>
          <option>Slots</option>
          <option>Live</option>
        </select>
      </div>

      {/* Game grid — placeholders */}
      <div>
        <div style={{display:"flex", alignItems:"center", marginBottom:10}}>
          <div style={{fontSize:16, fontWeight:700}}>Joker</div>
          <div style={{flex:1}}/>
          <button style={{padding:"6px 12px", borderRadius:8, background:"transparent", border:`1px solid ${C.border}`, color:C.text2, fontSize:12, fontWeight:600, cursor:"pointer", marginRight:6}}>See All</button>
          <button style={{width:32, height:32, borderRadius:8, background:"transparent", border:`1px solid ${C.border}`, color:C.text2, display:"grid", placeItems:"center", cursor:"pointer"}}><Icon name="chevron_left" size={12}/></button>
          <button style={{width:32, height:32, borderRadius:8, background:"transparent", border:`1px solid ${C.border}`, color:C.text2, display:"grid", placeItems:"center", cursor:"pointer", marginLeft:4}}><Icon name="chevron_right" size={12}/></button>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"repeat(auto-fill, minmax(140px, 1fr))", gap:10}}>
          {["#3d2752","#5a247a","#762e7e","#3a1f54","#643172","#4a235a","#7a3d8a"].map((bg, i) => (
            <div key={i} style={{
              aspectRatio:"3 / 4", borderRadius:10,
              background:`linear-gradient(140deg, ${bg}, ${C.bgCard})`,
              border:`1px solid ${C.borderSub}`,
              display:"grid", placeItems:"center",
              color:C.text2, fontSize:11, fontWeight:600,
            }}>Joker · {i + 1}</div>
          ))}
        </div>
      </div>
    </div>
  );

  /* Account view (Deposit / Withdrawal / Transactions) */
  const AccountView = () => (
    <div style={{padding:"16px 20px", color:C.text}}>
      <button onClick={()=>setView("casino")} style={{display:"inline-flex", alignItems:"center", gap:6, background:"transparent", border:0, color:C.text2, fontSize:13, fontWeight:600, cursor:"pointer", marginBottom:14}}>
        <Icon name="chevron_left" size={12}/> Account
      </button>
      <div style={{display:"grid", gridTemplateColumns:"280px 1fr", gap:18}}>
        {/* Profile + balance + tabs */}
        <div style={{display:"flex", flexDirection:"column", gap:14}}>
          <div style={{padding:"14px", background:C.bgPanel, borderRadius:12, border:`1px solid ${C.borderSub}`, display:"flex", alignItems:"center", gap:10}}>
            <div style={{width:42, height:42, borderRadius:999, background:C.yellow, display:"grid", placeItems:"center", color:"#1a0d2b", fontWeight:800, fontSize:14}}>T</div>
            <div style={{flex:1, minWidth:0}}>
              <div style={{fontWeight:700, fontSize:13.5}}>Topoino</div>
              <div style={{fontSize:11, color:C.text3}}>ID: 4710501</div>
            </div>
            <button title="Copy ID" style={{width:30, height:30, borderRadius:8, background:"transparent", border:`1px solid ${C.border}`, color:C.text2, display:"grid", placeItems:"center", cursor:"pointer"}}>
              <Icon name="copy" size={11}/>
            </button>
          </div>

          <div style={{padding:"14px", background:C.bgPanel, borderRadius:12, border:`1px solid ${C.borderSub}`}}>
            <div style={{display:"flex", alignItems:"center", marginBottom:10}}>
              <div style={{fontSize:14, fontWeight:700}}>Balance</div>
              <div style={{flex:1}}/>
              <Icon name="eye" size={12} style={{color:C.text3}}/>
            </div>
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10}}>
              <div>
                <div style={{fontSize:11, color:C.text3}}>Real Balance</div>
                <div style={{fontSize:14, fontWeight:700, marginTop:2}}>{cur} {balance.toFixed(2)}</div>
              </div>
              <div>
                <div style={{fontSize:11, color:C.text3}}>Bonus Balance</div>
                <div style={{fontSize:14, fontWeight:700, marginTop:2}}>{cur} 0.00</div>
              </div>
            </div>
            <div style={{marginTop:10, padding:"8px 10px", borderRadius:8, background:C.bgRaised, border:`1px solid ${C.border}`, fontSize:11, color:C.text2, display:"flex", alignItems:"center", gap:8}}>
              <span style={{width:8, height:8, borderRadius:2, background:level.color}}/>
              <span><strong style={{color:C.text}}>{level.name}</strong> tier · auto-approve under {fmt(level.auto_approve_under)}</span>
            </div>
          </div>

          <div style={{display:"flex", flexDirection:"column", gap:2}}>
            {[
              { id:"account",      icon:"user",        label:"Account" },
              { id:"bonuses",      icon:"tag",         label:"Bonuses" },
              { id:"deposit",      icon:"arrow_down",  label:"Deposit" },
              { id:"withdrawal",   icon:"arrow_up",    label:"Withdrawal" },
              { id:"transactions", icon:"receipt",     label:"Transactions" },
              { id:"my_bets",      icon:"list",        label:"My Bets" },
            ].map(it => {
              const on = accountTab === it.id;
              return (
                <button key={it.id} onClick={()=>setAccountTab(it.id)} style={{
                  display:"flex", alignItems:"center", gap:10,
                  padding:"10px 12px", borderRadius:8,
                  background: on ? C.bgRaised : "transparent",
                  border: on ? `1px solid ${C.border}` : "1px solid transparent",
                  color: on ? C.text : C.text2,
                  fontWeight: on ? 700 : 500, fontSize:13, cursor:"pointer", textAlign:"left",
                }}>
                  <Icon name={it.icon} size={13}/> {it.label}
                </button>
              );
            })}
          </div>
        </div>

        {/* Right pane — deposit / withdrawal forms */}
        <div>
          {accountTab === "deposit"    && <MethodList kind="deposit"    title="Deposit"    onPick={()=>{}}/>}
          {accountTab === "withdrawal" && <MethodList kind="withdrawal" title="Withdrawal" onPick={()=>{}}/>}
          {accountTab === "transactions" && (
            <div style={{padding:"14px 16px", background:C.bgPanel, borderRadius:12, border:`1px solid ${C.borderSub}`}}>
              <div style={{fontSize:14, fontWeight:700, marginBottom:8}}>Transactions</div>
              <div style={{fontSize:12.5, color:C.text2}}>Live transaction history reads from <code>/api/v1/transactions?player=4710501</code> — same source the back-office <strong>Transactions</strong> page uses, scoped to this player.</div>
            </div>
          )}
          {!["deposit","withdrawal","transactions"].includes(accountTab) && (
            <div style={{padding:"16px 18px", background:C.bgPanel, borderRadius:12, border:`1px solid ${C.borderSub}`, color:C.text2, fontSize:13}}>
              {accountTab.charAt(0).toUpperCase() + accountTab.slice(1)} pane — not in scope of the deposit/withdrawal preview.
            </div>
          )}
        </div>
      </div>
    </div>
  );

  /* MethodList — the row-list rendering used both in the Account →
     Deposit pane and inside the modal. The first row auto-expands so
     the CTO immediately sees the Type / Fee / Processing time / Limit
     fields without having to click. */
  const MethodList = ({ kind, title }) => {
    const visible = apiMethods.filter(m => m.enabled && (kind === "deposit" || m.withdrawal.enabled));
    return (
      <div>
        <div style={{fontSize:14, fontWeight:700, marginBottom:10, color:C.text}}>{title}</div>
        <div style={{display:"flex", flexDirection:"column", gap:10}}>
          {visible.map((m, idx) => {
            const cfg = kind === "deposit" ? m.deposit : m.withdrawal;
            const expanded = expandedMethod === m.id || (expandedMethod == null && idx === 0);
            return (
              <div key={m.id} style={{borderRadius:12, background:C.bgPanel, border:`1px solid ${C.borderSub}`, overflow:"hidden"}}>
                {/* Row header */}
                <div style={{display:"flex", alignItems:"center", gap:12, padding:"10px 12px"}}>
                  <div style={{width:60, height:36, borderRadius:6, background:"#fff", display:"grid", placeItems:"center", flexShrink:0}}>
                    <span style={{fontSize:9, fontWeight:800, color:"#1a0d2b", textAlign:"center", letterSpacing:".02em", lineHeight:1.1, padding:"0 4px"}}>
                      {m.kind === "Crypto" ? "CRYPTO" : (m.kind === "Bank" ? "TRANSFERENCIA BANCARIA" : m.short)}
                    </span>
                  </div>
                  <div style={{flex:1, minWidth:0, fontSize:13.5, fontWeight:600, color:C.text}}>
                    {kind === "deposit" && m.kind === "Bank" ? `Bank transfer ${idx + 1}` : m.name}
                  </div>
                  <div style={{display:"inline-flex", alignItems:"center", gap:4, padding:"0 10px", height:32, borderRadius:8, background:C.bgRaised, border:`1px solid ${C.border}`}}>
                    <input placeholder="Amount" type="number" min={cfg.min} max={cfg.max}
                           style={{width:90, background:"transparent", border:0, outline:"none", color:C.text, fontSize:12.5, textAlign:"right"}}/>
                  </div>
                  <button onClick={()=>setExpandedMethod(expanded ? null : m.id)} style={{width:32, height:32, borderRadius:999, background:"transparent", border:`1px solid ${C.border}`, color:C.text2, display:"grid", placeItems:"center", cursor:"pointer"}}>
                    <Icon name={expanded ? "chevron_down" : "chevron_right"} size={11}/>
                  </button>
                </div>

                {/* Expanded details */}
                {expanded && (
                  <div style={{borderTop:`1px solid ${C.borderSub}`, padding:"12px 14px", display:"flex", flexDirection:"column", gap:8}}>
                    {[
                      ["Type",                m.kind === "Bank" ? "Bank transfer" : m.kind],
                      ["Fee",                 cfg.feePct === 0 ? "0%" : `${cfg.feePct}%`],
                      ["Processing time",     cfg.processing],
                      ["Limit per transaction", `Min ${fmt(cfg.min)} – Max ${fmt(cfg.max)}`],
                    ].map(([k, v]) => (
                      <div key={k} style={{display:"flex", justifyContent:"space-between", alignItems:"center", padding:"4px 0", borderBottom:`1px dashed ${C.borderSub}`, fontSize:12.5}}>
                        <span style={{color:C.text2}}>{k}</span>
                        <span style={{color:C.text, fontWeight:600}}>{v}</span>
                      </div>
                    ))}
                    {/* Player-scoped remaining caps — what differentiates
                        this preview from a static screenshot. */}
                    <div style={{marginTop:6, padding:"8px 10px", borderRadius:8, background:C.bgRaised, border:`1px solid ${C.border}`, fontSize:12, color:C.text2, lineHeight:1.6}}>
                      <div style={{display:"flex", justifyContent:"space-between"}}><span>Daily remaining</span>   <strong style={{color:C.text}}>{fmt(Math.max(0, limitsRemaining.daily.cap   - limitsRemaining.daily.used))}</strong></div>
                      <div style={{display:"flex", justifyContent:"space-between"}}><span>Weekly remaining</span>  <strong style={{color:C.text}}>{fmt(Math.max(0, limitsRemaining.weekly.cap  - limitsRemaining.weekly.used))}</strong></div>
                      <div style={{display:"flex", justifyContent:"space-between"}}><span>Monthly remaining</span> <strong style={{color:C.text}}>{fmt(Math.max(0, limitsRemaining.monthly.cap - limitsRemaining.monthly.used))}</strong></div>
                    </div>
                    <button style={{
                      marginTop:6, height:40, borderRadius:8,
                      background:C.yellow, border:`1px solid ${C.yellowDk}`, color:"#1a0d2b",
                      fontWeight:800, fontSize:13.5, cursor:"pointer",
                    }}>{title}</button>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    );
  };

  /* Top-level deposit modal (opens from the topbar Deposit button) */
  const DepositModal = () => (
    <div style={{position:"fixed", inset:0, background:"rgba(15,8,42,.65)", backdropFilter:"blur(4px)", zIndex:140, display:"grid", placeItems:"center"}} onClick={()=>{ setDepositOpen(false); setExpandedMethod(null); }}>
      <div style={{width:640, maxHeight:"85vh", overflow:"auto", background:C.bg, borderRadius:14, boxShadow:"0 30px 60px -15px rgba(15,8,42,.7)", border:`1px solid ${C.border}`}} onClick={e=>e.stopPropagation()}>
        <div style={{padding:"16px 20px", display:"flex", alignItems:"center", borderBottom:`1px solid ${C.borderSub}`}}>
          <div style={{fontSize:20, fontWeight:800, color:C.text}}>Deposit</div>
          <div style={{flex:1}}/>
          <button onClick={()=>{ setDepositOpen(false); setExpandedMethod(null); }} style={{width:34, height:34, borderRadius:8, background:"transparent", border:`1px solid ${C.border}`, color:C.text2, display:"grid", placeItems:"center", cursor:"pointer"}}><Icon name="x" size={13}/></button>
        </div>
        <div style={{padding:18}}>
          <MethodList kind="deposit" title="Deposit"/>
        </div>
      </div>
    </div>
  );

  return (
    <div className="page">
      {/* Backend wiring callout — what the CTO is looking at and where
          each player-visible value comes from. Plain English. */}
      <div className="page__header">
        <div>
          <div className="page__title" style={{display:"inline-flex", alignItems:"center"}}>
            Frontend preview
            <Tip>Read-only preview of what the player sees on the casino site, driven by the live back-office configuration. Useful for verifying that a method / fee / limit change actually surfaces correctly on the player UI before you publish it.</Tip>
          </div>
          <div className="page__subtitle">Player-facing UI · driven live by the back-office configuration</div>
        </div>
        <div className="page__actions">
          <span className="paybo-v2__tag"><Icon name="info" size={10}/> Read-only preview</span>
        </div>
      </div>

      <div style={{display:"flex", alignItems:"center", gap:10, padding:"10px 14px", borderRadius:10,
        background:"var(--warn-50, #fef3c7)", border:"1px solid var(--warn-200, #fde68a)", marginBottom:14, fontSize:12.5, color:"var(--warn-700, #92400e)"}}>
        <Icon name="info" size={14}/>
        <div style={{flex:1, lineHeight:1.5}}>
          <strong>Informational preview page.</strong> This page mirrors the player-facing frontend driven by the live back-office configuration. It opens in a separate browser tab so it does not interfere with the main back office. Read-only — changes made in Settings appear here automatically.
        </div>
      </div>

      <div className="paybo-devcard" style={{marginBottom:14}}>
        <h3 style={{margin:0, fontSize:14}}>Backend wiring · what drives what</h3>
        <p style={{fontSize:12.5, marginTop:6}}>This page renders the same JuegoJoker-style player UI a real customer would see, and pulls every dynamic value from the back-office. Same logic as Rainbet / BC.Game — one configuration source, two surfaces (operator + player).</p>
        <ul style={{fontSize:12.5, lineHeight:1.7, marginTop:6}}>
          <li><strong>Brand &amp; currency</strong> ← active brand selector. Currently <strong>{activeBrand.name}</strong> ({cur}). Change in the brand switcher to re-render.</li>
          <li><strong>Visible methods + per-tx min/max + fee %</strong> ← <code>Settings → Payment methods</code>. Each method's enabled flag, min, max, and fee feed straight into the rows below.</li>
          <li><strong>Processing time</strong> ← <code>Settings → Providers → Settlement timing</code> (T+0 / T+1 / T+2). Card &amp; wallet methods are mapped from PSPs, bank wires render T+x, crypto reads "network confirms".</li>
          <li><strong>Player level + auto-approve threshold</strong> ← <code>Settings → Levels</code>. Switch the level here to see how the Daily / Weekly / Monthly caps surface to the player:</li>
        </ul>
        <div style={{display:"flex", gap:6, flexWrap:"wrap", marginTop:8}}>
          {LEVELS.map(l => {
            const on = l.name === playerLevel;
            return (
              <button key={l.id} onClick={()=>setPlayerLevel(l.name)} style={{
                padding:"5px 12px", borderRadius:999, border:`1px solid ${on ? "var(--primary, #1e40af)" : "var(--border-default)"}`,
                background: on ? "color-mix(in oklab, var(--primary, #1e40af) 8%, white)" : "#fff",
                color: on ? "var(--primary-dark, #1e3a8a)" : "var(--text-secondary)",
                fontWeight: on ? 700 : 500, fontSize:12, cursor:"pointer",
              }}>
                <span style={{display:"inline-block", width:8, height:8, borderRadius:2, background:l.color, marginRight:6, verticalAlign:"middle"}}/>
                {l.name}
              </button>
            );
          })}
        </div>
        <p style={{fontSize:12, color:"var(--text-tertiary)", marginTop:10, lineHeight:1.6}}>
          In production each value reaches the player via <code>GET /api/v1/methods?brand={"{brandId}"}&amp;player={"{playerId}"}</code>. The endpoint returns exactly the shape rendered here (id, enabled, min, max, fee_pct, processing, daily_remaining, weekly_remaining, monthly_remaining). The same response format is used across the operator's Methods table — single source of truth.
        </p>
      </div>

      {/* JuegoJoker-style frame */}
      <div style={{
        background: C.bg, color: C.text, borderRadius:14, overflow:"hidden",
        border:`1px solid ${C.border}`, boxShadow:"0 12px 30px -10px rgba(15,8,42,.45)",
        display:"flex", flexDirection:"column", height:"calc(100vh - 280px)", minHeight:640,
      }}>
        <Topbar/>
        <div style={{flex:1, display:"flex", overflow:"hidden"}}>
          <Sidebar/>
          <div style={{flex:1, overflow:"auto"}}>
            {view === "casino"  && <CasinoView/>}
            {view === "account" && <AccountView/>}
          </div>
        </div>
      </div>

      {depositOpen && <DepositModal/>}
    </div>
  );
};

window.Frontend = Frontend;