const { Button, Field, MonoLabel, BrandMark, ProfileRow, WindowFrame, Atmosphere, FloatCard, StatusBar, IconRail } = window.MultitabsDesignSystem_8f59a9;

const ACCOUNTS = {
  pt: [
    { id:"p1", name:"jogo 1", tag:"#01", status:"online", uptime:"2m 8s", cpu:"3.9%", ram:"338 MB", domain:"seujogo.com.br", email:"conta01@exemplo.com" },
    { id:"p2", name:"jogo 2", tag:"#02", status:"online", uptime:"2m 8s", cpu:"5.2%", ram:"353 MB", domain:"seujogo.com.br", email:"conta02@exemplo.com" },
    { id:"p3", name:"jogo 3", tag:"#03", status:"online", uptime:"2m 8s", cpu:"4.5%", ram:"353 MB", domain:"seujogo.com.br", email:"conta03@exemplo.com" },
    { id:"p4", name:"jogo 4", tag:"#04", status:"online", uptime:"2m 8s", cpu:"2.9%", ram:"354 MB", domain:"seujogo.com.br", email:"conta04@exemplo.com" }
  ],
  en: [
    { id:"p1", name:"game 1", tag:"#01", status:"online", uptime:"2m 8s", cpu:"3.9%", ram:"338 MB", domain:"yourgame.com", email:"account01@example.com" },
    { id:"p2", name:"game 2", tag:"#02", status:"online", uptime:"2m 8s", cpu:"5.2%", ram:"353 MB", domain:"yourgame.com", email:"account02@example.com" },
    { id:"p3", name:"game 3", tag:"#03", status:"online", uptime:"2m 8s", cpu:"4.5%", ram:"353 MB", domain:"yourgame.com", email:"account03@example.com" },
    { id:"p4", name:"game 4", tag:"#04", status:"online", uptime:"2m 8s", cpu:"2.9%", ram:"354 MB", domain:"yourgame.com", email:"account04@example.com" }
  ]
};

const STRINGS = {
  pt: {
    yourGame:"SEU JOGO", account:(tag)=>`Conta ${tag} · sessão isolada`, email:"E-mail", password:"Senha", login:"Entrar",
    newHere:"Novo por aqui?", createAccount:"Criar uma conta", addAccount:"＋ Adicionar conta", settings:"Ajustes",
    profiles:"Perfis", instances:(total,active)=>`${total} instâncias · ${active} ativas`, main:"Principal",
    panelsInGrid:(n)=>`${n} painéis na grade`, connected:"Conectado"
  },
  en: {
    yourGame:"YOUR GAME", account:(tag)=>`Account ${tag} · isolated session`, email:"Email", password:"Password", login:"Log in",
    newHere:"New here?", createAccount:"Create an account", addAccount:"＋ Add account", settings:"Settings",
    profiles:"Profiles", instances:(total,active)=>`${total} instances · ${active} active`, main:"Main",
    panelsInGrid:(n)=>`${n} panels in the grid`, connected:"Connected"
  }
};

function GamePanel({ acct, compact = false, s }) {
  return (
    <FloatCard maxWidth={compact ? 230 : 290} padding={compact ? "14px" : "18px 18px 16px"}>
      <div style={{ display:"flex", flexDirection:"column", alignItems:"center", gap:compact?4:6, marginBottom:compact?10:14 }}>
        {compact ? null : <div style={{ width:34, height:34, borderRadius:"var(--r-7)", background:"var(--grad-tile-soft)", border:"1px solid var(--red-a40)", display:"flex", alignItems:"center", justifyContent:"center", color:"var(--accent)", fontSize:15 }}>◆</div>}
        <div style={{ fontSize:compact?14:17, fontWeight:800, letterSpacing:".4px", color:"var(--accent)", textShadow:"var(--glow-text)" }}>{s.yourGame}</div>
        {compact ? null : <MonoLabel size="var(--fs-9)">{s.account(acct.tag)}</MonoLabel>}
      </div>
      <div style={{ display:"flex", flexDirection:"column", gap:compact?6:8 }}>
        <Field label={s.email} value={acct.email} />
        {compact ? null : <Field label={s.password} masked value="x" />}
        <Button variant="primary" full size={compact ? "sm" : "md"}>{s.login}</Button>
        {compact ? null : <div style={{ textAlign:"center", marginTop:2, fontSize:11, color:"var(--ink-3)" }}>{s.newHere} <a href="#criar" style={{ fontWeight:700 }}>{s.createAccount}</a></div>}
      </div>
    </FloatCard>
  );
}

