// Tweaks panel — accent color, density, badge style, etc.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "indigo",
  "density": "comfortable",
  "badgeStyle": "default",
  "sidebarLabels": true,
  "statusTheme": "default",
  "darkMode": false,
  "showLegend": true
}/*EDITMODE-END*/;

const useTweaks = (defaults) => {
  const [tweaks, setTweaks] = useState(defaults);
  const setTweak = (keyOrObj, value) => {
    const patch = typeof keyOrObj === "string" ? { [keyOrObj]: value } : keyOrObj;
    setTweaks(prev => ({ ...prev, ...patch }));
    try { window.parent.postMessage({ type:"__edit_mode_set_keys", edits: patch }, "*"); } catch {}
  };
  return [tweaks, setTweak];
};

const TweaksPanel = ({ tweaks, setTweak, open, onClose }) => {
  const ref = useRef(null);
  const [drag, setDrag] = useState({ x:24, y:0, dragging:false, ox:0, oy:0 });
  useEffect(() => {
    const onMove = (e) => {
      if (!drag.dragging) return;
      setDrag(d => ({ ...d, x: window.innerWidth - (e.clientX - d.ox) - 360, y: e.clientY - d.oy }));
    };
    const onUp = () => setDrag(d => ({ ...d, dragging:false }));
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseup", onUp);
    return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("mouseup", onUp); };
  }, [drag.dragging]);
  if (!open) return null;
  return (
    <div ref={ref}
      className="fixed z-[100] w-[340px] bg-white rounded-2xl shadow-2xl border border-ink-100 flex flex-col pop"
      style={{ right: drag.x, top: drag.y || 80, maxHeight:"80vh" }}>
      <div onMouseDown={(e)=>setDrag(d=>({ ...d, dragging:true, ox:e.clientX-(window.innerWidth-d.x-360), oy:e.clientY-(d.y||80) }))}
        className="flex items-center gap-2 px-4 py-3 border-b border-ink-100 cursor-grab active:cursor-grabbing">
        <Icon name="sparkles" size={14} className="text-amber-500"/>
        <div className="text-[13px] font-semibold text-ink-900">Tweaks</div>
        <Badge color="amber">Demo</Badge>
        <button onClick={onClose} className="ml-auto p-1.5 hover:bg-ink-100 rounded-md text-ink-500"><Icon name="x" size={13}/></button>
      </div>
      <div className="p-4 overflow-y-auto thin-scroll">
        <TwkSection title="ธีม">
          <TwkRow label="Accent color">
            <div className="flex items-center gap-1.5">
              {["indigo","emerald","sky","violet"].map(c => (
                <button key={c} onClick={()=>setTweak("accent", c)}
                  className={`w-7 h-7 rounded-md border-2 ${tweaks.accent===c?"border-ink-900":"border-transparent"}`}
                  style={{background: c==="indigo"?"#4f46e5":c==="emerald"?"#10b981":c==="sky"?"#0ea5e9":"#7c3aed"}}/>
              ))}
            </div>
          </TwkRow>
          <TwkRow label="Status color theme">
            <Segmented value={tweaks.statusTheme} onChange={(v)=>setTweak("statusTheme", v)} options={[
              { value:"default", label:"Default" }, { value:"vivid", label:"Vivid" },
            ]}/>
          </TwkRow>
        </TwkSection>

        <TwkSection title="ตาราง RACI">
          <TwkRow label="Density">
            <Segmented value={tweaks.density} onChange={(v)=>setTweak("density", v)} options={[
              { value:"compact", label:"Compact" },
              { value:"comfortable", label:"Comfortable" },
            ]}/>
          </TwkRow>
          <TwkRow label="Badge style">
            <Segmented value={tweaks.badgeStyle} onChange={(v)=>setTweak("badgeStyle", v)} options={[
              { value:"default", label:"Solid" },
              { value:"outlined", label:"Outline" },
              { value:"dot", label:"Dot" },
            ]}/>
          </TwkRow>
          <TwkRow label="Show RACI legend">
            <Toggle checked={tweaks.showLegend} onChange={()=>setTweak("showLegend", !tweaks.showLegend)}/>
          </TwkRow>
        </TwkSection>

        <TwkSection title="Layout">
          <TwkRow label="Sidebar labels">
            <Toggle checked={tweaks.sidebarLabels} onChange={()=>setTweak("sidebarLabels", !tweaks.sidebarLabels)}/>
          </TwkRow>
        </TwkSection>

        <div className="mt-4 px-3 py-2.5 rounded-lg bg-amber-50 border border-amber-100 text-amber-800 text-[11.5px]">
          <strong>Demo prototype</strong> — การตั้งค่าที่นี่ใช้สำหรับ demo / present เท่านั้น และจะถูกบันทึกไว้ในไฟล์อัตโนมัติเมื่อแก้ไข
        </div>
      </div>
    </div>
  );
};

const TwkSection = ({ title, children }) => (
  <div className="mb-4">
    <div className="text-[10.5px] uppercase tracking-wider text-ink-500 font-semibold mb-2">{title}</div>
    <div className="space-y-2 rounded-lg border border-ink-100 bg-ink-50/40 p-2.5">{children}</div>
  </div>
);
const TwkRow = ({ label, children }) => (
  <div className="flex items-center justify-between gap-3">
    <div className="text-[12px] text-ink-700">{label}</div>
    <div>{children}</div>
  </div>
);

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