/* global React, Icon, Skull, CountUp */
const { useState: useState2 } = React;

/* ---------- data ---------- */
const SCRIPTS = [
  {
    id: 'testol-hub',
    name: 'Testol Hub',
    status: 'Working',
    premium: true,
    tags: ['Keyless', 'Universal', 'Flagship'],
    desc: 'My all-in-one MM2 menu. Silent aim, ESP, autofarm, coin grabbers and round automation in one clean GUI. It is the exact hub I run in my videos.',
    features: ['Silent Aim + ESP toggles', 'Coin & XP Autofarm', 'Auto-collect rounds', 'Mobile + PC executor support'],
    code: 'getgenv().SCRIPT_KEY = "KEYLESS"\nloadstring(game:HttpGet("https://api.jnkie.com/api/v1/luascripts/public/1712f2ca1470e28a39c092ef78c1855d04adb09310c5f765250ffc21dd667b07/download"))()',
    img: 'images/testol-hub.png',
    flip: false,
  },
  {
    id: 'item-spawner',
    name: 'Item Spawner',
    status: 'Working',
    premium: true,
    tags: ['Keyless', 'Godly + Dupe'],
    desc: 'Spawn any knife or gun and dupe your inventory. Full godly list, chroma support and instant duplication. Same spawner I showed off in my Season 2 video.',
    features: ['Full godly + chroma list', 'One-click inventory dupe', 'Search any item by name', 'No key, no waiting'],
    code: 'getgenv().SCRIPT_KEY = "KEYLESS"\nloadstring(game:HttpGet("https://api.jnkie.com/api/v1/luascripts/public/5544098dad9741511fbb33fdf92785ac87683a955eb126c9d87131525da68b61/download"))()',
    img: 'images/spawner.jpg',
    flip: true,
  },
  {
    id: 'overdrive-hub',
    name: 'Overdrive Hub Unlimited',
    status: 'Working',
    premium: true,
    tags: ['Keyless', 'No Key System'],
    desc: 'The full Overdrive H experience with the key system stripped right out. Gun and knife silent aim, auto farm and ESP, all unlocked. No Discord tasks, no checkpoints, just paste and play.',
    features: ['Gun + Knife Silent Aim', 'Auto Farm + auto-collect', 'Full Player / Role ESP', 'Unlocked, zero key system'],
    code: 'loadstring(game:HttpGet("https://pastefy.app/6j0HC4F3/raw"))()',
    img: 'images/overdrive.webp',
    flip: false,
  },
];

const STEPS = [
  { t: 'Get an executor', d: 'Download a Roblox executor that supports HttpGet. Any of the recommended ones below will run these scripts.' },
  { t: 'Copy the script', d: 'Hit the copy button on the script you want. The full loadstring lands on your clipboard instantly.' },
  { t: 'Paste & execute', d: 'Open the executor while in an MM2 server, paste the script into the box and press Execute.' },
  { t: 'Run it', d: 'The hub UI pops up in game. Toggle whatever you need. Everything is keyless, so there is nothing to unlock.' },
];

const EXECUTORS = [
  { name: 'Volt', url: 'https://voltbz.net/', plat: 'PC' },
  { name: 'Delta', url: 'https://deltaexploits.gg/', plat: 'Mobile' },
  { name: 'Potassium', url: 'https://www.potassium.pro/', plat: 'PC' },
];

const FAQS = [
  { q: 'Are the scripts really keyless?', a: 'Yep. Every script on here is 100% keyless. No Linkvertise, no checkpoints, no waiting around. Just copy it and run it.' },
  { q: 'Is it free?', a: 'Totally free. Everything here drops alongside my YouTube videos. If a script ever helps you out, subbing to the channel is the only thanks I ask for.' },
  { q: 'A script stopped working, what do I do?', a: 'MM2 updates patch scripts sometimes, it happens. When it does I push a fix and post it in my newest video. Just re-copy the loadstring here, it always points to the latest version.' },
  { q: 'Which executor should I use?', a: 'Any executor that supports HttpGet will work. The ones I list in the How to run section are what I personally test on. Stay away from sketchy executors with bundled adware.' },
  { q: 'Will I get banned?', a: 'Exploiting always carries some risk, I will be real with you. Use an alt if you are worried, and please do not be the person who ruins the game for everyone else. You run these at your own risk.' },
  { q: 'Where do I request a feature?', a: 'Drop a comment on my latest video or hit me up on TikTok. Good ideas regularly make it into the next Testol Hub update.' },
];

/* ============================================================ SCRIPTS */
function Scripts() {
  return (
    <section className="sec" id="scripts">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="kicker">// the scripts</span>
          <h2 className="display">Copy. Paste. Dominate.</h2>
          <p>Three keyless scripts, all pulled straight from my videos. Tap copy, paste it into your executor, done.</p>
        </div>
        <div className="scripts">
          {SCRIPTS.map((s) => <ScriptCard key={s.id} s={s} />)}
        </div>
      </div>
    </section>
  );
}

