// ===== Aanmelden aan de bar (kiosk-modus) ===============================================
// Werklijst-punt 5 (WERKLIJST-UPGOLF-NA-DEMO-20260821.md, regel 73-85): gasten moeten zich kunnen
// aanmelden aan de bar, en dat mag niet thuis op te roepen zijn. Gekozen: een kiosk-modus binnen
// deze balie-app, geen losse publieke pagina. De balie draait al op een ingelogde medewerkersessie,
// dus een tablet aan de bar in dit scherm is per definitie niet ergens anders te openen: er is geen
// aparte URL of QR-code die iemand thuis kan intikken. Geen nieuwe databasefunctie nodig, en dus ook
// geen Enterprise-ronde voor dit scherm zelf. Zie het terugdraaibestand voor de volledige toelichting.
//
// EEN ECHTE BEPERKING, EN WAAROM DIE ER IS. `zoek_boeking` is de gast-veilige opzoekfunctie: hij
// geeft met opzet geen boeking_id of deelnemer_id terug (dat staat letterlijk in de functie-definitie
// op staging, nagemeten 22 augustus 2026). Zonder een id kun je niet inchecken: `zet_incheck_boeking`
// en `zet_incheck` vragen precies dat id. Er is geen nieuwe functie gebouwd om dat gat te dichten.
// In plaats daarvan gebruikt dit scherm `teesheet` (dezelfde RPC die de tee sheet al gebruikt, dus
// geen nieuwe functie) om de starttijden van VANDAAG door te zoeken op de referentie die `zoek_boeking`
// teruggaf, en zo het boeking_id te vinden. Dat kan alleen omdat dit scherm binnen de ingelogde
// balie-sessie draait; een gast-sessie zonder inlog zou `teesheet` niet mogen aanroepen.
// Is de reservering niet voor vandaag, of staat hij niet in de tee sheet van vandaag, dan checkt dit
// scherm niet in en verwijst het naar de bar. Zie TERUGDRAAI-20260822-kiosk-aanmelden-bar.md.

