// De ECHTE Recras-koppeling, kant 1: boekingen uit de Recras-TESTOMGEVING blokkeren
// starttijden in UPgolf. Gebouwd 27 augustus 2026, voor de demo van diezelfde middag.
//
// Wat dit scherm doet:
//   1. De knop "Nu ophalen bij Recras" roept de edge function `recras-koppeling` aan. Die
//      haalt de boekingen op uit upeventstest.recras.com en geeft ze aan de databasefunctie
//      recras_verwerk_boeking. Alle logica en bescherming zit DAAR, niet hier.
//   2. De tabel eronder is het logboek (recras_blokkades): per Recras-boeking wat ermee
//      gebeurd is. Een boeking voor een sport die er op dat moment niet is, staat hier als
//      FOUT met uitleg, en heeft niets geblokkeerd. Dat is de kern van de opdracht.
//
// Wat dit scherm bewust NIET doet: zelf met Recras praten. De sleutel staat op de server
// (Supabase-secrets) en komt nooit in de browser.
function RecrasKoppeling({ toon }){
  const [log,setLog]       = useState(null);
  const [bezig,setBezig]   = useState(false);
  const [uitslag,setUitslag]=useState(null);
  const [f,setF]           = useState(null);

  const laad=useCallback(async()=>{
    const r=await db.from("recras_blokkades").select("*").order("verwerkt_op",{ascending:false}).limit(40);
    if(r.error) setF(fout(r.error)); else setLog(r.data||[]);
  },[]);
  useEffect(()=>{ laad(); },[laad]);

  async function haalOp(){
    setBezig(true); setF(null); setUitslag(null);
    try{
      // Ronde 3 (14 september 2026, security-oordeel V4): de koppeling laat de publieke sleutel niet meer
      // door. De knop stuurt het token van de ingelogde medewerker mee; de functie controleert is_medewerker.
      const sessie=(await db.auth.getSession()).data.session;
      const r=await fetch(SB_URL+"/functions/v1/recras-koppeling",{method:"POST",
        headers:{ "apikey":SB_KEY, "Authorization":"Bearer "+(sessie?sessie.access_token:SB_KEY), "Content-Type":"application/json" },
        body:"{}"});
      const d=await r.json().catch(()=>null);
      if(!r.ok){
        // De duidelijkste fout is de ontbrekende sleutel; die melding komt letterlijk van de server.
        setF(d && d.uitleg ? d.uitleg : "Ophalen mislukt ("+r.status+").");
      }else{
        setUitslag(d);
        toon && toon("Recras opgehaald: "+(d.nieuw_verwerkt||0)+" nieuw");
      }
    }catch(e){ setF("Geen verbinding met de koppeling."); }
    setBezig(false);
    laad();
  }

  const woord={geblokkeerd:"geblokkeerd",fout:"fout",deels:"deels gelukt",overgeslagen:"overgeslagen"};

  return (<div className="paneel">
    <div className="kaart">
      <div className="kop">Recras-koppeling (testomgeving)</div>
      <p className="bij">Dit is de echte koppeling met de Recras-TESTOMGEVING (upeventstest). Een
        bedrijfsboeking daar blokkeert hier de starttijden van die sport. Klopt de sport of het
        moment niet, bijvoorbeeld footgolf op een dag zonder footgolf, dan blokkeert er niets en
        staat hieronder een foutmelding met uitleg. Er wordt niets naar Recras geschreven.</p>
      <div className="acties">
        <button className="doe primair" onClick={haalOp} disabled={bezig}>{bezig?"Bezig…":"Nu ophalen bij Recras"}</button>
        <button className="mini" onClick={laad} disabled={bezig}>Logboek verversen</button>
      </div>
      {f && <div className="fout">{f}</div>}
      {uitslag && <div className="ok">Opgehaald: {uitslag.opgehaald} boekingen, {uitslag.nieuw_verwerkt} nieuw verwerkt{uitslag.rpc_fouten>0?", "+uitslag.rpc_fouten+" verwerkfouten":""}.</div>}
    </div>

    <div className="kaart">
      <div className="kop">Wat er met elke Recras-boeking is gebeurd</div>
      {log===null && <div className="laden">Laden…</div>}
      {log!==null && log.length===0 && <div className="leeg" style={{display:"block",padding:"8px 0"}}>Nog niets verwerkt. Druk op de knop hierboven.</div>}
      {log!==null && log.length>0 && <div className="tabelwrap"><table className="tabel"><tbody>
        <tr><th>Recras</th><th>Arrangement</th><th>Sport</th><th>Dag</th><th>Uitkomst</th><th>Toelichting</th></tr>
        {log.map(r=>(<tr key={r.id}>
          <td>{r.referentie||r.recras_boeking_id}</td>
          <td>{r.arrangement||"-"}</td>
          <td>{r.sport ? <Sportmerk sport={r.sport}/> : "-"}</td>
          <td>{r.datum}{r.tijd_van?(" "+String(r.tijd_van).slice(0,5)+" tot "+String(r.tijd_tot).slice(0,5)):""}</td>
          <td>{r.uitkomst==="fout"
            ? <span className="hold-tag rood">fout</span>
            : r.uitkomst==="deels"
              ? <span className="hold-tag amber">deels</span>
              : <span className="hold-tag" style={{background:"#e7f6ec",color:"#15803d"}}>{woord[r.uitkomst]||r.uitkomst}</span>}</td>
          <td className="klein">{r.detail}</td>
        </tr>))}
      </tbody></table></div>}
      <p className="bij">Geblokkeerde starttijden staan op de tee sheet met de vermelding
        RECRAS en de referentie erbij. Vrijgeven kan per starttijd met de knop Open.</p>
    </div>
  </div>);
}