/* global React, Btn, Eyebrow, Display, Wordmark */
const { useState: useStateFAQ } = React;

const FAQ_SECTIONS = [
  {
    title: "Aan de slag",
    items: [
      {
        q: "Hoe maak ik een account aan?",
        a: "Ga naar kwisthet.be en klik op 'Account maken'. Vul je e-mailadres, een wachtwoord en je naam in. Je bent direct klaar om quizzes te maken.",
      },
      {
        q: "Moet ik betalen om Kwist het! te gebruiken?",
        a: "Nee, het Free-plan is gratis en bevat alles wat je nodig hebt om te starten: 2 quizzes, 5 spelers per sessie en toegang tot de AI-wizard. Voor meer mogelijkheden kun je upgraden naar Party of Quizkrak.",
      },
      {
        q: "Hoe maak ik mijn eerste quiz?",
        a: "Na het inloggen klik je op 'Nieuwe quiz' op je dashboard. Je kunt kiezen tussen de AI-wizard (die genereert vragen op basis van een onderwerp) of de handmatige editor. De AI-wizard is het snelst: kies een onderwerp, toon, moeilijkheid en aantal vragen — binnen 30 seconden heb je een volledige quiz.",
      },
      {
        q: "Wat is Quick Party?",
        a: "Quick Party is de snelste manier om een quiz te starten. Kies een onderwerp en optioneel een leeftijdsgroep, en AI genereert ter plekke een quiz die direct speelbaar is. De quiz verdwijnt na 24 uur en telt niet mee voor je quiz-limiet.",
      },
    ],
  },
  {
    title: "Spelen & deelnemen",
    items: [
      {
        q: "Hoe doen spelers mee aan een quiz?",
        a: "Spelers gaan naar kwisthet.be/join en voeren de sessiecode in (bijv. KW-A3X9) die op het hostscherm staat. Ze hoeven geen account aan te maken — alleen een naam invullen en ze zitten erin.",
      },
      {
        q: "Op welke apparaten werkt het?",
        a: "Kwist het! werkt in elke moderne browser — telefoon, tablet, laptop of desktop. Geen app-installatie nodig. Spelers gebruiken meestal hun telefoon, de host een laptop of desktop.",
      },
      {
        q: "Hoeveel spelers kunnen er meedoen?",
        a: "Dat hangt af van je plan. Free: max 5 spelers, Party: max 25 spelers, Quizkrak en Enterprise: onbeperkt.",
      },
      {
        q: "Wat als een speler de verbinding verliest?",
        a: "Geen paniek! Spelers kunnen herverbinden door dezelfde join-URL opnieuw te openen. Ze krijgen een 'Welkom terug'-scherm en kunnen verdergaan met hun bestaande score. Hun voortgang gaat niet verloren.",
      },
      {
        q: "Moeten spelers betalen?",
        a: "Nee, nooit. Spelers betalen niets, ook niet als de host een betaald plan heeft. Deelname is altijd gratis.",
      },
    ],
  },
  {
    title: "De quiz hosten",
    items: [
      {
        q: "Hoe start ik een live sessie?",
        a: "Open een quiz op je dashboard en klik op 'Speel'. Er wordt een lobby aangemaakt met een unieke code. Deel deze code met je deelnemers. Zodra iedereen erin zit, klik je op 'Start' en de quiz begint.",
      },
      {
        q: "Wat is de projectorview?",
        a: "De projectorview is een apart venster dat automatisch opent wanneer je een sessie start. Sleep dit naar een beamer of tweede scherm — het toont de vragen (zonder antwoorden) zodat iedereen kan meelezen. Op je eigen scherm hou je de regie.",
      },
      {
        q: "Kan ik de quiz pauzeren?",
        a: "Ja! Druk op 'Pauzeer quiz' in de hostview. De projector toont een pauzescherm met de tussenstand en een leuk grapje. Druk op 'Hervat quiz' om verder te gaan.",
      },
      {
        q: "Hoe werkt de puntentelling?",
        a: "Spelers krijgen punten voor correcte antwoorden. Hoe sneller ze antwoorden, hoe meer punten. De exacte formule: basispunten (100) + snelheidsbonus op basis van de resterende tijd.",
      },
      {
        q: "Kan ik rondes/blokken instellen?",
        a: "Ja, je kunt vragen indelen in blokken (rondes). Na elke ronde verschijnt automatisch een tussenstand op de projector. Definieer blokken in de quiz-editor door vragen aan een rondenaam toe te wijzen.",
      },
      {
        q: "Kan ik de volgorde van vragen aanpassen?",
        a: "Ja, in de quiz-editor kun je vragen slepen om de volgorde te wijzigen. De positie wordt automatisch opgeslagen.",
      },
    ],
  },
  {
    title: "Quizzes beheren",
    items: [
      {
        q: "Kan ik een quiz bewerken nadat hij is gepubliceerd?",
        a: "Ja, maar je moet de quiz eerst terugzetten naar 'concept'-status via de editor. Wijzig wat je wilt en publiceer opnieuw. Lopende sessies worden niet beïnvloed.",
      },
      {
        q: "Kan ik een quiz importeren vanuit een CSV-bestand?",
        a: "Ja (Party-plan of hoger). Maak een CSV met kolommen: position, type, prompt, option1, correct1, option2, correct2, option3, correct3, option4, correct4, answer, time_limit. Upload dit via de editor of API.",
      },
      {
        q: "Kan ik een quiz exporteren?",
        a: "Ja (Party-plan of hoger). Ga naar je quiz en klik op 'Exporteer als CSV'. Je krijgt een bestand dat je kunt bewerken in Excel of Google Sheets en opnieuw kunt importeren.",
      },
      {
        q: "Hoeveel quizzes kan ik aanmaken?",
        a: "Free: 2 quizzes, Party: 5 quizzes, Quizkrak: onbeperkt. Quick Party-quizzes tellen niet mee voor je limiet.",
      },
      {
        q: "Kan ik quizzes uit de bibliotheek kopiëren?",
        a: "Ja! Ga naar de Bibliotheek, kies een quiz en klik op 'Kopieer'. De quiz verschijnt als concept in je eigen collectie en je kunt hem aanpassen.",
      },
    ],
  },
  {
    title: "AI-generatie",
    items: [
      {
        q: "Hoe werkt de AI-wizard?",
        a: "De AI-wizard genereert vragen op basis van een onderwerp dat je kiest. Je kunt de toon (speels, serieus, sarcastisch...), moeilijkheid, aantal vragen en vraagtypes instellen. De AI maakt een volledige quiz die je kunt nakijken en aanpassen voordat je publiceert.",
      },
      {
        q: "Is er een limiet op AI-generaties?",
        a: "Ja, het Fair Use-beleid staat standaard op 20 generaties per account per dag. Dit is voldoende voor normaal gebruik. Admins kunnen deze limiet uitschakelen in het admin-portal.",
      },
      {
        q: "Kan ik een leeftijdsgroep instellen voor de AI?",
        a: "Ja! Zowel in de AI-wizard als bij Quick Party kun je een doelgroepleeftijd kiezen (bijv. 6-9 jaar, 13-16 jaar, 25+). De AI past het taalniveau en de onderwerpen aan.",
      },
      {
        q: "Welk AI-model wordt gebruikt?",
        a: "Standaard gebruikt Kwist het! Meta's Llama 3.3 70B via DeepInfra. De admin kan dit wijzigen via omgevingsvariabelen.",
      },
    ],
  },
  {
    title: "Statistieken & resultaten",
    items: [
      {
        q: "Waar vind ik mijn resultaten?",
        a: "Ga naar 'Resultaten' in de navigatie. Je ziet een overzicht van al je gespeelde sessies met datum, aantal spelers en topscores. Klik op 'Bekijk' voor een gedetailleerd overzicht per speler en per vraag.",
      },
      {
        q: "Kan ik zien welke vragen vaak fout worden beantwoord?",
        a: "Ja! In het sessiedetail zie je per vraag het percentage juiste antwoorden. In de quiz-historie (klik op een quiz in je dashboard) zie je bovendien de antwoorddistributie: welk antwoord werd het vaakst gekozen.",
      },
      {
        q: "Kan ik resultaten exporteren?",
        a: "Binnenkort. PDF-export van sessieresultaten staat op de roadmap (SES-09).",
      },
    ],
  },
  {
    title: "Technisch & privacy",
    items: [
      {
        q: "Waar worden mijn gegevens opgeslagen?",
        a: "Alle data staat op EU-servers (PostgreSQL-database). Er worden geen gegevens gedeeld met derden. De AI-vragen worden gegenereerd via DeepInfra (EU-conform).",
      },
      {
        q: "Is er AVG-compliance?",
        a: "We werken aan volledige AVG-conformiteit. Sesssiedata wordt bewaard voor statistieken. Een 'vergeet mij'-functie staat op de roadmap.",
      },
      {
        q: "Werkt het offline?",
        a: "Nee, Kwist het! vereist een actieve internetverbinding voor zowel de host als de spelers. De realtime communicatie verloopt via WebSocket.",
      },
      {
        q: "Kan ik Kwist het! zelf hosten?",
        a: "Ja! Kwist het! is een enkele container (Node.js + statische frontend) die je kunt draaien met Docker of Podman. Zie de deployment-documentatie voor instructies.",
      },
    ],
  },
  {
    title: "Account & facturatie",
    items: [
      {
        q: "Hoe wijzig ik mijn plan?",
        a: "Ga naar Instellingen en klik op 'Wijzig plan'. Je kunt op elk moment upgraden of downgraden. Bij een downgrade behoud je je bestaande quizzes, maar kun je geen nieuwe aanmaken boven de limiet.",
      },
      {
        q: "Kan ik mijn account verwijderen?",
        a: "Ja, neem contact op via hallo@kwisthet.be. We verwijderen je account en alle bijbehorende data binnen 30 dagen.",
      },
      {
        q: "Ik ben mijn wachtwoord vergeten.",
        a: "De wachtwoord-reset-functie komt binnenkort. Neem in de tussentijd contact op via hallo@kwisthet.be en we helpen je verder.",
      },
    ],
  },
];

