/* =========================================================
   RENFECHT — Tweaks panel
   Palette, mode (day/night), accessibility, display font,
   ornament density, hero variant.
   ========================================================= */

const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "palette":      "poster",
  "mode":         "light",
  "a11y":         "off",
  "displayFont":  "cinzel",
  "ornate":       "ornate",
  "heroVariant":  "layered"
}/*EDITMODE-END*/;

const PALETTES = [
  { id: "poster",    label: "Poster",    colors: ["#fcc5a4", "#950606", "#2a1408"] },
  { id: "parchment", label: "Parchment", colors: ["#f1e7d2", "#8a1c1c", "#1d150e"] },
  { id: "steel",     label: "Steel",     colors: ["#e8e3dc", "#7a0d12", "#1a1c1f"] },
  { id: "forest",    label: "Forest",    colors: ["#ece4cf", "#1f4a2c", "#0f1d14"] },
  { id: "midnight",  label: "Midnight",  colors: ["#f2e9d0", "#c4451c", "#100d09"] },
];

function applyTweaksToDOM(t) {
  const html = document.documentElement;
  html.setAttribute("data-palette", t.palette);
  html.setAttribute("data-mode", t.mode);
  html.setAttribute("data-a11y", t.a11y);
  html.setAttribute("data-display-font", t.displayFont);
  html.setAttribute("data-ornate", t.ornate);
}

function PalettePicker({ value, onChange }) {
  return (
    <TweakRow label="Color story">
      <div className="palette-picker">
        {PALETTES.map(p => (
          <button key={p.id} type="button"
            className={"pal-chip " + (value === p.id ? "is-on" : "")}
            onClick={() => onChange(p.id)} title={p.label} aria-label={p.label}>
            <span className="pal-swatches">
              {p.colors.map((c, i) => <i key={i} style={{ background: c }} />)}
            </span>
            <span className="pal-name">{p.label}</span>
          </button>
        ))}
      </div>
      <style>{`
        .palette-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
        .pal-chip { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 6px; cursor: pointer; color: inherit; display: flex; flex-direction: column; gap: 4px; font: inherit; transition: all .12s; }
        .pal-chip:hover { border-color: rgba(255,255,255,0.3); }
        .pal-chip.is-on { border-color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset; }
        .pal-swatches { display: flex; height: 22px; border-radius: 3px; overflow: hidden; border: 1px solid rgba(0,0,0,0.2); }
        .pal-swatches i { flex: 1; }
        .pal-name { font-size: 10.5px; letter-spacing: 0.06em; text-align: left; opacity: 0.85; }
      `}</style>
    </TweakRow>
  );
}

function RenfechtTweaksPanel({ tweaks, setTweak }) {
  React.useEffect(() => applyTweaksToDOM(tweaks), [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette">
        <PalettePicker value={tweaks.palette} onChange={v => setTweak("palette", v)} />
      </TweakSection>

      <TweakSection label="Mode">
        <TweakRadio
          label="Light / dark"
          value={tweaks.mode}
          onChange={v => setTweak("mode", v)}
          options={[
            { value: "light", label: "Day" },
            { value: "dark",  label: "Night" },
          ]}
        />
        <TweakRadio
          label="Reading mode"
          value={tweaks.a11y}
          onChange={v => setTweak("a11y", v)}
          options={[
            { value: "off", label: "Default" },
            { value: "on",  label: "Scripture" },
          ]}
        />
      </TweakSection>

      <TweakSection label="Type & ornament">
        <TweakSelect
          label="Display font"
          value={tweaks.displayFont}
          onChange={v => setTweak("displayFont", v)}
          options={[
            { value: "cinzel",      label: "Cinzel (Roman)" },
            { value: "deutsch",     label: "Deutsch Gothic" },
            { value: "blackletter", label: "UnifrakturCook" },
            { value: "fell",        label: "IM Fell English" },
          ]}
        />
        <TweakRadio
          label="Ornament"
          value={tweaks.ornate}
          onChange={v => setTweak("ornate", v)}
          options={[
            { value: "plain",  label: "Plain" },
            { value: "ornate", label: "Ornate" },
          ]}
        />
      </TweakSection>

      <TweakSection label="Layout">
        <TweakRadio
          label="Hero"
          value={tweaks.heroVariant}
          onChange={v => setTweak("heroVariant", v)}
          options={[
            { value: "centered", label: "Centered" },
            { value: "layered",  label: "Layered" },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

Object.assign(window, { RenfechtTweaksPanel, DEFAULT_TWEAKS, applyTweaksToDOM, PALETTES });