/* src/v2/tweaks.jsx — TweaksPanel: theme, density, section order. */

const { useState: _twS } = React;

function TweakGroup({ label, children }) {
  return (
    <div className="tweak-group">
      <div className="lbl">{label}</div>
      {children}
    </div>
  );
}

function TweaksPanel({ open, onClose, state, setState, sectionOrder, setSectionOrder, SECTIONS }) {
  const [dragging, setDragging] = _twS(null);
  const [overIdx, setOverIdx] = _twS(null);

  if (!open) return null;

  const onDragStart = (idx) => (e) => {
    setDragging(idx);
    e.dataTransfer.effectAllowed = 'move';
  };
  const onDragOver = (idx) => (e) => {
    e.preventDefault();
    setOverIdx(idx);
  };
  const onDrop = (idx) => (e) => {
    e.preventDefault();
    if (dragging == null || dragging === idx) { setDragging(null); setOverIdx(null); return; }
    const next = [...sectionOrder];
    const [moved] = next.splice(dragging, 1);
    next.splice(idx, 0, moved);
    setSectionOrder(next);
    setDragging(null);
    setOverIdx(null);
  };

  return (
    <div className="tweaks">
      <div className="tweaks-hd">
        <span className="t">Tweaks</span>
        <button className="x" onClick={onClose} aria-label="Close">✕</button>
      </div>
      <div className="tweaks-bd">
        <TweakGroup label="Theme">
          <div className="tw-pick">
            {['light', 'dark'].map(v => (
              <button
                key={v}
                className={state.theme === v ? 'on' : ''}
                onClick={() => setState(s => ({ ...s, theme: v }))}
              >{v}</button>
            ))}
          </div>
        </TweakGroup>

        <TweakGroup label="Density">
          <div className="tw-pick">
            {['comfy', 'compact'].map(v => (
              <button
                key={v}
                className={(state.density || 'comfy') === v ? 'on' : ''}
                onClick={() => setState(s => ({ ...s, density: v }))}
              >{v}</button>
            ))}
          </div>
        </TweakGroup>

        <TweakGroup label="Section order">
          <div className="reorder">
            {sectionOrder.map((id, i) => {
              const info = (SECTIONS && SECTIONS[id]) || { title: id, hint: '' };
              const cls = [
                'reorder-item',
                dragging === i ? 'dragging' : '',
                overIdx === i && dragging !== i ? 'drag-over' : '',
              ].filter(Boolean).join(' ');
              return (
                <div
                  key={id}
                  className={cls}
                  draggable
                  onDragStart={onDragStart(i)}
                  onDragOver={onDragOver(i)}
                  onDrop={onDrop(i)}
                  onDragEnd={() => { setDragging(null); setOverIdx(null); }}
                >
                  <span className="gh">⋮⋮</span>
                  <div className="nm">
                    {id}
                    {info.hint ? <span className="e">{info.hint}</span> : null}
                  </div>
                  <span className="idx">{String(i + 1).padStart(2, '0')}</span>
                </div>
              );
            })}
          </div>
        </TweakGroup>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });