/* global React, NereusIcons */
const I_q = NereusIcons;
const { useState: useStateQ } = React;

/* ── Categories ─────────────────────────────────────────── */
const CHQ_CATS = [
  { id: 'phish',   name: 'Adathalászat és e-mail',        Icon: I_q.Mail },
  { id: 'access',  name: 'Hozzáférés és jelszavak',       Icon: I_q.KeyRound },
  { id: 'respond', name: 'Reagálás és helyreállítás',     Icon: I_q.Bell },
  { id: 'env',     name: 'Eszközök, szabályok, környezet', Icon: I_q.Globe },
  { id: 'reg',     name: 'Szabályozási tudatosság (NIS2)', Icon: I_q.ShieldChk },
];

/* ── Questions (each option worth its index 0–3) ────────── */
const CHQ_QUESTIONS = [
  { cat: 'phish',
    q: 'Milyen gyakran kapnak a munkatársak adathalászat-felismerési képzést?',
    opts: ['Soha / nem volt ilyen', 'Egyszer, belépéskor', 'Évente egyszer', 'Rendszeresen, gyakorlati szimulációkkal'] },
  { cat: 'phish',
    q: 'Egy munkatárs e-mailt kap a „vezérigazgatótól”, hogy sürgősen utaljon át nagyobb összeget egy új számlaszámra. Mi történne nálatok?',
    opts: ['Valószínűleg utalna, ha hihető', 'Nem tudom, nincs erre szabály', 'Rákérdezne, de nincs rögzített folyamat', 'Kötelező, többlépcsős jóváhagyás van ilyenre'] },
  { cat: 'phish',
    q: 'Tesztelték már valós körülmények között (pl. szimulált kampánnyal), hogy a munkatársak felismerik-e az adathalász leveleket?',
    opts: ['Soha', 'Egyszer próbáltuk', 'Igen, de régen', 'Rendszeresen futtatunk ilyet'] },
  { cat: 'access',
    q: 'Be van kapcsolva a kétlépcsős azonosítás (MFA) a céges fiókoknál (e-mail, felhő, banki)?',
    opts: ['Nincs / nem tudom', 'Csak néhány kiemelt fióknál', 'A legtöbb fontos rendszernél', 'Mindenhol kötelező'] },
  { cat: 'access',
    q: 'Hogyan kezelik a munkatársak a jelszavakat?',
    opts: ['Egyszerű, ismételt jelszavak, néha leírva', 'Mindenki a saját módszerével', 'Vannak szabályok, de nincs ellenőrzés', 'Jelszókezelő + kötelező erős jelszavak'] },
  { cat: 'access',
    q: 'Mi történik egy munkatárs hozzáféréseivel, amikor kilép?',
    opts: ['Nincs egységes folyamat', 'Letiltjuk, de nem azonnal', 'Van folyamat, de manuális/lassú', 'Azonnali, dokumentált hozzáférés-megvonás'] },
  { cat: 'respond',
    q: 'Tudják a munkatársak, mit kell tenniük, ha gyanús e-mailt kapnak vagy úgy érzik, fertőzött a gépük?',
    opts: ['Nem hiszem', 'Talán szólnának valakinek', 'Van kapcsolattartó, de nincs leírt folyamat', 'Egyértelmű, ismert bejelentési folyamat van'] },
  { cat: 'respond',
    q: 'Hogyan álltok a biztonsági mentésekkel?',
    opts: ['Nincs rendszeres mentés / nem tudom', 'Néha mentünk, de visszaállítást nem teszteltünk', 'Rendszeres mentés van', 'Rendszeres mentés + tesztelt visszaállítás + különálló példány'] },
  { cat: 'env',
    q: 'Hogyan védettek azok az eszközök, amikről otthonról vagy útközben dolgoznak?',
    opts: ['Sehogy / privát eszközök kontroll nélkül', 'Van vírusirtó, de nincs egységes szabály', 'Céges eszközök alapvédelemmel', 'Központi felügyelet, titkosítás, VPN, frissítéskezelés'] },
  { cat: 'env',
    q: 'Van írott informatikai biztonsági szabályzatotok, amit a munkatársak ismernek?',
    opts: ['Nincs', 'Van valami, de senki nem olvasta', 'Van, de nem aktuális', 'Naprakész, és mindenkivel megismertetjük'] },
  { cat: 'env',
    q: 'Foglalkoztok azzal, hogy a beszállítóitok/partnereitek mennyire biztonságosak, ha hozzáférnek az adataitokhoz?',
    opts: ['Egyáltalán nem', 'Csak ha probléma van', 'Nagyobb partnereknél megnézzük', 'Szerződésben és átvilágítással kezeljük'] },
  { cat: 'reg',
    q: 'Tisztában vagytok vele, hogy a cégetekre vonatkozik-e a NIS2 szabályozás?',
    opts: ['Nem tudom, mi az a NIS2', 'Hallottunk róla, de nem néztünk utána', 'Tudjuk, vonatkozik-e ránk', 'Tudjuk, és léptünk is a megfelelésért'] },
];

