// PuzzleSelector — horizontal bar with puzzle picker + category tabs + category management
function PuzzleSelector({ puzzleId, categoryName, categories, onPuzzleChange, onCategoryChange, onCategoriesChange }) {
  const [managing, setManaging] = React.useState(false);
  const [newCatName, setNewCatName] = React.useState('');
  const [editingIdx, setEditingIdx] = React.useState(null);
  const [editingVal, setEditingVal] = React.useState('');
  const inputRef = React.useRef(null);

  const puzzle = WCA_PUZZLES.find(p => p.id === puzzleId) || WCA_PUZZLES[0];

  React.useEffect(() => {
    if (managing && inputRef.current) inputRef.current.focus();
  }, [managing]);

  function addCategory() {
    const name = newCatName.trim();
    if (!name || categories.includes(name)) return;
    onCategoriesChange([...categories, name]);
    setNewCatName('');
  }

  function deleteCategory(idx) {
    const next = categories.filter((_, i) => i !== idx);
    onCategoriesChange(next);
    // If active cat was deleted, switch to first
    if (categories[idx] === categoryName) {
      onCategoryChange(next[0] || null);
    }
  }

  function startEdit(idx) {
    setEditingIdx(idx);
    setEditingVal(categories[idx]);
  }

  function commitEdit(idx) {
    const val = editingVal.trim();
    if (!val || (categories.includes(val) && categories[idx] !== val)) {
      setEditingIdx(null); return;
    }
    const next = categories.map((c, i) => i === idx ? val : c);
    onCategoriesChange(next);
    if (categories[idx] === categoryName) onCategoryChange(val);
    setEditingIdx(null);
  }

  function reorder(idx, dir) {
    const next = [...categories];
    const swap = idx + dir;
    if (swap < 0 || swap >= next.length) return;
    [next[idx], next[swap]] = [next[swap], next[idx]];
    onCategoriesChange(next);
  }

  return (
    <div style={psStyles.root}>
      {/* Puzzle picker row */}
      <div style={psStyles.puzzleRow}>
        <span style={psStyles.sectionLabel}>PUZZLE</span>
        <div style={psStyles.puzzleList}>
          {WCA_PUZZLES.map(p => (
            <button
              key={p.id}
              style={{...psStyles.puzzleBtn, ...(p.id === puzzleId ? psStyles.puzzleBtnActive : {})}}
              onClick={() => onPuzzleChange(p.id)}
              title={p.label}
            >
              {p.label}
            </button>
          ))}
        </div>
      </div>

      {/* Category row */}
      <div style={psStyles.catRow}>
        <span style={psStyles.sectionLabel}>CATEGORY</span>
        <div style={psStyles.catList}>
          {categories.map(cat => (
            <button
              key={cat}
              style={{...psStyles.catBtn, ...(cat === categoryName ? psStyles.catBtnActive : {})}}
              onClick={() => onCategoryChange(cat)}
            >
              {cat}
            </button>
          ))}
        </div>
        <button
          style={{...psStyles.manageBtn, ...(managing ? psStyles.manageBtnActive : {})}}
          onClick={() => setManaging(m => !m)}
          title="Manage categories"
        >
          {managing ? '✕ Done' : '⚙ Edit'}
        </button>
      </div>

      {/* Category management panel */}
      {managing && (
        <div style={psStyles.managePanel}>
          <div style={psStyles.managePanelInner}>
            <span style={psStyles.managePanelTitle}>Categories for {puzzle.label}</span>
            <div style={psStyles.manageList}>
              {categories.map((cat, idx) => (
                <div key={cat + idx} style={psStyles.manageRow}>
                  {editingIdx === idx ? (
                    <input
                      style={psStyles.editInput}
                      value={editingVal}
                      autoFocus
                      onChange={e => setEditingVal(e.target.value)}
                      onBlur={() => commitEdit(idx)}
                      onKeyDown={e => {
                        if (e.key === 'Enter') commitEdit(idx);
                        if (e.key === 'Escape') setEditingIdx(null);
                      }}
                    />
                  ) : (
                    <span style={psStyles.manageCatName}>{cat}</span>
                  )}
                  <div style={psStyles.manageActions}>
                    <button style={psStyles.iconBtn} onClick={() => reorder(idx, -1)} title="Move up" disabled={idx === 0}>↑</button>
                    <button style={psStyles.iconBtn} onClick={() => reorder(idx, 1)} title="Move down" disabled={idx === categories.length - 1}>↓</button>
                    <button style={psStyles.iconBtn} onClick={() => startEdit(idx)} title="Rename">✎</button>
                    <button
                      style={{...psStyles.iconBtn, ...psStyles.iconBtnDanger}}
                      onClick={() => deleteCategory(idx)}
                      title="Delete"
                      disabled={categories.length <= 1}
                    >✕</button>
                  </div>
                </div>
              ))}
            </div>
            <div style={psStyles.addRow}>
              <input
                ref={inputRef}
                style={psStyles.addInput}
                value={newCatName}
                placeholder="New category name…"
                onChange={e => setNewCatName(e.target.value)}
                onKeyDown={e => { if (e.key === 'Enter') addCategory(); }}
              />
              <button
                style={psStyles.addBtn}
                onClick={addCategory}
                disabled={!newCatName.trim()}
              >+ Add</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

const psStyles = {
  root: {
    display: 'flex', flexDirection: 'column', gap: '0',
    background: 'oklch(12% 0.01 250)',
    borderBottom: '1px solid oklch(18% 0.01 250)',
  },
  puzzleRow: {
    display: 'flex', alignItems: 'center', gap: '12px',
    padding: '8px 24px',
    borderBottom: '1px solid oklch(16% 0.01 250)',
    overflowX: 'auto',
  },
  catRow: {
    display: 'flex', alignItems: 'center', gap: '8px',
    padding: '7px 24px',
    overflowX: 'auto',
  },
  sectionLabel: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '9px', fontWeight: '700', letterSpacing: '0.14em',
    color: 'oklch(35% 0.01 250)', flexShrink: 0,
    minWidth: '62px',
  },
  puzzleList: { display: 'flex', gap: '4px', flexWrap: 'nowrap' },
  puzzleBtn: {
    padding: '4px 10px', borderRadius: '5px', border: 'none',
    background: 'transparent', color: 'oklch(45% 0.01 250)',
    fontSize: '12px', fontWeight: '500', cursor: 'pointer',
    fontFamily: "'Inter', sans-serif", whiteSpace: 'nowrap',
    transition: 'all 0.12s',
  },
  puzzleBtnActive: {
    background: 'oklch(20% 0.14 165)', color: 'oklch(65% 0.18 165)',
    fontWeight: '600',
  },
  catList: { display: 'flex', gap: '4px', flex: 1, flexWrap: 'nowrap', overflowX: 'auto' },
  catBtn: {
    padding: '4px 12px', borderRadius: '5px',
    border: '1px solid transparent',
    background: 'transparent', color: 'oklch(45% 0.01 250)',
    fontSize: '12px', fontWeight: '500', cursor: 'pointer',
    fontFamily: "'Inter', sans-serif", whiteSpace: 'nowrap',
    transition: 'all 0.12s',
  },
  catBtnActive: {
    background: 'oklch(18% 0.01 250)',
    border: '1px solid oklch(28% 0.01 250)',
    color: 'oklch(80% 0.01 250)',
    fontWeight: '600',
  },
  manageBtn: {
    padding: '4px 10px', borderRadius: '5px',
    border: '1px solid oklch(22% 0.01 250)',
    background: 'transparent', color: 'oklch(40% 0.01 250)',
    fontSize: '11px', cursor: 'pointer', fontFamily: "'Inter', sans-serif",
    whiteSpace: 'nowrap', flexShrink: 0, transition: 'all 0.12s',
  },
  manageBtnActive: {
    border: '1px solid oklch(30% 0.08 25)', color: 'oklch(60% 0.10 25)',
  },
  managePanel: {
    borderTop: '1px solid oklch(18% 0.01 250)',
    background: 'oklch(11% 0.01 250)',
    padding: '16px 24px',
  },
  managePanelInner: {
    maxWidth: '500px', display: 'flex', flexDirection: 'column', gap: '12px',
  },
  managePanelTitle: {
    fontSize: '12px', fontWeight: '600',
    color: 'oklch(55% 0.01 250)', letterSpacing: '0.04em',
  },
  manageList: { display: 'flex', flexDirection: 'column', gap: '4px' },
  manageRow: {
    display: 'flex', alignItems: 'center', gap: '8px',
    padding: '6px 10px', borderRadius: '6px',
    background: 'oklch(14% 0.01 250)',
    border: '1px solid oklch(20% 0.01 250)',
  },
  manageCatName: {
    flex: 1, fontSize: '13px', color: 'oklch(75% 0.01 250)',
    fontFamily: "'Inter', sans-serif",
  },
  editInput: {
    flex: 1, background: 'oklch(10% 0.01 250)',
    border: '1px solid oklch(65% 0.18 165)',
    borderRadius: '4px', padding: '3px 8px',
    color: 'oklch(85% 0.01 250)', fontSize: '13px',
    fontFamily: "'Inter', sans-serif", outline: 'none',
  },
  manageActions: { display: 'flex', gap: '4px' },
  iconBtn: {
    width: '26px', height: '26px', borderRadius: '4px',
    border: '1px solid oklch(22% 0.01 250)',
    background: 'oklch(18% 0.01 250)',
    color: 'oklch(50% 0.01 250)', fontSize: '12px',
    cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
    transition: 'all 0.12s', padding: 0,
  },
  iconBtnDanger: { color: 'oklch(60% 0.12 25)', border: '1px solid oklch(25% 0.08 25)' },
  addRow: { display: 'flex', gap: '8px' },
  addInput: {
    flex: 1, padding: '8px 12px', borderRadius: '6px',
    background: 'oklch(14% 0.01 250)',
    border: '1px solid oklch(22% 0.01 250)',
    color: 'oklch(85% 0.01 250)', fontSize: '13px',
    fontFamily: "'Inter', sans-serif", outline: 'none',
  },
  addBtn: {
    padding: '8px 16px', borderRadius: '6px', border: 'none',
    background: 'oklch(65% 0.18 165)', color: 'oklch(10% 0.01 250)',
    fontSize: '13px', fontWeight: '600', cursor: 'pointer',
    fontFamily: "'Inter', sans-serif", transition: 'opacity 0.15s',
  },
};

Object.assign(window, { PuzzleSelector });