/* global React, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "split",
  "palette": "warm",
  "galleryDensity": "sparse",
  "background": "paper",
  "stickyCTA": false,
  "tagline": "engineer"
}/*EDITMODE-END*/;

// Section background helper for "alternating" mode
const BG_COLORS = {
  stone:         "var(--stone)",
  cream:         "var(--cream)",
  paper:         "var(--paper)",
  blush:         "var(--blush)",
  "marigold-50": "var(--marigold-50)",
  "tide-50":     "var(--tide-50)",
};

function sectionBg(background, sectionIdx) {
  if (background === "alternating")      return sectionIdx % 2 === 0 ? "var(--stone)" : "var(--cream)";
  if (background === "alternating-warm") return sectionIdx % 2 === 0 ? "var(--cream)" : "var(--blush)";
  if (background === "alternating-cool") return sectionIdx % 2 === 0 ? "var(--cream)" : "var(--tide-50)";
  return BG_COLORS[background] || "var(--stone)";
}

function pageBg(background) {
  if (background?.startsWith("alternating")) return "var(--stone)";
  return BG_COLORS[background] || "var(--stone)";
}

function App() {
  const [view, setView] = useState("home");
  const [openArt, setOpenArt] = useState(null);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply palette to root via CSS custom property override on page bg / accent hints
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--page-bg", pageBg(t.background));
  }, [t.background]);

  // Rebuild Lucide icons on any view/state change
  useEffect(() => {
    const id = setTimeout(() => { if (window.lucide) window.lucide.createIcons(); }, 60);
    return () => clearTimeout(id);
  }, [view, openArt, t.heroLayout, t.galleryDensity, t.tagline, t.palette, t.background]);

  const handleNav = (id) => {
    setView(id);
    setOpenArt(null);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  // Wrap each top-level section with the right bg if alternating
  const heroBg       = sectionBg(t.background, 0);
  const galleryBg    = sectionBg(t.background, 1);
  const commissionBg = sectionBg(t.background, 0);
  const aboutBg      = sectionBg(t.background, 0);

  return (
    <div data-screen-label={`01 ${view}`} style={{ background: pageBg(t.background), minHeight: "100vh" }}>
      <Header view={view} onNav={handleNav} palette={t.palette} />

      <main>
        {view === "home" && (
          <>
            <div style={{ background: heroBg }}>
              <Hero onNav={handleNav} onOpenArtwork={(id) => setOpenArt(id)} layout={t.heroLayout} palette={t.palette} tagline={t.tagline} />
            </div>
            <div style={{ background: heroBg }}>
              <MakersNote />
            </div>
            <div style={{ background: galleryBg }}>
              <Gallery onOpen={(id) => setOpenArt(id)} density={t.galleryDensity} />
            </div>
          </>
        )}
        {view === "gallery"    && <div style={{ background: galleryBg }}><Gallery onOpen={(id) => setOpenArt(id)} density={t.galleryDensity} /></div>}
        {view === "commission" && <div style={{ background: commissionBg }}><Commission onNav={handleNav} /></div>}
        {view === "about"      && <div style={{ background: aboutBg }}><About /></div>}
      </main>

      <Footer onNav={handleNav} />

      {openArt && <ArtworkDetail id={openArt} onClose={() => setOpenArt(null)} />}

      {/* Sticky commission CTA — visible when on and not already on commission view */}
      {t.stickyCTA && view !== "commission" && (
        <StickyCTA onClick={() => handleNav("commission")} />
      )}

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero" />
        <TweakSelect
          label="Layout"
          value={t.heroLayout}
          options={[
            { value: "split",      label: "Split (default)" },
            { value: "full-bleed", label: "Full-bleed image" },
            { value: "centered",   label: "Centered" },
          ]}
          onChange={(v) => setTweak("heroLayout", v)}
        />
        <TweakSelect
          label="Tagline"
          value={t.tagline}
          options={[
            { value: "peace",    label: "drawing keeps me grounded." },
            { value: "people",   label: "i paint the people i love." },
            { value: "engineer", label: "engineer by day, painter on weekends." },
            { value: "slow",     label: "soft portraits, made by hand." },
          ]}
          onChange={(v) => setTweak("tagline", v)}
        />

        <TweakSection label="Visual" />
        <TweakRadio
          label="Palette lead"
          value={t.palette}
          options={[
            { value: "warm",     label: "Warm" },
            { value: "balanced", label: "Both" },
            { value: "tide",     label: "Cool" },
          ]}
          onChange={(v) => setTweak("palette", v)}
        />
        <TweakSelect
          label="Background"
          value={t.background}
          options={[
            { value: "stone",            label: "Stone (neutral)" },
            { value: "cream",            label: "Cream (paper)" },
            { value: "paper",            label: "Paper (lightest)" },
            { value: "marigold-50",      label: "Sun glow (warm yellow)" },
            { value: "blush",            label: "Blush (peach)" },
            { value: "tide-50",          label: "Moon mist (cool)" },
            { value: "alternating",      label: "Alt · stone ↔ cream" },
            { value: "alternating-warm", label: "Alt · cream ↔ blush" },
            { value: "alternating-cool", label: "Alt · cream ↔ mist" },
          ]}
          onChange={(v) => setTweak("background", v)}
        />

        <TweakSection label="Gallery" />
        <TweakRadio
          label="Density"
          value={t.galleryDensity}
          options={[
            { value: "sparse",   label: "Sparse" },
            { value: "standard", label: "Std" },
            { value: "dense",    label: "Dense" },
          ]}
          onChange={(v) => setTweak("galleryDensity", v)}
        />

        <TweakSection label="Surface" />
        <TweakToggle
          label="Sticky commission CTA"
          value={t.stickyCTA}
          onChange={(v) => setTweak("stickyCTA", v)}
        />
      </TweaksPanel>
    </div>
  );
}

function StickyCTA({ onClick }) {
  const [hover, setHover] = useState(false);
  return (
    <div style={{
      position: "fixed",
      left: 20,
      bottom: 20,
      zIndex: 60,
      transform: hover ? "translateY(-2px) rotate(-1deg)" : "rotate(-1.5deg)",
      transition: "transform 240ms cubic-bezier(0.22,1,0.36,1)",
      pointerEvents: "auto",
    }}
    onMouseEnter={() => setHover(true)}
    onMouseLeave={() => setHover(false)}
    >
      <button
        onClick={onClick}
        style={{
          background: "var(--ink)",
          color: "var(--cream)",
          border: 0,
          borderRadius: 999,
          padding: "12px 20px 12px 16px",
          display: "inline-flex",
          alignItems: "center",
          gap: 12,
          cursor: "pointer",
          boxShadow: "0 10px 28px rgba(42,33,24,0.28)",
          fontFamily: "var(--font-body)",
          fontSize: 14,
          fontWeight: 600,
        }}
      >
        <span style={{
          width: 8, height: 8, borderRadius: "50%",
          background: "var(--marigold-400)",
          boxShadow: "0 0 0 4px rgba(245,165,36,0.25)",
        }} />
        <span>
          <span style={{ fontFamily: "var(--font-hand)", fontSize: 18, color: "var(--marigold-300)", marginRight: 6 }}>two slots left</span>
          start a piece
        </span>
        <i data-lucide="arrow-right" style={{ width: 16, height: 16 }}></i>
      </button>
    </div>
  );
}

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