/* ============================================================
   CategoryTreeEditor — manager-system organism (A6)
   ============================================================
   /beallitasok/kategoriak főnézete. Csoportosított fa-lista: minden
   gyökér egy szekció, alatta az alkategóriák. Spec: 30_beallitasok 4.2.

   UX-döntések (Iter 5):
     C-1A  drag-and-drop reorder fogantyúval (szülő-hatókörben, SD-64)
     C-2A  inline IconPicker popover
     C-3B  preview-kártyás default-import dialog (külön komponens)
     C-4A  always-visible sor-akciók (toggle + edit + kebab)

   Bake-in viselkedés a specből:
     - Inline `name`-szerkesztés (K-026 mintára): click → Enter ment, Esc megszakít
     - isActive toggle: azonnali (optimistic)
     - Inaktív kategóriák: opacity 0.55 + "inaktív" badge
     - "Új gyökér" gomb → CategoryImportDialog
     - "Új alkategória" inline-add per gyökér-szekció
     - Törlés kebab-rejtett, a delete-guard `409`-cel szól, ha hivatkozott

   Props:
     categories     flat list:
                    { id, parentId, name, iconRef, isActive, sortOrder,
                      sourceCatalogId, ticketCount, hasActiveChildren }[]
     onUpdate       ({ id, patch }) => void   (PUT /v1/categories/{id})
     onCreate       ({ parentId, name, iconRef }) => void  (POST /v1/categories)
     onReorder      ({ parentId, orderedIds }) => void
     onDelete       (id) => void
     onOpenImport   () => void                 (a 'Új gyökér' gombhoz)
     showInactive   boolean                    (alapból true)
     onToggleShowInactive (next) => void
   ============================================================ */