const CHQ_SIZES   = ['1–10 fő', '11–50 fő', '51–250 fő', '250+ fő'];
const CHQ_SECTORS = ['IT / Tech', 'Pénzügy', 'Egészségügy', 'Ipar / Gyártás', 'Kereskedelem', 'Közszféra', 'Egyéb'];

/* ── Tiers ──────────────────────────────────────────────── */
function chqTier(score) {
  if (score <= 12) return {
    key: 'low', cls: 'tier-low', label: 'Magas kockázat',
    verdict: 'Itt komoly rések vannak — érdemes most lépni.',
    sub: 'Több alapvető védelmi réteg hiányzik. A jó hír: pont ezek azok, amiket gyorsan és olcsón be lehet vezetni — egy konzultáción megmutatjuk, mivel kezdjétek.',
    cta: { h: 'Beszéljük át egy ingyenes konzultáción', p: 'Egy 30 perces beszélgetésen átnézzük a leggyengébb pontokat és egy konkrét, priorizált akciótervet adunk.', btn: 'Ingyenes konzultáció', href: 'kapcsolat' },
  };
  if (score <= 24) return {
    key: 'mid', cls: 'tier-mid', label: 'Jók az alapok, de jelentős rések vannak',
    verdict: 'Az alapok megvannak — de a kockázat még jelentős.',
    sub: 'Néhány terület már rendben van, máshol viszont komoly hézagok maradtak. Egy célzott tréning és pár folyamat-finomítás sokat dobhat a felkészültségen.',
    cta: { h: 'Konzultáció + testreszabott tréning', p: 'Megnézzük, hol a legnagyobb a kockázat, és összeállítunk egy képzési + folyamatfejlesztési tervet a csapatotokra.', btn: 'Kérek egy konzultációt', href: 'kapcsolat' },
  };
  return {
    key: 'high', cls: 'tier-high', label: 'Jó alap',
    verdict: 'Erős alapok — most a finomhangolás jön.',
    sub: 'A tudatosság és a folyamatok java része a helyén van. Innen a következő szint a rendszeres mérés és gyakorlás — egy phishing szimuláció megmutatja, mennyire tartós a felkészültség.',
    cta: { h: 'Mérd le élesben — phishing szimuláció', p: 'A felkészültség akkor igazolt, ha valós körülmények között is kiállja a próbát. Egy szimulált kampánnyal pontos képet adunk.', btn: 'Phishing szimuláció', href: 'phishing-szimulacio' },
  };
}

/* ── Donut ring ─────────────────────────────────────────── */
function ChqRing({ score, max }) {
  const r = 66, c = 2 * Math.PI * r;
  const pct = score / max;
  return (
    <div className="chq-result-ring">
      <svg width="150" height="150" viewBox="0 0 150 150">
        <circle cx="75" cy="75" r={r} fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="10" />
        <circle cx="75" cy="75" r={r} fill="none" stroke="#fff" strokeWidth="10"
          strokeLinecap="round"
          strokeDasharray={c} strokeDashoffset={c * (1 - pct)}
          style={{ transition: 'stroke-dashoffset 1s var(--ease-out)' }} />
      </svg>
      <div className="chq-result-ring-label">
        <span className="chq-result-ring-n">{score}</span>
        <span className="chq-result-ring-max">/ {max} pont</span>
      </div>
    </div>
  );
}

