// panels-b.jsx — Maps, CVAR Presets, Config Editor

// ────────────────────────────────────────────────────────────────
// Maps
// ────────────────────────────────────────────────────────────────
function MapsPanel() {
  const [active, setActive] = React.useState('de_mirage');
  const [wsId, setWsId]     = React.useState('');
  const [favOnly, setFavOnly] = React.useState(false);
  const list = favOnly ? COMP_MAPS.filter((m) => m.fav) : COMP_MAPS;

  return (
    <div>
      <div className="panel-head">
        <div>
          <h1>Maps</h1>
          <div className="sub">{COMP_MAPS.length} standard · {WORKSHOP_MAPS.length} workshop · current: <span className="ac m">de_mirage</span></div>
        </div>
        <div className="tools">
          <button className="btn"><span className="ico">{I.reload}</span>Sync workshop</button>
          <button className="btn"><span className="ico">{I.workshop}</span>Browse collection</button>
        </div>
      </div>

      <div className="body">
        {/* favorites row */}
        <SectionTitle right={
          <button className="btn ghost sm" onClick={() => setFavOnly(!favOnly)}>
            <span className="ico" style={{ color: 'var(--ac)' }}>{I.star}</span>
            {favOnly ? 'showing favs' : 'show favs only'}
          </button>
        }>Favorites</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 10 }}>
          {COMP_MAPS.filter((m) => m.fav).map((m) => (
            <button key={m.id} className={"map-card " + (active === m.id ? 'active' : '')}
                    style={{ aspectRatio: '16/8' }}
                    onClick={() => setActive(m.id)}>
              <div className="map-thumb"><MapThumb id={m.id} /></div>
              <div className="map-foot">
                <span className="name">{m.name}</span>
                <span className="mode">{m.mode}</span>
              </div>
              {active === m.id && <span className="badge ac" style={{ position: 'absolute', top: 8, left: 8 }}>active</span>}
            </button>
          ))}
        </div>

        <SectionTitle>Standard pool</SectionTitle>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
          {list.map((m) => (
            <button key={m.id} className={"map-card " + (active === m.id ? 'active' : '')}
                    onClick={() => setActive(m.id)}>
              <div className="map-thumb">
                <MapThumb id={m.id} />
                {active === m.id && (
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.55))', pointerEvents: 'none' }}/>
                )}
              </div>
              <div className="map-foot">
                <span className="name m">{m.id}</span>
                <span className="row" style={{ gap: 6 }}>
                  <span style={{ color: m.fav ? 'var(--ac)' : 'var(--fg-3)' }}>{I.star}</span>
                  <span className="mode">{m.mode}</span>
                </span>
              </div>
              {active === m.id && <span className="badge ac" style={{ position: 'absolute', top: 8, left: 8 }}><span className="dot" />active</span>}
            </button>
          ))}
        </div>

        {/* workshop */}
        <SectionTitle right={
          <span className="hint m">281 MB cached · /home/cs2/server/csgo/maps/workshop</span>
        }>Workshop</SectionTitle>

        <div className="card" style={{ marginBottom: 14 }}>
          <div className="cb" style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <div className="input" style={{ flex: 1 }}>
              <span className="ico">{I.workshop}</span>
              <input value={wsId} onChange={(e) => setWsId(e.target.value)} placeholder="workshop ID — e.g. 3070960859" />
            </div>
            <button className="btn">host_workshop_map</button>
            <button className="btn primary">Download &amp; switch</button>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
          {WORKSHOP_MAPS.map((m) => (
            <div key={m.id} className="map-card">
              <div className="map-thumb"><MapThumb id={m.name} /></div>
              <div className="map-foot" style={{ flexDirection: 'column', alignItems: 'stretch', gap: 4, padding: '8px 10px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span className="name m">{m.name}</span>
                  <span style={{ color: m.fav ? 'var(--ac)' : 'var(--fg-3)' }}>{I.star}</span>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--fg-3)', fontSize: 10 }}>
                  <span>by {m.by}</span>
                  <span>{m.subs} subs · #{m.id}</span>
                </div>
              </div>
            </div>
          ))}
        </div>

        <SectionTitle>Map cycle</SectionTitle>
        <div className="card">
          <div className="cb" style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
            <span className="hint">order:</span>
            {['de_mirage', 'de_inferno', 'de_nuke', 'de_dust2', 'de_anubis', 'de_overpass', 'de_ancient'].map((m, i) => (
              <span key={m} className="chip m">
                <span className="fg3">{(i + 1).toString().padStart(2, '0')}</span>{m}
                <span className="x">×</span>
              </span>
            ))}
            <button className="btn ghost sm"><span className="ico">{I.plus}</span>add</button>
            <div className="grow" />
            <button className="btn sm">save mapcycle.txt</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// CVAR Presets
// ────────────────────────────────────────────────────────────────
function CvarsPanel() {
  const [applied, setApplied] = React.useState(() => {
    const init = new Set();
    CVAR_GROUPS.forEach((g) => g.presets.forEach((p) => p.applied && init.add(p.id)));
    return init;
  });
  const toggle = (id) => {
    setApplied((s) => {
      const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n;
    });
  };

  const totalApplied = applied.size;

  return (
    <div>
      <div className="panel-head">
        <div>
          <h1>CVAR Presets</h1>
          <div className="sub">{totalApplied} applied · changes preview as inline rcon · server.cfg untouched until "Persist"</div>
        </div>
        <div className="tools">
          <button className="btn"><span className="ico">{I.plus}</span>New custom preset</button>
          <button className="btn"><span className="ico">{I.download}</span>Export .cfg</button>
          <button className="btn primary"><span className="ico">{I.bolt}</span>Apply all selected</button>
        </div>
      </div>

      <div className="body" style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 16 }}>
        <div>
          {CVAR_GROUPS.map((g) => (
            <div key={g.label} style={{ marginBottom: 18 }}>
              <SectionTitle right={
                <span className="hint">
                  {g.presets.filter((p) => applied.has(p.id)).length} / {g.presets.length} applied
                </span>
              }>{g.label}</SectionTitle>
              <div className="card">
                <div className="cb" style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  {g.presets.map((p) => (
                    <button key={p.id} className={"chip " + (applied.has(p.id) ? 'on' : '')}
                            onClick={() => toggle(p.id)}
                            title={p.vars}>
                      <span className={"chk " + (applied.has(p.id) ? 'on' : '')}>
                        {applied.has(p.id) && <span style={{ fontSize: 9, lineHeight: 1 }}>✓</span>}
                      </span>
                      {p.label}
                    </button>
                  ))}
                  <button className="chip" style={{ color: 'var(--fg-2)', borderStyle: 'dashed' }}>
                    <span className="ico">{I.plus}</span>custom…
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div>
          <div className="card" style={{ position: 'sticky', top: 12 }}>
            <div className="ch">
              <div className="t"><span className="ico">{I.term}</span>Inline preview</div>
              <div className="meta">{totalApplied} commands</div>
            </div>
            <div className="cb" style={{ padding: 0 }}>
              <div className="term" style={{ borderRadius: 0, border: 0, borderTop: '1px solid var(--br)' }}>
                <div className="out" style={{ maxHeight: 280 }}>
                  {[...applied].length === 0 && <div className="ln dim">// no presets selected</div>}
                  {CVAR_GROUPS.flatMap((g) => g.presets.filter((p) => applied.has(p.id))).map((p, i) => (
                    <div key={p.id} className="ln">
                      <span className="ts">#{(i + 1).toString().padStart(2, '0')}</span>
                      <span className="ok"># {p.label}</span>
                      <br />
                      <span style={{ paddingLeft: 28 }}>{syntaxColor(p.vars)}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div className="ch" style={{ borderTop: '1px solid var(--br)', borderBottom: 0 }}>
              <div className="t fg2 m" style={{ fontSize: 11 }}>⌥ ⏎ to apply &amp; persist</div>
              <button className="btn primary sm">Apply &amp; persist</button>
            </div>
          </div>

          <div className="card" style={{ marginTop: 12 }}>
            <div className="ch"><div className="t"><span className="ico">{I.bolt}</span>Quick switch</div></div>
            <div className="cb" style={{ display: 'grid', gap: 6 }}>
              <button className="btn" style={{ justifyContent: 'space-between' }}>
                <span>Match — 5v5 MR12 + OT</span>
                <span className="badge ac">active</span>
              </button>
              <button className="btn" style={{ justifyContent: 'space-between' }}>
                <span>Practice — solo nades</span>
                <span className="hint">⌘1</span>
              </button>
              <button className="btn" style={{ justifyContent: 'space-between' }}>
                <span>Pug — public retake</span>
                <span className="hint">⌘2</span>
              </button>
              <button className="btn" style={{ justifyContent: 'space-between' }}>
                <span>LAN — sv_lan 1, no auth</span>
                <span className="hint">⌘3</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Config editor
// ────────────────────────────────────────────────────────────────
function ConfigPanel() {
  const [path, setPath] = React.useState(['cfg', 'gamemodes', 'gamemode_competitive_server.cfg']);
  const [dirty, setDirty] = React.useState(true);
  return (
    <div>
      <div className="panel-head">
        <div>
          <h1>Config Editor</h1>
          <div className="sub m">/home/cs2/server/csgo/<span className="fg">{path.join('/')}</span></div>
        </div>
        <div className="tools">
          <span className={"badge " + (dirty ? 'warn' : '')}>{dirty ? 'unsaved' : 'saved'}</span>
          <button className="btn"><span className="ico">{I.reload}</span>Reload from disk</button>
          <button className="btn"><span className="ico">{I.term}</span>exec via rcon</button>
          <button className="btn primary" onClick={() => setDirty(false)}>
            <span className="ico">{I.check}</span>Save &amp; apply
          </button>
        </div>
      </div>

      <div className="body flush" style={{ display: 'grid', gridTemplateColumns: '260px 1fr', height: 'calc(100vh - var(--hdr-h) - var(--foot-h) - 70px)' }}>
        <div style={{ borderRight: '1px solid var(--br)', background: 'var(--bg-1)', overflow: 'auto' }}>
          <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--br)', display: 'flex', alignItems: 'center', gap: 8 }}>
            <span className="ico fg3">{I.folder}</span>
            <span className="m" style={{ fontSize: 12 }}>cfg/</span>
            <div className="grow" />
            <button className="btn sm ghost"><span className="ico">{I.plus}</span></button>
          </div>
          <FileTree node={CONFIG_TREE.cfg} path={['cfg']} active={path} onSelect={setPath} />
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden' }}>
          <div style={{
            display: 'flex', alignItems: 'center', padding: '0 14px', height: 34,
            borderBottom: '1px solid var(--br)', background: 'var(--bg-1)',
            fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--fg-2)',
          }}>
            <span className="ico fg3" style={{ marginRight: 6 }}>{I.file}</span>
            {path.map((p, i) => (
              <React.Fragment key={i}>
                <span style={{ color: i === path.length - 1 ? 'var(--fg)' : 'var(--fg-2)' }}>{p}</span>
                {i < path.length - 1 && <span className="fg3" style={{ margin: '0 6px' }}>›</span>}
              </React.Fragment>
            ))}
            <div className="grow" />
            <span className="hint">utf-8 · LF · 86 lines · last edit 12m ago by <span className="fg2">m0use@</span></span>
          </div>

          <div style={{ flex: 1, overflow: 'auto' }}>
            <ConfigEditor onEdit={() => setDirty(true)} />
          </div>

          <div style={{ display: 'flex', alignItems: 'center', padding: '6px 14px', height: 26, borderTop: '1px solid var(--br)', background: 'var(--bg-1)', fontFamily: 'var(--mono)', fontSize: 10.5, color: 'var(--fg-3)', gap: 14 }}>
            <span>Ln 12, Col 28</span>
            <span>Spaces: 2</span>
            <span>cfg (cvar)</span>
            <div className="grow" />
            <span>0 problems</span>
            <span>git: <span className="fg2">main</span> · +4 −2</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function FileTree({ node, path, active, onSelect, depth = 0 }) {
  return (
    <div className="ftree" style={{ padding: depth === 0 ? '6px 0 16px' : 0 }}>
      {Object.entries(node).map(([name, val]) => {
        const isFile = typeof val === 'object' && 'lines' in val;
        const here = [...path, name];
        const on = here.join('/') === active.join('/');
        return isFile ? (
          <div key={name} className={"ent " + (on ? 'on' : '')} onClick={() => onSelect(here)}
               style={{ marginLeft: depth * 14 }}>
            <span className="ico">{I.file}</span>
            <span className="nm">{name}</span>
            <span className="ext">{val.modified}</span>
          </div>
        ) : (
          <div key={name} className="dir">
            <div className="ent" style={{ marginLeft: depth * 14, color: 'var(--fg)' }}>
              <span className="ico" style={{ color: 'var(--fg-2)' }}>{I.folder}</span>
              <span className="nm">{name}</span>
              <span className="ext">{Object.keys(val).length}</span>
            </div>
            <FileTree node={val} path={here} active={active} onSelect={onSelect} depth={depth + 1} />
          </div>
        );
      })}
    </div>
  );
}

function ConfigEditor({ onEdit }) {
  const lines = COMP_CFG.split('\n');
  return (
    <div className="editor" onClick={onEdit}>
      <div className="gutter">
        {lines.map((_, i) => <div key={i}>{i + 1}</div>)}
      </div>
      <div className="code">
        {lines.map((l, i) => (
          <div key={i}>{colorCfg(l)}{'\n'}</div>
        ))}
      </div>
    </div>
  );
}
function colorCfg(line) {
  if (line.trim().startsWith('//')) return <span className="com">{line}</span>;
  const m = line.match(/^(\s*)([a-z_]+)(\s+)(.+?)?(\s*)$/i);
  if (!m) return line;
  const [, lead, name, sp, rest = ''] = m;
  const isCv = /^(mp_|sv_|host_|matchzy_|tv_|cl_|bot_)/.test(name);
  let val = rest;
  let valEl = <span className="num">{val}</span>;
  if (/^".+"$/.test(val)) valEl = <span className="str">{val}</span>;
  else if (isNaN(Number(val))) valEl = <span className="lo">{val}</span>;
  return (
    <>
      {lead}
      <span className={isCv ? 'cv' : 'key'}>{name}</span>
      {sp}
      {valEl}
    </>
  );
}

Object.assign(window, { MapsPanel, CvarsPanel, ConfigPanel });