// dib — Tweaks Panel + useTweaks hook
const { useState, useEffect } = React;

const STORAGE_KEY = 'dib-tweaks-v1';

function useTweaks(defaults) {
  const init = () => {
    try {
      const stored = JSON.parse(localStorage.getItem(STORAGE_KEY));
      return stored ? { ...defaults, ...stored } : { ...defaults };
    } catch { return { ...defaults }; }
  };

  const [tweaks, setTweaksState] = useState(init);

  const setTweak = (keyOrObj, value) => {
    setTweaksState(prev => {
      const next = typeof keyOrObj === 'object' && keyOrObj !== null
        ? { ...prev, ...keyOrObj }
        : { ...prev, [keyOrObj]: value };
      try { localStorage.setItem(STORAGE_KEY, JSON.stringify(next)); } catch {}
      return next;
    });
  };

  return [tweaks, setTweak];
}

function TweaksPanel({ title, children }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button
        className="tweaks__trigger"
        onClick={() => setOpen(o => !o)}
        aria-label="Open tweaks panel"
        title="Tweaks"
      >
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <circle cx="8" cy="4"  r="1.5" fill="currentColor"/>
          <circle cx="8" cy="8"  r="1.5" fill="currentColor"/>
          <circle cx="8" cy="12" r="1.5" fill="currentColor"/>
          <line x1="2"  y1="4"  x2="6"  y2="4"  stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
          <line x1="10" y1="4"  x2="14" y2="4"  stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
          <line x1="2"  y1="8"  x2="6"  y2="8"  stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
          <line x1="10" y1="8"  x2="14" y2="8"  stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
          <line x1="2"  y1="12" x2="6"  y2="12" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
          <line x1="10" y1="12" x2="14" y2="12" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
        </svg>
      </button>

      {open && (
        <aside className="tweaks__panel" role="dialog" aria-label={title}>
          <div className="tweaks__header">
            <span className="tweaks__title">{title}</span>
            <button className="tweaks__close" onClick={() => setOpen(false)} aria-label="Close">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M2 2l10 10M12 2L2 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
              </svg>
            </button>
          </div>
          <div className="tweaks__body">{children}</div>
        </aside>
      )}
    </>
  );
}

function TweakSection({ title, children }) {
  return (
    <div className="tweaks__section">
      <div className="tweaks__section-title">{title}</div>
      {children}
    </div>
  );
}

function TweakRadio({ label, value, options, onChange }) {
  return (
    <div className="tweak-radio">
      {label && <div className="tweak-radio__label">{label}</div>}
      <div className="tweak-radio__row">
        {options.map(opt => (
          <button
            key={opt.value}
            className={`tweak-radio__btn ${value === opt.value ? 'on' : ''}`}
            onClick={() => onChange(opt.value)}
            aria-pressed={value === opt.value}
          >
            {opt.label}
          </button>
        ))}
      </div>
    </div>
  );
}

function TweakColor({ label, value, onChange }) {
  return (
    <label className="tweak-color">
      <span className="tweak-color__label">{label}</span>
      <input
        type="color"
        className="tweak-color__input"
        value={value}
        onChange={e => onChange(e.target.value)}
      />
      <span className="tweak-color__hex">{value}</span>
    </label>
  );
}

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