// WeaveStudy — Tweaks Panel (design-mode side panel)
// Provides useTweaks hook + floating panel UI for variant switching

(function () {
  const { useState, useEffect, useRef } = React;

  function useTweaks(defaults) {
    const [state, setState] = useState(() => {
      try {
        const saved = JSON.parse(sessionStorage.getItem("ws-tweaks") || "{}");
        return { ...defaults, ...saved };
      } catch {
        return { ...defaults };
      }
    });

    const setTweak = (key, value) => {
      setState(prev => {
        const next = { ...prev, [key]: value };
        try { sessionStorage.setItem("ws-tweaks", JSON.stringify(next)); } catch {}
        return next;
      });
    };

    return [state, setTweak];
  }

  function TweaksPanel({ title, children }) {
    const [open, setOpen] = useState(false);
    return (
      <>
        {/* Toggle button */}
        <button
          onClick={() => setOpen(o => !o)}
          style={{
            position: "fixed",
            bottom: 24, right: open ? 292 : 24,
            zIndex: 999,
            width: 44, height: 44,
            borderRadius: 12,
            background: "var(--weave-violet)",
            color: "white",
            display: "flex", alignItems: "center", justifyContent: "center",
            boxShadow: "0 4px 16px rgba(101,65,242,0.45)",
            fontSize: 18,
            transition: "right 240ms cubic-bezier(0.4,0,0.2,1)",
            border: "none", cursor: "pointer"
          }}
          title="디자인 트윅 패널"
        >
          {open ? "×" : "⚙"}
        </button>

        {/* Slide-in panel */}
        <div style={{
          position: "fixed",
          top: 0, right: 0, bottom: 0,
          width: 280,
          background: "#0F0F14",
          color: "rgba(255,255,255,0.85)",
          zIndex: 998,
          overflowY: "auto",
          transform: open ? "translateX(0)" : "translateX(100%)",
          transition: "transform 240ms cubic-bezier(0.4,0,0.2,1)",
          borderLeft: "1px solid rgba(255,255,255,0.08)",
          boxShadow: open ? "-8px 0 32px rgba(0,0,0,0.5)" : "none",
          padding: "20px 16px 80px"
        }}>
          <div style={{
            fontSize: 11, fontWeight: 800,
            letterSpacing: "0.12em", textTransform: "uppercase",
            color: "var(--weave-violet-bright)",
            marginBottom: 20,
            paddingBottom: 12,
            borderBottom: "1px solid rgba(255,255,255,0.08)"
          }}>
            ⚙ {title || "Tweaks"}
          </div>
          {children}
        </div>
      </>
    );
  }

  function TweakSection({ label }) {
    return (
      <div style={{
        fontSize: 10, fontWeight: 800,
        letterSpacing: "0.1em", textTransform: "uppercase",
        color: "rgba(255,255,255,0.35)",
        marginTop: 20, marginBottom: 8,
        paddingTop: 12,
        borderTop: "1px solid rgba(255,255,255,0.06)"
      }}>
        {label}
      </div>
    );
  }

  function TweakRadio({ label, value, options, onChange }) {
    return (
      <div style={{ marginBottom: 8 }}>
        {label && (
          <div style={{ fontSize: 11, color: "rgba(255,255,255,0.45)", marginBottom: 6, fontWeight: 600 }}>
            {label}
          </div>
        )}
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          {options.map(opt => (
            <button
              key={opt.value}
              onClick={() => onChange(opt.value)}
              style={{
                padding: "8px 12px",
                borderRadius: 8,
                fontSize: 12,
                fontWeight: 700,
                textAlign: "left",
                background: value === opt.value ? "rgba(125,94,247,0.25)" : "rgba(255,255,255,0.04)",
                color: value === opt.value ? "var(--weave-violet-bright)" : "rgba(255,255,255,0.65)",
                border: value === opt.value ? "1px solid rgba(125,94,247,0.5)" : "1px solid rgba(255,255,255,0.06)",
                cursor: "pointer",
                transition: "background 120ms"
              }}
            >
              {value === opt.value ? "● " : "○ "}{opt.label}
            </button>
          ))}
        </div>
      </div>
    );
  }

  // Expose globals
  Object.assign(window, { useTweaks, TweaksPanel, TweakSection, TweakRadio });
})();