/* global React, ReactDOM, Header, Footer, WhatsAppFab, Home, Listings, Detail, About, Contact, Launches, LaunchDetail */
/* global TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakSelect */

const App = () => {
  const [page, setPage] = React.useState("home");
  const [launchId, setLaunchId] = React.useState("atrium");

  // Tweaks
  const [t, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "palette": ["#FAF7F2", "#1E3A5F", "#C4A57B", "#14181D"],
    "density": "normal",
    "displayFont": "Cormorant Garamond"
  }/*EDITMODE-END*/);

  // Apply tweaks to CSS vars
  React.useEffect(() => {
    const r = document.documentElement;
    const [bg, navy, gold, ink] = t.palette;
    r.style.setProperty("--bg", bg);
    r.style.setProperty("--navy", navy);
    r.style.setProperty("--gold", gold);
    r.style.setProperty("--ink", ink);
    // derive supporting colors
    r.style.setProperty("--gold-deep", shade(gold, -0.2));
    r.style.setProperty("--bg-soft", shade(bg, -0.04));
    r.style.setProperty("--ink-soft", shade(ink, 0.25));
    r.style.setProperty("--f-display", `"${t.displayFont}", serif`);

    document.body.classList.toggle("density-compact", t.density === "compact");
    document.body.classList.toggle("density-spacious", t.density === "spacious");
  }, [t]);

  // Page transition
  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, [page]);

  const onDarkHero = page === "home" || page === "about" || page === "launches" || page === "launch-detail";

  const renderPage = () => {
    switch (page) {
      case "listings":       return <Listings setPage={setPage} />;
      case "detail":         return <Detail setPage={setPage} />;
      case "about":          return <About setPage={setPage} />;
      case "contact":        return <Contact setPage={setPage} />;
      case "launches":       return <Launches setPage={setPage} setLaunchId={setLaunchId} />;
      case "launch-detail":  return <LaunchDetail setPage={setPage} launchId={launchId} setLaunchId={setLaunchId} />;
      default:               return <Home setPage={setPage} />;
    }
  };

  return (
    <div data-screen-label={`Bene Imóveis - ${page}`}>
      <Header page={page} setPage={setPage} onDark={onDarkHero} />
      <main key={page} className="page-fade">
        {renderPage()}
      </main>
      <Footer setPage={setPage} />
      <WhatsAppFab />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Paleta">
          <TweakColor
            label="Combinação de cores"
            value={t.palette}
            onChange={(v) => setTweak("palette", v)}
            options={[
              ["#FAF7F2", "#1E3A5F", "#C4A57B", "#14181D"],
              ["#F6F4EF", "#2A4A3A", "#D4C5A9", "#1A1A1A"],
              ["#0F1B2D", "#1F2D44", "#C9A961", "#F4F1EC"],
              ["#FFFFFF", "#111111", "#B85C38", "#E8E4DE"],
              ["#0E0E0E", "#A78B5F", "#F5F5F0", "#3A3A3A"],
            ]}
          />
        </TweakSection>
        <TweakSection label="Tipografia">
          <TweakSelect
            label="Fonte display"
            value={t.displayFont}
            onChange={(v) => setTweak("displayFont", v)}
            options={["Cormorant Garamond", "Tenor Sans", "Bodoni Moda", "Italiana", "Playfair Display"]}
          />
        </TweakSection>
        <TweakSection label="Densidade">
          <TweakRadio
            label="Espaçamento"
            value={t.density}
            onChange={(v) => setTweak("density", v)}
            options={["compact", "normal", "spacious"]}
          />
        </TweakSection>
        <TweakSection label="Navegação">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 6 }}>
            {[
              ["home", "Home"],
              ["listings", "Imóveis"],
              ["detail", "Detalhe"],
              ["launches", "Lançamentos"],
              ["launch-detail", "Empreendimento"],
              ["about", "Sobre"],
              ["contact", "Contato"],
            ].map(([id, lbl]) => (
              <button key={id}
                      onClick={() => setPage(id)}
                      style={{
                        padding: "8px 10px", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase",
                        border: "1px solid " + (page === id ? "transparent" : "rgba(255,255,255,0.15)"),
                        background: page === id ? "#C4A57B" : "transparent",
                        color: page === id ? "#14181D" : "white",
                        cursor: "pointer", borderRadius: 4, fontWeight: 600,
                      }}>
                {lbl}
              </button>
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

// helper for shading colors
function shade(hex, amt) {
  const h = hex.replace("#","");
  const num = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
  let r = (num >> 16) + Math.round(255 * amt);
  let g = ((num >> 8) & 0xff) + Math.round(255 * amt);
  let b = (num & 0xff) + Math.round(255 * amt);
  r = Math.max(0, Math.min(255, r));
  g = Math.max(0, Math.min(255, g));
  b = Math.max(0, Math.min(255, b));
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

// page-fade keyframe via inline style block
const style = document.createElement("style");
style.textContent = `
  .page-fade { animation: pageIn 0.6s var(--ease-out); }
  @keyframes pageIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
`;
document.head.appendChild(style);

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