(function () {
  const { IconPicker, iconGlyph } = window;

  /* ---- icons ---- */

  const Svg = (paths, viewBox = '0 0 24 24', size = 14) => (
    <svg width={size} height={size} viewBox={viewBox} fill="none" stroke="currentColor"
         strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{paths}</svg>
  );
  const IconGrip   = () => Svg(<><circle cx="9" cy="6" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="9" cy="18" r="1"/><circle cx="15" cy="6" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="18" r="1"/></>);
  const IconPlus   = () => Svg(<path d="M12 5v14M5 12h14"/>);
  const IconPencil = () => Svg(<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>);
  const IconKebab  = () => Svg(<><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></>);

  /* ---- helpers ---- */

  function groupTree(cats) {
    const roots = cats.filter(c => c.parentId === null).sort((a, b) => a.sortOrder - b.sortOrder);
    return roots.map(r => ({
      ...r,
      children: cats.filter(c => c.parentId === r.id).sort((a, b) => a.sortOrder - b.sortOrder),
    }));
  }

  /* ---- Row ---- */

  function CategoryRow({ cat, onUpdate, onOpenIconPicker, iconPickerOpen, onCloseIconPicker, onKebabClick, draggable = true }) {
    const [editingName, setEditingName] = React.useState(false);
    const [draft, setDraft] = React.useState(cat.name);

    React.useEffect(() => { setDraft(cat.name); }, [cat.name]);

    const commitName = () => {
      const trimmed = (draft || '').trim();
      if (trimmed && trimmed !== cat.name) {
        onUpdate && onUpdate({ id: cat.id, patch: { name: trimmed } });
      } else {
        setDraft(cat.name);
      }
      setEditingName(false);
    };

    const handleNameKey = (e) => {
      if (e.key === 'Enter')       { e.preventDefault(); commitName(); }
      else if (e.key === 'Escape') { e.preventDefault(); setDraft(cat.name); setEditingName(false); }
    };

    return (
      <div className={`mgr-cat__row${!cat.isActive ? ' mgr-cat__row--inactive' : ''}`}
           data-cat-id={cat.id}>
        {draggable ? (
          <span className="mgr-cat__grip" aria-label="Sorrend változtatás"><IconGrip /></span>
        ) : null}

        <span style={{ position: 'relative' }}>
          <button type="button"
                  className={`mgr-cat__icon${iconPickerOpen ? ' is-active' : ''}`}
                  onClick={(e) => { e.stopPropagation(); onOpenIconPicker && onOpenIconPicker(cat.id); }}
                  aria-label="Ikon választása">
            {iconGlyph(cat.iconRef)}
          </button>
          {iconPickerOpen ? (
            <IconPicker
              style={{ top: '100%', left: 0, marginTop: 6 }}
              selected={cat.iconRef}
              onSelect={(key) => {
                onUpdate && onUpdate({ id: cat.id, patch: { iconRef: key } });
                onCloseIconPicker && onCloseIconPicker();
              }}
              onClose={onCloseIconPicker}
            />
          ) : null}
        </span>

        {editingName ? (
          <input
            className="mgr-cat__name-input"
            autoFocus
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
            onKeyDown={handleNameKey}
            onBlur={commitName}
            maxLength={100}
          />
        ) : (
          <span className="mgr-cat__name" onClick={() => setEditingName(true)}>
            {cat.name}
          </span>
        )}

        <span className="mgr-cat__count">{cat.ticketCount}</span>

        {!cat.isActive ? <span className="mgr-cat__inactive-tag">Inaktív</span> : null}

        <span className="mgr-cat__row-actions">
          <button type="button"
                  className={`mgr-cat__toggle${cat.isActive ? ' is-on' : ''}`}
                  onClick={() => onUpdate && onUpdate({ id: cat.id, patch: { isActive: !cat.isActive } })}
                  aria-label={cat.isActive ? 'Deaktiválás' : 'Aktiválás'}
                  aria-pressed={cat.isActive} />
          <button type="button"
                  className="u-btn u-btn--sm u-btn--ghost"
                  style={{ padding: 4 }}
                  onClick={() => setEditingName(true)}
                  aria-label="Átnevezés">
            <IconPencil />
          </button>
          <button type="button"
                  className="u-btn u-btn--sm u-btn--ghost"
                  style={{ padding: 4 }}
                  onClick={(e) => onKebabClick && onKebabClick(e, cat.id)}
                  aria-label="További akciók">
            <IconKebab />
          </button>
        </span>
      </div>
    );
  }

  /* ---- Root section ---- */

  function RootSection({
    root, onUpdate, onOpenIconPicker, iconPickerOpenForId, onCloseIconPicker, onAddChild, onKebabClick,
  }) {
    return (
      <section className="mgr-cat__group">
        <header className={`mgr-cat__root${!root.isActive ? ' mgr-cat__root--inactive' : ''}`}>
          <span className="mgr-cat__root-icon">{iconGlyph(root.iconRef)}</span>
          <span className="mgr-cat__root-name">{root.name}</span>
          <span className="mgr-cat__root-count">{root.ticketCount} ügy</span>
          {root.sourceCatalogId ? <span className="mgr-cat__root-tag">Default</span> : null}
          <span className="mgr-cat__root-actions">
            <button type="button"
                    className={`mgr-cat__toggle${root.isActive ? ' is-on' : ''}`}
                    onClick={() => onUpdate && onUpdate({ id: root.id, patch: { isActive: !root.isActive } })}
                    aria-label={root.isActive ? 'Deaktiválás' : 'Aktiválás'}
                    aria-pressed={root.isActive} />
            <button type="button"
                    className="u-btn u-btn--sm u-btn--secondary"
                    style={{ gap: 4 }}
                    onClick={() => onAddChild && onAddChild(root.id)}>
              <IconPlus /> alkategória
            </button>
          </span>
        </header>

        <div className="mgr-cat__children">
          {root.children.length === 0 ? (
            <div className="mgr-cat__empty">Még nincs alkategória.</div>
          ) : (
            root.children.map(c => (
              <CategoryRow
                key={c.id}
                cat={c}
                onUpdate={onUpdate}
                onOpenIconPicker={onOpenIconPicker}
                iconPickerOpen={iconPickerOpenForId === c.id}
                onCloseIconPicker={onCloseIconPicker}
                onKebabClick={onKebabClick}
              />
            ))
          )}
          <button type="button"
                  className="mgr-cat__add-row"
                  onClick={() => onAddChild && onAddChild(root.id)}>
            <IconPlus /> Új alkategória „{root.name}" alatt
          </button>
        </div>
      </section>
    );
  }

  /* ---- Root ---- */

  function CategoryTreeEditor({
    categories,
    onUpdate,
    onCreate,
    onReorder,
    onDelete,
    onOpenImport,
    showInactive = true,
    onToggleShowInactive,
  }) {
    const [iconPickerOpenForId, setIconPickerOpenForId] = React.useState(null);

    const filtered = showInactive ? categories : categories.filter(c => c.isActive);
    const tree = groupTree(filtered);

    const stats = {
      roots: tree.length,
      children: tree.reduce((s, r) => s + r.children.length, 0),
    };

    return (
      <div className="mgr-cat">
        <div className="mgr-cat__toolbar">
          <div>
            <h2 className="mgr-cat__toolbar-title">Kategóriák</h2>
            <div className="mgr-cat__toolbar-stats">
              {stats.roots} gyökér · {stats.children} alkategória
            </div>
          </div>
          <span className="mgr-cat__toolbar-spacer" />
          <label className="mgr-cat__toolbar-toggle">
            <input type="checkbox"
                   checked={showInactive}
                   onChange={(e) => onToggleShowInactive && onToggleShowInactive(e.target.checked)} />
            Inaktívak mutatása
          </label>
          <button type="button"
                  className="u-btn u-btn--sm u-btn--primary"
                  style={{ gap: 4 }}
                  onClick={onOpenImport}>
            <IconPlus /> Új gyökér
          </button>
        </div>

        {tree.length === 0 ? (
          <div style={{
            padding: '40px 16px',
            textAlign: 'center',
            color: 'var(--u-fg-3)',
            fontSize: 13,
          }}>
            <div style={{ marginBottom: 8, fontWeight: 600, color: 'var(--u-fg-2)' }}>
              Még nincs kategória.
            </div>
            <div>Az „Új gyökér" gombbal importálj egyet a default-katalógusból.</div>
          </div>
        ) : (
          tree.map(root => (
            <RootSection
              key={root.id}
              root={root}
              onUpdate={onUpdate}
              onAddChild={(pid) => onCreate && onCreate({ parentId: pid })}
              onOpenIconPicker={(id) => setIconPickerOpenForId(id)}
              iconPickerOpenForId={iconPickerOpenForId}
              onCloseIconPicker={() => setIconPickerOpenForId(null)}
              onKebabClick={() => {}}
            />
          ))
        )}
      </div>
    );
  }

  window.CategoryTreeEditor = CategoryTreeEditor;
})();