/* EasyFly — app shell, router & tweaks (typed) */
;(() => {
const { useState } = React;
const EF = window.EF;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "gradient",
  "accent": "#e63946",
  "display": "Schibsted Grotesk",
  "density": "regular"
}/*EDITMODE-END*/;

const ACCENT_STRONG: Record<string, string> = {
  "#e63946": "#c2202f",
  "#2f6fd0": "#2056a8",
  "#d9a441": "#b9842a",
};


function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  const [screen, setScreen] = useState<ScreenName>("home");
  const [search, setSearch] = useState<SearchState>({
    trip: "round", from: "CDG", to: "BCN", dDate: "ven. 12 juin", rDate: "dim. 14 juin", pax: 2, cabin: "Économie",
  });
  const [booking, setBooking] = useState<BookingState>({ flight: null, fare: null, seats: [] });

  const go = (s: ScreenName) => { setScreen(s); window.scrollTo({ top: 0, behavior: "smooth" }); };
  const selectFlight = (f: Flight) => {
    setBooking(b => ({ ...b, flight: f, fare: EF.FARES[1], seats: [] }));
    go("seats");
  };

  const rootStyle: React.CSSProperties = {
    "--accent": t.accent,
    "--accent-strong": ACCENT_STRONG[t.accent] || t.accent,
    "--font-display": `"${t.display}", system-ui, sans-serif`,
  } as React.CSSProperties;

  return (
    <div className="app" data-theme={t.theme} data-density={t.density} style={rootStyle}>
      <window.TopNav go={go} active={screen === "home" ? "home" : null} />

      {screen === "home" && <window.HomeScreen search={search} set={setSearch} go={go} />}
      {screen === "results" && <window.ResultsScreen search={search} set={setSearch} go={go} selectFlight={selectFlight} />}
      {screen === "seats" && <window.SeatsScreen search={search} booking={booking} setBooking={setBooking} go={go} />}
      {screen === "payment" && <window.PaymentScreen search={search} booking={booking} setBooking={setBooking} go={go} />}
      {screen === "confirm" && <window.ConfirmScreen search={search} booking={booking} go={go} />}

      {(screen === "home" || screen === "confirm") && <window.Footer />}

      <window.TweaksPanel title="Réglages">
        <window.TweakSection label="Direction visuelle" />
        <window.TweakRadio label="Thème" value={t.theme}
          options={[{ value: "navy", label: "Navy" }, { value: "gradient", label: "Dégradé" }, { value: "light", label: "Clair" }]}
          onChange={(v: string) => setTweak("theme", v)} />
        <window.TweakColor label="Accent" value={t.accent}
          options={["#e63946", "#2f6fd0", "#d9a441"]}
          onChange={(v: string) => setTweak("accent", v)} />
        <window.TweakSection label="Typographie & densité" />
        <window.TweakSelect label="Titres" value={t.display}
          options={["Schibsted Grotesk", "Libre Franklin", "Spectral"]}
          onChange={(v: string) => setTweak("display", v)} />
        <window.TweakRadio label="Densité" value={t.density}
          options={[{ value: "compact", label: "Dense" }, { value: "regular", label: "Standard" }, { value: "comfy", label: "Aéré" }]}
          onChange={(v: string) => setTweak("density", v)} />
      </window.TweaksPanel>
    </div>
  );
}

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