function FAQScreen({ theme, onBack }) {
  const [search, setSearch] = useStateFAQ("");
  const [openItems, setOpenItems] = useStateFAQ({});

  const toggle = (key) => setOpenItems((prev) => ({ ...prev, [key]: !prev[key] }));

  const filtered = search.trim()
    ? FAQ_SECTIONS.map((s) => ({
        ...s,
        items: s.items.filter(
          (i) => i.q.toLowerCase().includes(search.toLowerCase()) || i.a.toLowerCase().includes(search.toLowerCase())
        ),
      })).filter((s) => s.items.length > 0)
    : FAQ_SECTIONS;

  return (
    <div style={{ minHeight: "100vh", background: theme.bg }}>
      <header style={{
        borderBottom: `3px double ${theme.rule}`,
        padding: "16px 48px",
        display: "flex", justifyContent: "space-between", alignItems: "center",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <button onClick={onBack} style={{
            background: "transparent", border: "none",
            fontFamily: theme.fonts.display, fontSize: 16, color: theme.fg, cursor: "pointer",
          }}>← terug</button>
          <div style={{ width: 1, height: 16, background: theme.rule }} />
          <Eyebrow theme={theme}>SUPPORT</Eyebrow>
        </div>
        <Wordmark size={100} />
      </header>

      <main style={{ maxWidth: 860, margin: "0 auto", padding: "40px 32px 80px" }}>
        <section style={{ borderTop: `3px double ${theme.rule}`, padding: "32px 0 24px" }}>
          <Eyebrow theme={theme} style={{ color: theme.accent, marginBottom: 10 }}>── VEELGESTELDE VRAGEN</Eyebrow>
          <Display theme={theme} size={64}>
            Hoe kunnen we <span style={{ color: theme.accent }}>helpen</span>?
          </Display>
          <p style={{ color: theme.fgDim, fontSize: 15, lineHeight: 1.55, marginTop: 16, maxWidth: 560 }}>
            Vind antwoord op je vraag, of neem contact op via hallo@kwisthet.be.
          </p>
        </section>

        <div style={{ marginTop: 24, marginBottom: 32 }}>
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Zoek in de FAQ..."
            style={{
              width: "100%",
              background: "transparent", color: theme.fg,
              border: "none", borderBottom: `1px solid ${theme.rule}`,
              padding: "12px 0",
              fontFamily: theme.fonts.display, fontSize: 22,
              outline: "none",
            }}
          />
        </div>

        {filtered.length === 0 ? (
          <div style={{ padding: "48px 0", textAlign: "center" }}>
            <Display theme={theme} size={28}>Geen resultaten gevonden.</Display>
            <p style={{ color: theme.fgDim, marginTop: 12, fontSize: 15 }}>
              Probeer een andere zoekterm, of mail ons op hallo@kwisthet.be.
            </p>
          </div>
        ) : (
          filtered.map((section, si) => (
            <div key={section.title} style={{ marginBottom: 40 }}>
              <Eyebrow theme={theme} style={{ color: theme.accent, marginBottom: 12 }}>
                ── {section.title.toUpperCase()}
              </Eyebrow>
              <div style={{ border: `1.5px solid ${theme.fg}` }}>
                {section.items.map((item, ii) => {
                  const key = `${si}-${ii}`;
                  const isOpen = openItems[key];
                  return (
                    <div key={key} style={{ borderBottom: ii < section.items.length - 1 ? `1.5px solid ${theme.fg}` : "none" }}>
                      <button onClick={() => toggle(key)} style={{
                        width: "100%", background: "transparent", border: "none",
                        padding: "16px 20px",
                        display: "flex", justifyContent: "space-between", alignItems: "center",
                        cursor: "pointer", color: theme.fg,
                        fontFamily: theme.fonts.display, fontWeight: 800, fontStyle: "italic",
                        fontSize: 17, textAlign: "left", textTransform: "lowercase",
                        letterSpacing: "-0.01em",
                      }}>
                        {item.q}
                        <span style={{
                          fontFamily: theme.fonts.mono, fontSize: 18, color: theme.accent,
                          transform: isOpen ? "rotate(45deg)" : "none", transition: "transform .15s",
                          flexShrink: 0, marginLeft: 16,
                        }}>+</span>
                      </button>
                      {isOpen && (
                        <div style={{
                          padding: "0 20px 18px",
                          fontSize: 14, lineHeight: 1.65, color: theme.fgDim,
                        }}>{item.a}</div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          ))
        )}

        <section style={{
          marginTop: 48, padding: "32px", textAlign: "center",
          border: `2px solid ${theme.fg}`,
          boxShadow: `6px 6px 0 0 ${theme.fg}`,
          background: theme.card,
        }}>
          <Display theme={theme} size={28}>Vraag niet gevonden?</Display>
          <p style={{ color: theme.fgDim, fontSize: 15, lineHeight: 1.55, marginTop: 12 }}>
            Mail ons op <b style={{ color: theme.fg }}>hallo@kwisthet.be</b> — we antwoorden binnen 24 uur.
          </p>
        </section>
      </main>
    </div>
  );
}

window.FAQScreen = FAQScreen;