function AppMock({ height = 560, count = 4, cols = "1fr 1fr", lang = "pt" }) {
  const s = STRINGS[lang] || STRINGS.pt;
  const accounts = ACCOUNTS[lang] || ACCOUNTS.pt;
  const [sel, setSel] = React.useState("p1");
  const colCount = cols.trim().split(/\s+/).length;
  const rows = Math.ceil(count / colCount);
  const compact = (height - 110) / rows - 43 < 450;
  const shown = accounts.slice(0, count);
  return (
    <div style={{ display:"flex", flexDirection:"column", height, background:"var(--bg-0)", border:"1px solid var(--line-1)", borderRadius:"var(--r-8)", overflow:"hidden", boxShadow:"var(--sh-window)" }}>
      <div style={{ display:"flex", flex:1, minHeight:0 }}>
        <IconRail items={[{id:"add",glyph:"＋",label:s.addAccount}]} bottomItems={[{id:"set",glyph:"⚙",label:s.settings}]} />
        <div style={{ width:236, flex:"0 0 236px", background:"var(--bg-2)", borderRight:"1px solid var(--line-1)", display:"flex", flexDirection:"column", minHeight:0 }}>
          <div style={{ padding:"16px 16px 12px" }}><BrandMark sub={s.instances(accounts.length, count)} /></div>
          <div style={{ padding:"6px 16px 8px" }}><MonoLabel wide size="var(--fs-10)">{s.profiles}</MonoLabel></div>
          <div style={{ flex:1, minHeight:0, overflow:"hidden", padding:"0 10px", display:"flex", flexDirection:"column", gap:8 }}>
            {accounts.map(a => <ProfileRow key={a.id} {...a} selected={sel===a.id} onClick={()=>setSel(a.id)} />)}
          </div>
          <div style={{ padding:"12px 14px 16px" }}><Button variant="secondary" full>{s.addAccount}</Button></div>
        </div>
        <div style={{ flex:1, minWidth:0, display:"flex", flexDirection:"column", minHeight:0 }}>
          <div style={{ display:"flex", alignItems:"center", gap:12, padding:"13px 18px" }}>
            <span style={{ fontSize:"var(--fs-15)", fontWeight:700 }}>{s.main}</span>
            <MonoLabel size="var(--fs-10)" caps={false}>{s.panelsInGrid(count)}</MonoLabel>
          </div>
          <div style={{ flex:1, minHeight:0, overflow:"hidden", padding:"0 12px 12px", display:"grid", gap:10, gridTemplateColumns:cols, gridAutoRows:"minmax(0,1fr)" }}>
            {shown.map(a => (
              <WindowFrame key={a.id} name={a.name} domain={a.domain} status={a.status} active={sel===a.id} zoom="55%" volume={0.55} dense={compact} minHeight={0}>
                <Atmosphere />
                <GamePanel acct={a} compact={compact} s={s} />
              </WindowFrame>
            ))}
          </div>
        </div>
      </div>
      <StatusBar items={[{label:s.connected,status:"online"},{label:accounts.find(a=>a.id===sel).name}]}
        right={[{label:"CPU 22.9%"},{label:"RAM 4535 MB"},{label:"2m 9s"}]} version="v0.2.0" />
    </div>
  );
}

Object.assign(window, { AppMock, GamePanel, ACCOUNTS });