function Kiosk({ banen, onTerug }){
  // stap: start | zoeken | nietgevonden | andereDag | gevonden | klaar
  const [stap,setStap]=useState("start");
  const [ref,setRef]=useState("");
  const [f,setF]=useState(null);
  const [weergave,setWeergave]=useState(null);       // {starttijd, betaalstatus, spelers}
  const [boekingId,setBoekingId]=useState(null);      // alleen intern, voor de incheck-aanroep
  const [bezig,setBezig]=useState(false);

  const [terugOpen,setTerugOpen]=useState(false);
  const [terugWw,setTerugWw]=useState("");
  const [terugBezig,setTerugBezig]=useState(false);
  const [terugFout,setTerugFout]=useState(null);

  // Eén plek die alles leegmaakt. Dit is het privacypunt: na een gast blijft er niets van hem staan,
  // ook niet verborgen in een state die het scherm niet meer toont. `ref`, `weergave` en `boekingId`
  // gaan alle drie terug naar leeg, niet alleen `stap`.
  const resetTimer = React.useRef(null);
  function volledigReset(){
    if(resetTimer.current){ clearTimeout(resetTimer.current); resetTimer.current=null; }
    setStap("start"); setRef(""); setF(null); setWeergave(null); setBoekingId(null); setBezig(false);
  }
  function plantReset(ms){
    if(resetTimer.current) clearTimeout(resetTimer.current);
    resetTimer.current=setTimeout(volledigReset, ms);
  }
  useEffect(()=>()=>{ if(resetTimer.current) clearTimeout(resetTimer.current); },[]);

  async function zoek(){
    const term=ref.trim();
    if(!term || bezig) return;
    setBezig(true); setF(null); setWeergave(null); setBoekingId(null); setStap("zoeken");
    const r = await db.rpc("zoek_boeking",{p_referentie:term});
    if(r.error){ setBezig(false); setF("Dat ging niet goed. Probeer het nog eens, of meld je bij de bar."); setStap("start"); return; }
    const uit = r.data || {gevonden:false};
    if(!uit.gevonden){ setBezig(false); setStap("nietgevonden"); plantReset(7000); return; }
    const vandaag = iso(new Date());
    if(uit.datum !== vandaag){ setBezig(false); setStap("andereDag"); plantReset(7000); return; }
    if(uit.gaat_door === false){
      setBezig(false); setWeergave({starttijd:uit.starttijd, betaalstatus:uit.betaalstatus, spelers:null, gaatDoor:false});
      setStap("gevonden"); return;
    }
    // Het boeking_id opzoeken via de tee sheet van vandaag, over alle actieve banen. Zie de
    // toelichting bovenaan dit bestand voor waarom dat via `teesheet` gaat en niet via `zoek_boeking`.
    let gevonden=null;
    for(const b of (banen||[])){
      const t = await db.rpc("teesheet",{p_baan_id:b.id, p_datum:vandaag});
      if(t.error || !t.data) continue;
      for(const slot of t.data){
        const bk=(slot.boekingen||[]).find(x=>x.referentie===uit.referentie);
        if(bk){ gevonden={boeking_id:bk.boeking_id, spelers:(bk.spelers||[]).length}; break; }
      }
      if(gevonden) break;
    }
    setBezig(false);
    setBoekingId(gevonden ? gevonden.boeking_id : null);
    setWeergave({starttijd:uit.starttijd, betaalstatus:uit.betaalstatus, spelers:gevonden?gevonden.spelers:null, gaatDoor:true});
    setStap("gevonden");
  }

  async function meldAan(){
    if(!boekingId || bezig) return;
    // De betaalcheck staat OOK hier, niet alleen bij het tonen van de knop. Een voorwaarde in de
    // weergave verbergt de knop, maar houdt de aanroep zelf niet tegen; dat is precies het verschil
    // tussen iets niet laten zien en iets niet laten gebeuren. Een gast mag zichzelf nooit op betaald
    // zetten, dus deze functie weigert zelf.
    if(!weergave || weergave.betaalstatus!=="betaald" || weergave.gaatDoor===false){
      setF("Meld je bij de bar om af te rekenen."); return; }
    setBezig(true); setF(null);
    const r = await db.rpc("zet_incheck_boeking",{p_boeking_id:boekingId, p_ingecheckt:true});
    setBezig(false);
    if(r.error){ setF("Aanmelden lukte niet. Meld je bij de bar, daar helpen ze je verder."); return; }
    setStap("klaar"); plantReset(6000);
  }

  async function terugProbeer(){
    setTerugBezig(true); setTerugFout(null);
    const r = await db.rpc("open_sleutel", { p_wachtwoord: terugWw });
    setTerugBezig(false);
    if(r.error){ setTerugFout("Dat ging niet goed. Probeer het nog eens."); return; }
    if(r.data !== true){ setTerugFout("Dat wachtwoord klopt niet."); return; }
    setTerugWw(""); setTerugOpen(false);
    volledigReset();
    onTerug();
  }

  const woordBetaling = s => s==="betaald" ? "Betaald"
    : s==="open" ? "Nog niet betaald"
    : s==="mislukt" ? "Niet gelukt"
    : s==="terugbetaald" ? "Terugbetaald" : "Onbekend";

  return (
    <div className="kiosk">
      <div className="kiosk-midden">
        {stap==="start" && <div className="kiosk-kaart">
          <div className="kiosk-kop">Meld je aan bij de bar</div>
          <p className="kiosk-bij">Typ het nummer van je reservering. Dit staat in de bevestiging die je per e-mail hebt gekregen.</p>
          <input className="kiosk-invoer" value={ref} autoFocus
            onChange={e=>setRef(e.target.value)}
            onKeyDown={e=>e.key==="Enter"&&zoek()}
            placeholder="ABCD-1234"/>
          {f && <div className="kiosk-fout">{f}</div>}
          <button className="kiosk-knop kiosk-primair" onClick={zoek} disabled={!ref.trim()}>Zoeken</button>
        </div>}

        {stap==="zoeken" && <div className="kiosk-kaart">
          <p className="kiosk-bij">Even zoeken…</p>
        </div>}

        {stap==="nietgevonden" && <div className="kiosk-kaart">
          <div className="kiosk-kop">Dat nummer kennen we niet</div>
          <p className="kiosk-bij">Kom naar de bar, daar helpen ze je verder.</p>
          <button className="kiosk-knop" onClick={volledigReset}>Opnieuw proberen</button>
        </div>}

        {stap==="andereDag" && <div className="kiosk-kaart">
          <div className="kiosk-kop">Dit is niet voor vandaag</div>
          <p className="kiosk-bij">Deze reservering staat niet bij de tijden van vandaag. Kom op de dag zelf terug naar dit scherm.</p>
          <button className="kiosk-knop" onClick={volledigReset}>Opnieuw proberen</button>
        </div>}

        {stap==="gevonden" && weergave && <div className="kiosk-kaart">
          <div className="kiosk-kop">Je reservering</div>
          <div className="kiosk-gegevens">
            <div className="kiosk-gegeven"><span>Starttijd</span><strong>{String(weergave.starttijd).slice(0,5)}</strong></div>
            {weergave.spelers!=null && <div className="kiosk-gegeven"><span>Spelers</span><strong>{weergave.spelers}</strong></div>}
            <div className="kiosk-gegeven"><span>Betaling</span><strong>{woordBetaling(weergave.betaalstatus)}</strong></div>
          </div>
          {f && <div className="kiosk-fout">{f}</div>}
          {weergave.gaatDoor===false && <p className="kiosk-bij">Deze reservering is geannuleerd. Meld je bij de bar.</p>}
          {weergave.gaatDoor!==false && weergave.betaalstatus!=="betaald" && <p className="kiosk-bij">Deze reservering is nog niet betaald. Meld je bij de bar om af te rekenen.</p>}
          {weergave.gaatDoor!==false && weergave.betaalstatus==="betaald" && !boekingId && <p className="kiosk-bij">Je kunt nu niet automatisch aangemeld worden. Meld je bij de bar.</p>}
          {weergave.gaatDoor!==false && weergave.betaalstatus==="betaald" && boekingId && <>
            <p className="kiosk-bij">Alles staat klaar. Druk op de knop om je aan te melden.</p>
            <button className="kiosk-knop kiosk-primair" onClick={meldAan} disabled={bezig}>{bezig?"Even geduld…":"Ik ben er"}</button>
          </>}
          <button className="kiosk-knop" onClick={volledigReset}>Opnieuw</button>
        </div>}

        {stap==="klaar" && <div className="kiosk-kaart">
          <div className="kiosk-kop">Je bent aangemeld</div>
          <p className="kiosk-bij">Fijne speeldag.</p>
        </div>}
      </div>

      {/* Alleen voor de balie, niet voor de gast. Klein en onderin, met opzet niet nadrukkelijk: dit
          scherm hoeft niet honderd procent dichtgetimmerd te zijn, het moet alleen niet per ongeluk
          door een gast opengeklikt worden. Hergebruikt hetzelfde wachtwoordmechanisme als de rest van
          de balie (`open_sleutel`, zie InrichtingSlot in dagbeheer.jsx). */}
      <button className="kiosk-terugknop" onClick={()=>setTerugOpen(true)}>Balie</button>
      {terugOpen && <div className="kiosk-terug-scrim" onClick={()=>{ setTerugOpen(false); setTerugWw(""); setTerugFout(null); }}/>}
      {terugOpen && <div className="kiosk-terug-paneel">
        <div className="kiosk-kop" style={{fontSize:16}}>Terug naar de balie</div>
        <input type="password" className="kiosk-terug-invoer" value={terugWw} autoFocus
          onChange={e=>setTerugWw(e.target.value)}
          onKeyDown={e=>e.key==="Enter"&&terugProbeer()}
          placeholder="Wachtwoord"/>
        {terugFout && <div className="kiosk-fout">{terugFout}</div>}
        <div className="kiosk-terug-acties">
          <button className="kiosk-knop" onClick={()=>{ setTerugOpen(false); setTerugWw(""); setTerugFout(null); }}>Annuleren</button>
          <button className="kiosk-knop kiosk-primair" onClick={terugProbeer} disabled={terugBezig||!terugWw}>{terugBezig?"Even geduld…":"Openen"}</button>
        </div>
      </div>}
    </div>
  );
}