// Tweaks panel
const { useState: useStateT, useEffect: useEffectT } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "warm-gallery",
  "heroStyle": "giant-word",
  "serifAccent": "restrained"
}/*EDITMODE-END*/;

const PALETTES = {
  "warm-gallery": { bg: "#0e0c0a", fg: "#E8E2D0", card: "#141210", deep: "#0a0908", name: "Warm gallery" },
  "deep-film":    { bg: "#000000", fg: "#DEDBC8", card: "#101010", deep: "#060606", name: "Deep film" },
  "paper-bone":   { bg: "#F1ECDC", fg: "#1a1712", card: "#E8E1CD", deep: "#D9D2BE", name: "Paper & bone" },
};

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES["warm-gallery"];
  const root = document.documentElement;
  root.style.setProperty("--bg", p.bg);
  root.style.setProperty("--fg", p.fg);
  root.style.setProperty("--card", p.card);
  root.style.setProperty("--deep", p.deep);
  document.body.style.background = p.bg;
  document.body.style.color = p.fg;
  // override inline #E8E2D0 usage via CSS variable fallback class
  root.dataset.palette = name;
}

function TweaksPanel({ state, setState }) {
  return (
    <div className="fixed bottom-5 right-5 z-50 w-72 rounded-xl overflow-hidden shadow-2xl" style={{
      background: "rgba(14,12,10,0.92)",
      backdropFilter: "blur(12px)",
      border: "1px solid rgba(232,226,208,0.15)",
      color: "#E8E2D0",
    }}>
      <div className="flex items-center justify-between px-4 py-3 border-b border-[#e8e2d0]/10">
        <div className="flex items-center gap-2">
          <span className="w-1.5 h-1.5 rounded-full bg-[#E8E2D0]" />
          <span className="font-mono text-[10px] tracking-[0.25em] uppercase">Tweaks</span>
        </div>
      </div>
      <div className="p-4 space-y-5">
        <TweakGroup label="Palette">
          {Object.entries(PALETTES).map(([k, v]) => (
            <button
              key={k}
              onClick={() => setState({ ...state, palette: k })}
              className="flex items-center gap-3 w-full px-2 py-2 rounded-md text-left transition"
              style={{
                background: state.palette === k ? "rgba(232,226,208,0.08)" : "transparent",
              }}
            >
              <div className="flex gap-0.5">
                <div className="w-3 h-5 rounded-sm" style={{ background: v.bg, border: "1px solid rgba(232,226,208,0.2)" }} />
                <div className="w-3 h-5 rounded-sm" style={{ background: v.fg }} />
                <div className="w-3 h-5 rounded-sm" style={{ background: v.card, border: "1px solid rgba(232,226,208,0.1)" }} />
              </div>
              <span className="text-xs">{v.name}</span>
            </button>
          ))}
        </TweakGroup>

        <TweakGroup label="Hero type">
          {[
            { k: "giant-word", n: "Giant word" },
            { k: "stacked", n: "Stacked lines" },
            { k: "serif-lead", n: "Serif italic lead" },
          ].map((o) => (
            <button
              key={o.k}
              onClick={() => setState({ ...state, heroStyle: o.k })}
              className="w-full px-2 py-1.5 rounded-md text-left text-xs transition"
              style={{
                background: state.heroStyle === o.k ? "rgba(232,226,208,0.08)" : "transparent",
              }}
            >
              {o.n}
            </button>
          ))}
        </TweakGroup>

        <TweakGroup label="Serif accent">
          {[
            { k: "none", n: "None" },
            { k: "restrained", n: "Restrained (about only)" },
            { k: "heavy", n: "Heavy (titles too)" },
          ].map((o) => (
            <button
              key={o.k}
              onClick={() => setState({ ...state, serifAccent: o.k })}
              className="w-full px-2 py-1.5 rounded-md text-left text-xs transition"
              style={{
                background: state.serifAccent === o.k ? "rgba(232,226,208,0.08)" : "transparent",
              }}
            >
              {o.n}
            </button>
          ))}
        </TweakGroup>
      </div>
    </div>
  );
}

function TweakGroup({ label, children }) {
  return (
    <div>
      <div className="font-mono text-[9px] tracking-[0.25em] uppercase text-[#e8e2d0]/45 mb-2">{label}</div>
      <div className="space-y-1">{children}</div>
    </div>
  );
}

Object.assign(window, { TweaksPanel, TWEAK_DEFAULTS, PALETTES, applyPalette });