// Skills list + Tweaks panel — lets the user reorder the dropdown items.

const SKILL_DEFAULTS = /*EDITMODE-BEGIN*/{
  "skills": [
    "frontend",
    "backend",
    "mobile",
    "APIs",
    "databases",
    "integrations",
    "technical leadership",
    "product strategy",
    "e-commerce",
    "CMS",
    "SEO",
    "digital marketing",
    "AI workflows",
    "system audits",
    "data pipelines",
    "devops",
    "cloud infrastructure"
  ]
}/*EDITMODE-END*/;

const reorderStyles = `
  .reorder { display: flex; flex-direction: column; gap: 4px; }
  .reorder-row {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 4px 4px 6px;
    background: rgba(0,0,0,0.04);
    border-radius: 6px;
    font-size: 11.5px;
  }
  .reorder-input {
    flex: 1; min-width: 0;
    appearance: none; border: 0; background: transparent;
    font: inherit; color: #29261b; outline: none;
    padding: 2px 4px; border-radius: 4px;
  }
  .reorder-input:focus { background: rgba(255,255,255,0.7); box-shadow: 0 0 0 1px rgba(0,0,0,0.15); }
  .reorder-btn {
    appearance: none; border: 0; background: transparent;
    width: 22px; height: 22px; border-radius: 5px; cursor: default;
    color: rgba(41,38,27,0.7); font-size: 13px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .reorder-btn:hover:not(:disabled) { background: rgba(0,0,0,0.08); color: #29261b; }
  .reorder-btn:disabled { opacity: 0.3; }
  .reorder-btn.danger:hover { background: rgba(200,40,40,0.12); color: #b32020; }
  .reorder-add {
    appearance: none; border: 1px dashed rgba(41,38,27,0.25);
    background: transparent; color: rgba(41,38,27,0.7);
    padding: 6px; border-radius: 6px; cursor: default; font: inherit;
    margin-top: 2px;
  }
  .reorder-add:hover { background: rgba(0,0,0,0.04); color: #29261b; border-color: rgba(41,38,27,0.4); }
`;

function ReorderList({ items, onChange }) {
  const move = (i, dir) => {
    const j = i + dir;
    if (j < 0 || j >= items.length) return;
    const next = items.slice();
    [next[i], next[j]] = [next[j], next[i]];
    onChange(next);
  };
  const updateText = (i, text) => {
    const next = items.slice();
    next[i] = text;
    onChange(next);
  };
  const remove = (i) => {
    const next = items.slice();
    next.splice(i, 1);
    onChange(next);
  };
  const add = () => {
    onChange([...items, 'new item']);
  };
  return (
    <div className="reorder">
      {items.map((item, i) => (
        <div key={i} className="reorder-row">
          <input
            className="reorder-input"
            value={item}
            onChange={(e) => updateText(i, e.target.value)}
            spellCheck={false}
          />
          <button
            type="button"
            className="reorder-btn"
            onClick={() => move(i, -1)}
            disabled={i === 0}
            aria-label="Move up"
          >↑</button>
          <button
            type="button"
            className="reorder-btn"
            onClick={() => move(i, +1)}
            disabled={i === items.length - 1}
            aria-label="Move down"
          >↓</button>
          <button
            type="button"
            className="reorder-btn danger"
            onClick={() => remove(i)}
            aria-label="Delete"
          >×</button>
        </div>
      ))}
      <button type="button" className="reorder-add" onClick={add}>+ add item</button>
    </div>
  );
}

function SkillsApp() {
  const [t, setTweak] = useTweaks(SKILL_DEFAULTS);
  const [listEl, setListEl] = React.useState(null);

  React.useEffect(() => {
    const el = document.querySelector('.more-items');
    if (el) {
      // clear any static fallback content before mounting the portal
      el.replaceChildren();
      setListEl(el);
    }
  }, []);

  return (
    <>
      {listEl && ReactDOM.createPortal(
        t.skills.map((s, i) => <li key={`${s}-${i}`}>{s}</li>),
        listEl
      )}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Skills" />
        <ReorderList
          items={t.skills}
          onChange={(v) => setTweak('skills', v)}
        />
        <TweakButton
          label="Reset to default order"
          secondary
          onClick={() => setTweak('skills', SKILL_DEFAULTS.skills)}
        />
      </TweaksPanel>
    </>
  );
}

// inject reorder styles
const __reorderStyleEl = document.createElement('style');
__reorderStyleEl.textContent = reorderStyles;
document.head.appendChild(__reorderStyleEl);

ReactDOM.createRoot(document.getElementById('app-root')).render(<SkillsApp />);