function ScriptCard({ s }) {
  const [copied, setCopied] = useState2(false);
  const [ref, inView] = useInView();
  const copy = async () => {
    try { await navigator.clipboard.writeText(s.code); }
    catch (e) {
      const ta = document.createElement('textarea');
      ta.value = s.code; document.body.appendChild(ta); ta.select();
      document.execCommand('copy'); ta.remove();
    }
    setCopied(true);
    window.dispatchEvent(new CustomEvent('testol-copied', { detail: s.name }));
    setTimeout(() => setCopied(false), 1800);
  };
  return (
    <article ref={ref} className={'script-card reveal' + (inView ? ' in' : '') + (s.flip ? ' flip' : '')}>
      <div className="sc-preview">
        <img className="sc-img" src={s.img} alt={s.name + ' preview'} loading="lazy" />
        <span className="sc-preview-tag">{s.name}</span>
      </div>
      <div className="script-body">
        <div className="sc-badges">
          <span className="badge badge-status"><span className="live-dot" /> {s.status}</span>
          {s.premium && <span className="badge badge-premium"><Icon.bolt /> Premium</span>}
          {s.tags.map((t) => <span key={t} className="badge badge-keyless">{t}</span>)}
        </div>
        <h3 className="script-title"><span className="st-bolt"><Icon.bolt /></span>{s.name}</h3>
        <p className="script-desc">{s.desc}</p>
        <ul className="feature-list">
          {s.features.map((f) => (
            <li key={f}><span className="tick"><Icon.check /></span> {f}</li>
          ))}
        </ul>
        <div className="code-box">
          <div className="code-hint">// paste this into your executor</div>
          <div className="code-row">
            <code className="code-text">{s.code}</code>
            <button className={'copy-btn' + (copied ? ' copied' : '')} onClick={copy}>
              {copied ? <Icon.check /> : <Icon.copy />} {copied ? 'Copied!' : 'Copy'}
            </button>
          </div>
          <div className="sc-actions">
            <button className="btn btn-accent" onClick={copy} style={{ flex: 1, justifyContent: 'center' }}>
              <Icon.copy /> Copy script
            </button>
          </div>
        </div>
      </div>
    </article>
  );
}

/* ============================================================ EXECUTE GUIDE */
function Guide() {
  return (
    <section className="sec" id="execute">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="kicker">// how to run</span>
          <h2 className="display">From copy to chaos in 4 steps</h2>
          <p>Never executed a script before? It takes about a minute. Here is the whole flow.</p>
        </div>
        <div className="steps">
          {STEPS.map((st, i) => (
            <div className="step reveal" key={i} style={{ transitionDelay: (i * 70) + 'ms' }}>
              <span className="step-num display">{i + 1}</span>
              <h4>{st.t}</h4>
              <p>{st.d}</p>
            </div>
          ))}
        </div>
        <div className="exec-row reveal">
          <span className="lbl">Recommended executors</span>
          <div className="exec-chips">
            {EXECUTORS.map((e) => (
              <a className="exec-chip" key={e.name} href={e.url} target="_blank" rel="noopener">
                <span className="pin" /> {e.name} <span className="exec-plat">{e.plat}</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================ STATS */
function Stats() {
  const cells = [
    { v: 2880, s: '', cap: 'Subscribers' },
    { v: 3000000, s: '', cap: 'Views · YT + TikTok' },
    { v: 77, s: '', cap: 'Videos' },
    { v: 3, s: '', cap: 'Live scripts' },
  ];
  return (
    <section className="stats-band" id="stats">
      <div className="stats-grid">
        {cells.map((c, i) => (
          <div className="stat-cell" key={i}>
            <div className="big display"><CountUp value={c.v} suffix={c.s} /></div>
            <div className="cap">{c.cap}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ============================================================ FAQ */
function FaqItem({ f, i, open, setOpen }) {
  const [ref, inView] = useInView();
  const isOpen = open === i;
  return (
    <div ref={ref} className={'faq-item reveal' + (inView ? ' in' : '') + (isOpen ? ' open' : '')}>
      <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)}>
        {f.q} <span className="ico">+</span>
      </button>
      <div className="faq-a" style={{ maxHeight: isOpen ? '260px' : '0' }}>
        <div className="faq-a-inner">{f.a}</div>
      </div>
    </div>
  );
}

function Faq() {
  const [open, setOpen] = useState2(0);
  return (
    <section className="sec" id="faq">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="kicker">// questions</span>
          <h2 className="display">Good to know</h2>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <FaqItem key={i} f={f} i={i} open={open} setOpen={setOpen} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================ FOOTER */
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-wordmark display">TESTOL</div>
      <div className="wrap footer-inner">
        <div>
          <div className="footer-soc">
            <a className="btn btn-sm btn-yt" href="https://www.youtube.com/@testaccountlol4465" target="_blank" rel="noopener"><Icon.yt /> YouTube</a>
            <a className="btn btn-sm btn-tt" href="https://www.tiktok.com/@testolscripts" target="_blank" rel="noopener"><Icon.tt /> TikTok</a>
          </div>
        </div>
        <p className="footer-note">
          Testol Hub is a fan project for Murder Mystery 2. My scripts are free for educational use, so run them at your own risk. Not affiliated with Roblox or MM2.
        </p>
      </div>
    </footer>
  );
}

/* ============================================================ COPY TOAST */
function Toast() {
  const [msg, setMsg] = useState2(null);
  React.useEffect(() => {
    let timer;
    const onCopy = (e) => {
      setMsg(e.detail || 'Script');
      clearTimeout(timer);
      timer = setTimeout(() => setMsg(null), 2200);
    };
    window.addEventListener('testol-copied', onCopy);
    return () => { window.removeEventListener('testol-copied', onCopy); clearTimeout(timer); };
  }, []);
  return (
    <div className={'toast' + (msg ? ' show' : '')}>
      <span className="toast-ico"><Icon.check /></span>
      <span><b>{msg}</b> copied. Paste it into your executor.</span>
    </div>
  );
}

Object.assign(window, { Scripts, Guide, Stats, Faq, Footer, Toast });