/* ── Main quiz ──────────────────────────────────────────── */
function CyberHygieneQuiz() {
  const [stage, setStage] = useStateQ('intro'); // intro | quiz | result
  const [size, setSize] = useStateQ(null);
  const [sector, setSector] = useStateQ(null);
  const [step, setStep] = useStateQ(0);
  const [answers, setAnswers] = useStateQ({}); // {qIdx: optIdx}

  const total = CHQ_QUESTIONS.length;

  const pick = (optIdx) => {
    const next = { ...answers, [step]: optIdx };
    setAnswers(next);
    setTimeout(() => {
      if (step < total - 1) setStep(step + 1);
      else { setStage('result'); window.scrollTo({ top: 0, behavior: 'smooth' }); }
    }, 220);
  };

  const score = Object.values(answers).reduce((a, b) => a + b, 0);
  const maxScore = total * 3;

  // Per-category scores
  const catScores = CHQ_CATS.map((cat) => {
    const idxs = CHQ_QUESTIONS.map((q, i) => (q.cat === cat.id ? i : -1)).filter(i => i >= 0);
    const got = idxs.reduce((a, i) => a + (answers[i] || 0), 0);
    const max = idxs.length * 3;
    return { ...cat, got, max, pct: got / max };
  });
  const weakest = [...catScores].sort((a, b) => a.pct - b.pct).slice(0, 2).map(c => c.id);

  /* ── Intro ── */
  if (stage === 'intro') {
    return (
      <div className="chq">
        <div className="chq-body">
          <div className="chq-intro-head">
            <div className="chq-intro-icon"><I_q.ShieldChk size={30} /></div>
            <h2 className="chq-intro-title">Mennyire felkészült a céged?</h2>
            <p className="chq-intro-sub">
              12 rövid kérdés a kiberbiztonsági higiéniátokról. A végén megkapod a pontszámot,
              a leggyengébb területeket — és egy konkrét javaslatot, hol érdemes kezdeni.
            </p>
            <div className="chq-intro-meta">
              <span><I_q.Clock size={13} /> ~3 perc</span>
              <span><I_q.ListChk size={13} /> 12 kérdés</span>
              <span><I_q.Lock size={13} /> Anonim</span>
            </div>
          </div>

          <div className="chq-field">
            <label className="chq-field-label">Hány fős a szervezetetek?</label>
            <div className="chq-chips">
              {CHQ_SIZES.map((s) => (
                <button key={s} className={`chq-chip ${size === s ? 'is-selected' : ''}`} onClick={() => setSize(s)}>{s}</button>
              ))}
            </div>
          </div>
          <div className="chq-field">
            <label className="chq-field-label">Melyik szektorban működtök?</label>
            <div className="chq-chips">
              {CHQ_SECTORS.map((s) => (
                <button key={s} className={`chq-chip ${sector === s ? 'is-selected' : ''}`} onClick={() => setSector(s)}>{s}</button>
              ))}
            </div>
          </div>

          <button
            className="nl-btn nl-btn-primary nl-btn-lg"
            style={{ width: '100%', justifyContent: 'center', marginTop: 12, opacity: size && sector ? 1 : 0.5, pointerEvents: size && sector ? 'auto' : 'none' }}
            onClick={() => setStage('quiz')}>
            Kezdjük <I_q.ArrowR size={16} />
          </button>
        </div>
      </div>
    );
  }

  /* ── Result ── */
  if (stage === 'result') {
    const tier = chqTier(score);
    const weakNames = catScores.filter(c => weakest.includes(c.id)).map(c => c.name);
    return (
      <div className="chq">
        <div className={`chq-result-head ${tier.cls}`}>
          <div className="chq-result-tier">{tier.label}</div>
          <ChqRing score={score} max={maxScore} />
          <h2 className="chq-result-verdict">{tier.verdict}</h2>
          <p className="chq-result-verdict-sub">{tier.sub}</p>
        </div>

        <div className="chq-result-body">
          <h3 className="chq-weak-head">A leggyengébb pontjaitok: {weakNames.join(', ')}</h3>
          <p className="chq-weak-sub">
            {size} · {sector} — íme, hogyan álltok területenként. A piros sávok azok, ahol a legnagyobb a lemaradás.
          </p>

          <div className="chq-cat-list">
            {catScores.map((c) => {
              const weak = weakest.includes(c.id);
              return (
                <div key={c.id} className={`chq-cat ${weak ? 'is-weak' : ''}`}>
                  <span className="chq-cat-icon"><c.Icon size={18} /></span>
                  <div className="chq-cat-body">
                    <div className="chq-cat-name">
                      {c.name}
                      {weak && <span className="chq-cat-flag">FÓKUSZ</span>}
                    </div>
                    <div className="chq-cat-track">
                      <div className="chq-cat-fill" style={{ width: `${Math.max(c.pct * 100, 4)}%` }}></div>
                    </div>
                  </div>
                  <span className="chq-cat-score">{c.got}/{c.max}</span>
                </div>
              );
            })}
          </div>

          <div className="chq-cta">
            <div className="chq-cta-body">
              <h4 className="chq-cta-h">{tier.cta.h}</h4>
              <p className="chq-cta-p">{tier.cta.p}</p>
            </div>
            <a href={tier.cta.href} className="chq-cta-btn">{tier.cta.btn} <I_q.ArrowR size={15} /></a>
          </div>

          <div style={{ textAlign: 'center' }}>
            <button className="chq-restart" onClick={() => { setStage('intro'); setStep(0); setAnswers({}); }}>
              <I_q.X size={13} /> Újrakezdem a tesztet
            </button>
          </div>
          <p className="chq-disclaimer">
            Ez az önfelmérés tájékoztató jellegű, nem helyettesít egy szakmai kockázatértékelést.
            A pontos kép egy auditból vagy konzultációból rajzolódik ki.
          </p>
        </div>
      </div>
    );
  }

  /* ── Quiz ── */
  const q = CHQ_QUESTIONS[step];
  const cat = CHQ_CATS.find(c => c.id === q.cat);
  const selected = answers[step];

  return (
    <div className="chq">
      <div className="chq-top">
        <span className="chq-top-cat">
          <span className="chq-top-cat-icon"><cat.Icon size={17} /></span>
          {cat.name}
        </span>
        <span className="chq-top-count">{step + 1} / {total}</span>
      </div>
      <div className="chq-progress">
        <div className="chq-progress-bar" style={{ width: `${((step + 1) / total) * 100}%` }}></div>
      </div>

      <div className="chq-body">
        <div className="chq-qnum">{String(step + 1).padStart(2, '0')}. kérdés</div>
        <h2 className="chq-q">{q.q}</h2>
        <div className="chq-options">
          {q.opts.map((opt, i) => (
            <button key={i} className={`chq-opt ${selected === i ? 'is-selected' : ''}`} onClick={() => pick(i)}>
              <span className="chq-opt-mark">{selected === i ? <I_q.Check size={13} /> : null}</span>
              <span className="chq-opt-text">{opt}</span>
            </button>
          ))}
        </div>

        <div className="chq-nav">
          <button className="chq-back" disabled={step === 0} onClick={() => setStep(Math.max(0, step - 1))}>
            ← Vissza
          </button>
          <div className="chq-dots">
            {CHQ_QUESTIONS.map((_, i) => (
              <span key={i} className={`chq-dot ${i < step ? 'is-done' : ''}${i === step ? ' is-current' : ''}`}></span>
            ))}
          </div>
          <span style={{ width: 56 }}></span>
        </div>
      </div>
    </div>
  );
}

window.CyberHygieneQuiz = CyberHygieneQuiz;