/* global React */
// User-facing tweaks panel. Drop-in replacement for the Claude Design dev panel:
// exposes useTweaks / TweaksPanel / TweakSection / TweakRadio / TweakToggle on
// window, persists choices in localStorage, and opens from a floating gear button.

const __TWEAKS_STYLE = `
  .twk-fab{position:fixed;right:20px;bottom:20px;z-index:2147483645;
    width:48px;height:48px;border:none;border-radius:50%;cursor:pointer;
    background:linear-gradient(180deg,var(--honey-glow,#FFCB47),var(--honey,#F4B41A) 60%,var(--honey-deep,#B07A07));
    color:var(--ink,#2A1846);font-size:22px;line-height:1;
    box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -1px 0 rgba(0,0,0,.2) inset,
      0 10px 28px -6px rgba(0,0,0,.45),0 0 0 1px rgba(244,180,26,.35);
    transition:transform .15s ease}
  .twk-fab:hover{transform:translateY(-2px) rotate(20deg)}
  .twk-fab[data-open="1"]{transform:rotate(60deg)}
  .twk-panel{position:fixed;right:20px;bottom:80px;z-index:2147483646;width:280px;
    max-height:calc(100vh - 120px);display:flex;flex-direction:column;
    background:rgba(31,17,56,.92);color:var(--text,#F8ECCC);
    -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
    border:1px solid rgba(244,180,26,.25);border-radius:10px;
    box-shadow:0 1px 0 rgba(244,180,26,.3) inset,0 20px 60px rgba(0,0,0,.45);
    font-family:"Spectral",Georgia,serif;font-size:13px;line-height:1.4;overflow:hidden;
    animation:twk-in .18s cubic-bezier(.2,.7,.2,1)}
  @keyframes twk-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  .theme-sad .twk-panel{background:rgba(255,247,224,.94);color:#3A2206;border-color:rgba(122,79,0,.3)}
  .theme-czarna .twk-panel{background:rgba(22,13,7,.94);color:#F0DDA8;border-color:rgba(232,163,23,.25)}
  .twk-hd{display:flex;align-items:center;justify-content:space-between;
    padding:12px 10px 12px 16px;border-bottom:1px solid rgba(244,180,26,.18)}
  .twk-hd b{font-family:"Cinzel",serif;font-size:12px;font-weight:700;
    letter-spacing:.25em;text-transform:uppercase;color:var(--honey,#F4B41A)}
  .twk-x{appearance:none;border:0;background:transparent;color:inherit;opacity:.55;
    width:24px;height:24px;border-radius:6px;cursor:pointer;font-size:14px;line-height:1}
  .twk-x:hover{opacity:1;background:rgba(244,180,26,.12)}
  .twk-body{padding:6px 16px 16px;display:flex;flex-direction:column;gap:12px;
    overflow-y:auto;overflow-x:hidden;min-height:0}
  .twk-sect{font-family:"Cinzel",serif;font-size:10px;font-weight:600;letter-spacing:.35em;
    text-transform:uppercase;color:var(--honey,#F4B41A);opacity:.85;padding:10px 0 2px}
  .twk-sect:first-child{padding-top:4px}
  .twk-row{display:flex;flex-direction:column;gap:6px}
  .twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
  .twk-lbl{font-family:"Spectral",serif;font-size:13px;opacity:.85}
  .twk-seg{display:flex;padding:3px;border-radius:7px;background:rgba(244,180,26,.08);
    border:1px solid rgba(244,180,26,.18);gap:2px}
  .twk-seg button{flex:1;border:0;background:transparent;color:inherit;font:inherit;
    padding:6px 6px;border-radius:5px;cursor:pointer;opacity:.7;
    font-family:"Spectral",serif;font-size:12px;transition:all .15s}
  .twk-seg button:hover{opacity:1}
  .twk-seg button[data-on="1"]{background:linear-gradient(180deg,var(--honey-glow,#FFCB47),var(--honey,#F4B41A));
    color:var(--ink,#2A1846);opacity:1;font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 2px 6px rgba(0,0,0,.2)}
  .twk-toggle{position:relative;width:36px;height:20px;border:0;border-radius:999px;
    background:rgba(244,180,26,.2);transition:background .15s;cursor:pointer;padding:0;flex:0 0 auto}
  .twk-toggle[data-on="1"]{background:var(--honey,#F4B41A)}
  .twk-toggle i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
    background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
  .twk-toggle[data-on="1"] i{transform:translateX(16px)}
`;

const STORAGE_KEY = "henrieta.tweaks.v1";

function useTweaks(defaults) {
  const [values, setValues] = React.useState(() => {
    if (typeof window === "undefined") return defaults;
    try {
      const stored = localStorage.getItem(STORAGE_KEY);
      if (stored) return { ...defaults, ...JSON.parse(stored) };
    } catch (e) {}
    return defaults;
  });
  const setTweak = React.useCallback((keyOrEdits, val) => {
    const edits =
      typeof keyOrEdits === "object" && keyOrEdits !== null
        ? keyOrEdits
        : { [keyOrEdits]: val };
    setValues((prev) => {
      const next = { ...prev, ...edits };
      try {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
      } catch (e) {}
      return next;
    });
  }, []);
  return [values, setTweak];
}

function TweaksPanel({ title = "Tweaks", children }) {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <style>{__TWEAKS_STYLE}</style>
      <button
        className="twk-fab"
        data-open={open ? "1" : "0"}
        aria-label="Otwórz ustawienia"
        onClick={() => setOpen((o) => !o)}
      >
        ⚙
      </button>
      {open && (
        <div className="twk-panel" role="dialog" aria-label={title}>
          <div className="twk-hd">
            <b>{title}</b>
            <button className="twk-x" aria-label="Zamknij" onClick={() => setOpen(false)}>
              ✕
            </button>
          </div>
          <div className="twk-body">{children}</div>
        </div>
      )}
    </>
  );
}

function TweakSection({ title, label, children }) {
  return (
    <>
      <div className="twk-sect">{title || label}</div>
      {children}
    </>
  );
}

function TweakRadio({ label, value, options, onChange }) {
  const opts = options.map((o) =>
    typeof o === "object" ? o : { value: o, label: o }
  );
  return (
    <div className="twk-row">
      <div className="twk-lbl">{label}</div>
      <div className="twk-seg" role="radiogroup" aria-label={label}>
        {opts.map((o) => (
          <button
            key={o.value}
            type="button"
            role="radio"
            aria-checked={o.value === value}
            data-on={o.value === value ? "1" : "0"}
            onClick={() => onChange(o.value)}
          >
            {o.label}
          </button>
        ))}
      </div>
    </div>
  );
}

function TweakToggle({ label, value, onChange }) {
  return (
    <div className="twk-row twk-row-h">
      <div className="twk-lbl">{label}</div>
      <button
        type="button"
        className="twk-toggle"
        role="switch"
        aria-checked={!!value}
        data-on={value ? "1" : "0"}
        onClick={() => onChange(!value)}
      >
        <i />
      </button>
    </div>
  );
}

Object.assign(window, {
  useTweaks,
  TweaksPanel,
  TweakSection,
  TweakRadio,
  TweakToggle,
});