// app.jsx — Repair Ninja root + multi-page navigation + header + tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "crimson",
  "animations": 100,
  "heroStyle": "kanji",
  "showTicker": true
}/*EDITMODE-END*/;

const PALETTES = {
  crimson: { crimson: "#c8102e", crimsonDeep: "#8a0a1f", crimsonSoft: "#e85a73", label: "Crimson" },
  oxblood: { crimson: "#7a1a26", crimsonDeep: "#5a0d1a", crimsonSoft: "#a83c4a", label: "Oxblood" },
  indigo:  { crimson: "#2a3a8a", crimsonDeep: "#1a2666", crimsonSoft: "#5c6bb8", label: "Indigo" },
  jade:    { crimson: "#0f7a52", crimsonDeep: "#0a5c3c", crimsonSoft: "#3aa884", label: "Jade" },
};

// view → URL mapping for multi-page site (Cloudflare Pages / Workers)
const VIEW_URLS = {
  home:       "/",
  services:   "/services",
  diagnostic: "/diagnostic",
  shop:       "/boutique",
  tracking:   "/suivi",
  account:    "/compte",
  coursier:   "/coursier",
  about:      "/a-propos",
  contact:    "/contact",
  mentions:   "/mentions",
};

// global navigate fn — full page nav between html files, in-page scroll on same view
window.RN_NAVIGATE = (view, scrollTo = null) => {
  const currentView = window.PAGE || "home";
  if (view === currentView) {
    if (scrollTo) {
      const el = document.getElementById(scrollTo);
      if (el) {
        const y = el.getBoundingClientRect().top + window.scrollY - 80;
        window.scrollTo({ top: y, behavior: "smooth" });
      }
    } else {
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
    return;
  }
  const url = VIEW_URLS[view] || "/";
  window.location.href = url + (scrollTo ? "#" + scrollTo : "");
};

const HEADER_LINKS = [
  { id: "home",       label: "Accueil" },
  { id: "services",   label: "Services" },
  { id: "diagnostic", label: "Diagnostic" },
  { id: "shop",       label: "Boutique" },
  { id: "coursier",   label: "Coursier" },
  { id: "tracking",   label: "Suivi" },
  { id: "contact",    label: "Contact" },
];

const Header = ({ view, navigate, account }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [drawerOpen, setDrawerOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const isHome = view === "home";
  const headerClass = "header " + (isHome ? (scrolled ? "header--scrolled" : "") : "header--page");

  const linkHref = (id) => VIEW_URLS[id] || "index.html";

  return (
    <>
      <header className={headerClass}>
        <div className="container">
          <nav className="nav">
            <a className="brand" href={linkHref("home")}>
              <img src="assets/logo.png" alt="Repair Ninja" className="brand-logo" />
              <i>修理忍者</i>
            </a>
            <div className="nav-links">
              {HEADER_LINKS.map((l) => (
                <a
                  key={l.id}
                  href={linkHref(l.id)}
                  className={"nav-link" + (l.id === view ? " nav-link--active" : "")}
                >
                  {l.label}
                </a>
              ))}
            </div>
            <div className="nav-cta">
              <a className="nav-account" href={linkHref("account")}>
                <IconUser />
                <span>{account ? account.name?.split(" ")[0] : "Espace client"}</span>
              </a>
              <a className="btn btn--primary btn--small" href={linkHref("diagnostic")}>
                <span>Diagnostic</span>
                <IconArrowRight />
              </a>
              <button className="mobile-toggle" onClick={() => setDrawerOpen(true)} aria-label="menu">
                <IconMenu />
              </button>
            </div>
          </nav>
        </div>
      </header>

      <div className={"drawer" + (drawerOpen ? " open" : "")}>
        <button className="drawer-close" onClick={() => setDrawerOpen(false)} aria-label="close">
          <IconClose />
        </button>
        {HEADER_LINKS.map((l) => (
          <a key={l.id} href={linkHref(l.id)}>{l.label}</a>
        ))}
        <a href={linkHref("account")}>Espace client</a>
        <a href={linkHref("about")}>À propos</a>
      </div>
      {drawerOpen && (
        <div onClick={() => setDrawerOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)", zIndex: 150 }} />
      )}
    </>
  );
};

const Home = ({ navigate, tweaks }) => (
  <>
    <Hero navigate={navigate} tweaks={tweaks} />
    {tweaks.showTicker && <Ticker />}
    <Services navigate={navigate} />
    <DiagnosticTeaser navigate={navigate} />
    <CoursierTeaser navigate={navigate} />
    <About />
    <Reviews />
    <FAQ />
    <Contact />
  </>
);

const Toast = ({ msg, show }) => (
  <div className={"toast" + (show ? " show" : "")}>
    <Shuriken size={16} style={{ color: "var(--crimson)" }} /> <span>{msg}</span>
  </div>
);

const App = () => {
  const view = window.PAGE || "home";
  const [account, setAccount] = React.useState(null);
  const [cart, setCart] = React.useState([]);
  const [toast, setToast] = React.useState({ msg: "", show: false });
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // tweaks live-apply
  React.useEffect(() => {
    const root = document.documentElement;
    const p = PALETTES[tweaks.palette] || PALETTES.crimson;
    root.style.setProperty("--crimson", p.crimson);
    root.style.setProperty("--crimson-deep", p.crimsonDeep);
    root.style.setProperty("--crimson-soft", p.crimsonSoft);
    root.style.setProperty("--anim-scale", String(Math.max(0.01, tweaks.animations / 100)));
  }, [tweaks.palette, tweaks.animations]);

  // handle hash on initial load
  React.useEffect(() => {
    if (window.location.hash) {
      const id = window.location.hash.slice(1);
      setTimeout(() => {
        const el = document.getElementById(id);
        if (el) {
          const y = el.getBoundingClientRect().top + window.scrollY - 80;
          window.scrollTo({ top: y, behavior: "smooth" });
        }
      }, 200);
    }
  }, []);

  const navigate = window.RN_NAVIGATE;

  const addToCart = (p) => {
    setCart((c) => [...c, p]);
    setToast({ msg: `« ${p.name} » ajouté au panier`, show: true });
    setTimeout(() => setToast((t) => ({ ...t, show: false })), 2400);
  };

  // Restaure la session Supabase au chargement et écoute les changements d'auth
  React.useEffect(() => {
    if (!window.SUPABASE) return;
    const db = window.SUPABASE;
    db.auth.getSession().then(({ data: { session } }) => {
      if (session) {
        const name = session.user.user_metadata?.name || session.user.email?.split("@")[0] || "Client";
        setAccount({ name, email: session.user.email });
      }
    });
    const { data: { subscription } } = db.auth.onAuthStateChange((_event, session) => {
      if (session) {
        const name = session.user.user_metadata?.name || session.user.email?.split("@")[0] || "Client";
        setAccount({ name, email: session.user.email });
      } else {
        setAccount(null);
      }
    });
    return () => subscription.unsubscribe();
  }, []);

  return (
    <div className="shell">
      <Header view={view} navigate={navigate} account={account} />
      {view === "home"       && <Home navigate={navigate} tweaks={tweaks} />}
      {view === "services"   && <ServicesPage navigate={navigate} />}
      {view === "diagnostic" && <DiagnosticPage navigate={navigate} />}
      {view === "shop"       && <ShopPage navigate={navigate} addToCart={addToCart} />}
      {view === "tracking"   && <TrackingPage navigate={navigate} />}
      {view === "account"    && <AccountPage navigate={navigate} account={account} setAccount={setAccount} />}
      {view === "coursier"   && <CoursierPage navigate={navigate} />}
      {view === "about"      && <AboutPage navigate={navigate} />}
      {view === "contact"    && <ContactPage navigate={navigate} />}
      {view === "mentions"   && <MentionsPage navigate={navigate} />}

      {(view === "home" || view === "services" || view === "shop" || view === "coursier" || view === "about" || view === "contact" || view === "mentions") && <Footer navigate={navigate} />}
      {(view === "account" || view === "tracking" || view === "diagnostic") && <FooterCompact navigate={navigate} />}

      <Toast msg={toast.msg} show={toast.show} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Apparence">
          <TweakSelect
            label="Palette d'accent"
            value={tweaks.palette}
            options={Object.entries(PALETTES).map(([id, p]) => ({ value: id, label: p.label }))}
            onChange={(v) => setTweak("palette", v)}
          />
          <TweakRadio
            label="Style de hero"
            value={tweaks.heroStyle}
            options={[
              { value: "kanji", label: "Kanji BG" },
              { value: "minimal", label: "Minimal" },
            ]}
            onChange={(v) => setTweak("heroStyle", v)}
          />
        </TweakSection>
        <TweakSection label="Animations">
          <TweakSlider
            label="Intensité"
            min={0}
            max={100}
            step={10}
            value={tweaks.animations}
            unit="%"
            onChange={(v) => setTweak("animations", v)}
          />
          <TweakToggle
            label="Ticker bandeau"
            value={tweaks.showTicker}
            onChange={(v) => setTweak("showTicker", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

const FooterCompact = ({ navigate }) => (
  <footer className="footer paper" style={{ paddingTop: 40 }}>
    <div className="container">
      <div className="footer-bottom" style={{ borderTop: 0, paddingTop: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <Shuriken size={16} style={{ color: "var(--crimson)" }} className="shuriken-rotate" />
          <span>© 2026 {window.RN_INFO.name} · {window.RN_INFO.fullAddress}</span>
        </div>
        <div style={{ display: "flex", gap: 24 }}>
          <a style={{ opacity: 0.7 }} href="/">Accueil</a>
          <a style={{ opacity: 0.7 }} href="/contact">Contact</a>
          <a style={{ opacity: 0.7 }} href="/mentions">Mentions légales</a>
        </div>
      </div>
    </div>
  </footer>
);

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