// ---- BRAISE — App root ------------------------------------------------

const LS_KEY = "braise_resas_v1";

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "btnShape": "Pill",
  "btnFill": "Braise",
  "btnCaps": false,
  "fieldShape": "Doux",
  "fieldStyle": "Contour"
}/*EDITMODE-END*/;

const BTN_RADIUS = { "Pill": "999px", "Doux": "10px", "Carré": "3px" };
const FIELD_RADIUS = { "Doux": "10px", "Net": "6px", "Carré": "2px" };

function App() {
  const [route, setRoute] = useState("home");
  const [seed, setSeed] = useState(null);
  const [resas, setResas] = useState(() => {
    try { const v = JSON.parse(localStorage.getItem(LS_KEY)); if (Array.isArray(v)) return v; } catch (e) {}
    return seedReservations();
  });
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => { try { localStorage.setItem(LS_KEY, JSON.stringify(resas)); } catch (e) {} }, [resas]);

  const go = (r) => { if (r !== "reserver") setSeed(null); setRoute(r); window.scrollTo({ top: 0 }); };
  const addReservation = (r) => setResas((prev) => [r, ...prev]);
  const cancelReservation = (ref) => setResas((prev) => prev.map((r) => r.ref === ref ? { ...r, status: "annulee" } : r));

  const light = route === "home";

  // Style overrides driven by tweaks
  const wrapStyle = {
    "--btn-radius": BTN_RADIUS[t.btnShape] || "999px",
    "--field-radius": FIELD_RADIUS[t.fieldShape] || "10px",
    flex: 1, display: "flex", flexDirection: "column",
  };
  const fieldCls = t.fieldStyle === "Rempli" ? "fields--filled" : (t.fieldStyle === "Souligné" ? "fields--underline" : "");
  const capsCls = t.btnCaps ? "btns--caps" : "";
  const fillCls = t.btnFill === "Encre" ? "btns--ink" : "";

  return (
    <div className={`${fieldCls} ${capsCls} ${fillCls}`} style={wrapStyle}>
      <Header route={route} go={go} light={light} />
      <main style={{ flex: 1, display: "flex", flexDirection: "column" }}>
        {route === "home" && <Home go={go} setSeed={(s) => { setSeed(s); }} />}
        {route === "reserver" && <BookingFlow key={seed ? seed.date + seed.service : "fresh"} seed={seed} go={go} addReservation={addReservation} />}
        {route === "mes-resas" && <MesResas resas={resas} go={go} cancelReservation={cancelReservation} />}
      </main>
      <Footer go={go} />

      <TweaksPanel>
        <TweakSection label="Boutons" />
        <TweakRadio label="Forme" value={t.btnShape} options={["Pill", "Doux", "Carré"]} onChange={(v) => setTweak("btnShape", v)} />
        <TweakRadio label="Action principale" value={t.btnFill} options={["Braise", "Encre"]} onChange={(v) => setTweak("btnFill", v)} />
        <TweakToggle label="Capitales" value={t.btnCaps} onChange={(v) => setTweak("btnCaps", v)} />
        <TweakSection label="Champs" />
        <TweakRadio label="Coins" value={t.fieldShape} options={["Doux", "Net", "Carré"]} onChange={(v) => setTweak("fieldShape", v)} />
        <TweakRadio label="Style" value={t.fieldStyle} options={["Contour", "Rempli", "Souligné"]} onChange={(v) => setTweak("fieldStyle", v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);