/**
 * Redmine Ticket Browser
 *
 * Split view: tree-as-table on the left (roots = configured root
 * tracker + virtual "Orphan" root), editor pane on the right. All reads
 * hit the local mirror; saves go through ``updateRedmineTicketApi``
 * which updates Redmine and then refreshes the mirror.
 *
 * Filters are applied client-side because the mirror already fits in
 * memory (2-20k tickets is fine for a sub-200ms filter pass).
 */

import React, {
  useCallback,
  useDeferredValue,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';

import { useApiRequest } from '../../../hooks/useApi';
import { useInstanceId } from '../../../hooks/useCurrentInstance';
import { useLanguage } from '../../../providers/language/LanguageContext';
import {
  RedmineConfigDto,
  RedmineFieldSchema,
  RedmineTicket,
  getRedmineConfigApi,
  getRedmineSchemaApi,
  listRedmineTicketsApi,
} from '../../../api/redmineApi';
import { PeriodPicker, PeriodValue } from '../../../components/PeriodPicker';

import {
  Forest,
  FlatRow,
  ORPHAN_ROOT_ID,
  buildForest,
  collectAllIds,
  flattenForest,
} from './redmineTreeLogic';
import { getTrackerStyle, sortByTrackerOrder } from './redmineTrackerColor';
import RedmineTicketEditor from './RedmineTicketEditor';

import styles from './RedmineViews.module.css';

// ============================================================================
// Relation type options -- Redmine's fixed vocabulary plus our synthetic
// "parent" edge (inherited from ``parent_id``).
// ============================================================================
const RELATION_TYPE_OPTIONS: Array<{ value: string; label: string }> = [
  { value: 'parent', label: 'parent_id' },
  { value: 'relates', label: 'relates' },
  { value: 'duplicates', label: 'duplicates' },
  { value: 'duplicated', label: 'duplicated' },
  { value: 'blocks', label: 'blocks' },
  { value: 'blocked', label: 'blocked' },
  { value: 'precedes', label: 'precedes' },
  { value: 'follows', label: 'follows' },
  { value: 'copied_to', label: 'copied_to' },
  { value: 'copied_from', label: 'copied_from' },
];

// ============================================================================
// Closed-state lookup -- the mirror's ``isClosed`` field can be stale or
// missing when the schema cache wasn't yet hydrated at sync time. We trust
// the live schema (``schema.statuses[*].isClosed``) as the source of truth
// and fall back to the ticket's own flag.
// ============================================================================
const _isTicketClosed = (
  ticket: RedmineTicket,
  schemaStatusClosedById: Map<number, boolean>,
): boolean => {
  if (ticket.statusId != null && schemaStatusClosedById.has(ticket.statusId)) {
    return schemaStatusClosedById.get(ticket.statusId) === true;
  }
  return !!ticket.isClosed;
};

export const RedmineBrowserView: React.FC = () => {
  const { t } = useLanguage();
  const { request } = useApiRequest();
  const instanceId = useInstanceId();

  const [config, setConfig] = useState<RedmineConfigDto | null>(null);
  const [schema, setSchema] = useState<RedmineFieldSchema | null>(null);
  const [tickets, setTickets] = useState<RedmineTicket[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Filters
  const [period, setPeriod] = useState<PeriodValue | null>(null);
  // Tracker filter is *subtractive*: the set holds tracker ids that are
  // currently SHOWN. ``null`` means "uninitialised" -- once the schema is
  // loaded we seed the set with all tracker ids so every chip starts active.
  // Clicking a chip removes it from the set -> tickets of that tracker
  // disappear from the list.
  const [selectedTrackerIds, setSelectedTrackerIds] = useState<Set<number> | null>(null);
  const [selectedAssigneeIds, setSelectedAssigneeIds] = useState<Set<number>>(new Set());
  const [selectedRelTypes, setSelectedRelTypes] = useState<Set<string>>(
    new Set(RELATION_TYPE_OPTIONS.map(r => r.value)),
  );
  const [statusFilter, setStatusFilter] = useState<'*' | 'open' | 'closed'>('*');
  // Sprint = Redmine "fixed_version". Empty set => no filter; the synthetic
  // value ``__none__`` matches tickets with no sprint assigned.
  const [selectedSprints, setSelectedSprints] = useState<Set<string>>(new Set());

  // UI state
  const [expanded, setExpanded] = useState<Set<number>>(new Set());
  const [selectedId, setSelectedId] = useState<number | null>(null);

  const rootTrackerId = schema?.rootTrackerId ?? null;

  // Seed the tracker filter once the schema is available: every tracker
  // starts SELECTED so the user sees everything by default; clicking a chip
  // removes that tracker from the visible set.
  useEffect(() => {
    if (selectedTrackerIds == null && schema) {
      setSelectedTrackerIds(new Set(schema.trackers.map(tr => tr.id)));
    }
  }, [schema, selectedTrackerIds]);

  // Map statusId -> isClosed, taken from the live schema. Used by the status
  // filter so it works even if the mirror's per-ticket ``isClosed`` is stale.
  const schemaStatusClosedById = useMemo(() => {
    const m = new Map<number, boolean>();
    if (schema) {
      for (const s of schema.statuses) {
        if (typeof s.isClosed === 'boolean') m.set(s.id, s.isClosed);
      }
    }
    return m;
  }, [schema]);

  // Distinct sprints (fixed_version) seen across all loaded tickets. Drives
  // the sprint filter dropdown. Sorted alphabetically for stable UI.
  const sprintOptions = useMemo(() => {
    const m = new Map<string, string>();
    let hasNone = false;
    for (const tk of tickets) {
      const name = tk.fixedVersionName?.trim();
      if (name) {
        m.set(name, name);
      } else {
        hasNone = true;
      }
    }
    const opts = Array.from(m.entries())
      .map(([value, label]) => ({ value, label }))
      .sort((a, b) => a.label.localeCompare(b.label));
    if (hasNone) opts.unshift({ value: '__none__', label: t('(ohne Sprint)') });
    return opts;
  }, [tickets, t]);

  // Load config + schema once.
  const _loadMeta = useCallback(async () => {
    if (!instanceId) return;
    try {
      const [c, s] = await Promise.all([
        getRedmineConfigApi(request, instanceId),
        getRedmineSchemaApi(request, instanceId),
      ]);
      setConfig(c);
      setSchema(s);
    } catch (e: any) {
      setError(e?.response?.data?.detail || e?.message || t('Konfiguration laden fehlgeschlagen'));
    }
  }, [request, instanceId, t]);

  // Load tickets from mirror whenever the period window changes (backend can
  // pre-filter by updatedOn to shrink the payload).
  const _loadTickets = useCallback(async () => {
    if (!instanceId) return;
    setLoading(true);
    setError(null);
    try {
      const result = await listRedmineTicketsApi(request, instanceId, {
        status: '*',
        dateFrom: period?.fromDate,
        dateTo: period?.toDate,
      });
      setTickets(result);
    } catch (e: any) {
      setError(e?.response?.data?.detail || e?.message || t('Tickets laden fehlgeschlagen'));
      setTickets([]);
    } finally {
      setLoading(false);
    }
  }, [request, instanceId, period, t]);

  useEffect(() => { _loadMeta(); }, [_loadMeta]);
  useEffect(() => { _loadTickets(); }, [_loadTickets]);

  // Client-side filter pass (tracker / assignee / status). Root-tracker
  // tickets are always kept so the tree has roots even if their own tracker
  // is deselected -- otherwise the whole forest collapses.
  // ``deferredFilters`` lets React keep the filter chips snappy while the
  // potentially expensive tree rebuild happens in the background. The
  // chips update immediately (urgent state) but the tree picks up the new
  // values one tick later, which removes the "click feels frozen" lag.
  const deferredSelectedTrackerIds = useDeferredValue(selectedTrackerIds);
  const deferredSelectedAssigneeIds = useDeferredValue(selectedAssigneeIds);
  const deferredSelectedRelTypes = useDeferredValue(selectedRelTypes);
  const deferredStatusFilter = useDeferredValue(statusFilter);
  const deferredSelectedSprints = useDeferredValue(selectedSprints);

  const filteredTickets = useMemo(() => {
    const trackerSet = deferredSelectedTrackerIds;
    const assigneeSet = deferredSelectedAssigneeIds;
    const sprintSet = deferredSelectedSprints;
    const status = deferredStatusFilter;
    return tickets.filter(ticket => {
      const isRoot = rootTrackerId != null && ticket.trackerId === rootTrackerId;
      if (!isRoot && trackerSet != null && ticket.trackerId != null) {
        if (!trackerSet.has(ticket.trackerId)) return false;
      }
      if (assigneeSet.size > 0) {
        if (ticket.assignedToId == null || !assigneeSet.has(ticket.assignedToId)) return false;
      }
      if (status !== '*') {
        const closed = _isTicketClosed(ticket, schemaStatusClosedById);
        if (status === 'open' && closed) return false;
        if (status === 'closed' && !closed) return false;
      }
      if (sprintSet.size > 0) {
        const sprintKey = ticket.fixedVersionName?.trim() || '__none__';
        if (!sprintSet.has(sprintKey)) return false;
      }
      return true;
    });
  }, [tickets, rootTrackerId, deferredSelectedTrackerIds, deferredSelectedAssigneeIds, deferredStatusFilter, deferredSelectedSprints, schemaStatusClosedById]);

  // Convert the rel-type set to an array once per change instead of on every
  // ``buildForest`` call (Array.from() in the deps would re-run the memo
  // every render because the array identity is fresh each time).
  const allowedRelTypesArr = useMemo(
    () => Array.from(deferredSelectedRelTypes),
    [deferredSelectedRelTypes],
  );

  const forest: Forest = useMemo(() => {
    return buildForest(filteredTickets, {
      rootTrackerId,
      allowedRelTypes: allowedRelTypesArr,
    });
  }, [filteredTickets, rootTrackerId, allowedRelTypesArr]);

  const flatRows: FlatRow[] = useMemo(
    () => flattenForest(forest.trees, expanded),
    [forest.trees, expanded],
  );

  const ticketsById = useMemo(() => {
    const m = new Map<number, RedmineTicket>();
    for (const ticket of tickets) m.set(ticket.id, ticket);
    return m;
  }, [tickets]);

  // One-shot initial expansion: the very first time we render a non-empty
  // forest, expand the root nodes so the user sees the overview. After that
  // the user owns the expand state -- collapsing all must STAY collapsed.
  const _didInitExpand = useRef(false);
  useEffect(() => {
    if (!_didInitExpand.current && forest.trees.length > 0) {
      _didInitExpand.current = true;
      setExpanded(new Set(forest.trees.map(tr => tr.id)));
    }
  }, [forest.trees]);

  const _toggleExpand = useCallback((id: number) => {
    setExpanded(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  }, []);

  const _expandAll = useCallback(() => {
    setExpanded(new Set(collectAllIds(forest.trees)));
  }, [forest.trees]);

  const _collapseAll = useCallback(() => {
    setExpanded(new Set());
  }, []);

  const _resetFilters = useCallback(() => {
    setPeriod(null);
    // "Alle Tracker sichtbar" entspricht dem initialen, voll bestueckten Set.
    setSelectedTrackerIds(schema ? new Set(schema.trackers.map(tr => tr.id)) : null);
    setSelectedAssigneeIds(new Set());
    setSelectedRelTypes(new Set(RELATION_TYPE_OPTIONS.map(r => r.value)));
    setStatusFilter('*');
    setSelectedSprints(new Set());
  }, [schema]);

  const _toggleSprint = useCallback((value: string) => {
    setSelectedSprints(prev => {
      const next = new Set(prev);
      if (next.has(value)) next.delete(value); else next.add(value);
      return next;
    });
  }, []);

  const _toggleTracker = useCallback((id: number) => {
    setSelectedTrackerIds(prev => {
      // ``prev`` is null only before schema loads -- the chip wouldn't be
      // clickable in that state, but stay defensive.
      const next = new Set(prev ?? []);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  }, []);

  const _toggleRelType = useCallback((rt: string) => {
    setSelectedRelTypes(prev => {
      const next = new Set(prev);
      if (next.has(rt)) next.delete(rt); else next.add(rt);
      return next;
    });
  }, []);

  const _handleTicketSaved = useCallback((updated: RedmineTicket) => {
    setTickets(prev => prev.map(x => (x.id === updated.id ? updated : x)));
  }, []);

  if (!instanceId) {
    return <div className={styles.placeholder}>{t('Keine Feature-Instanz ausgewaehlt')}</div>;
  }

  return (
    <div className={styles.browserPage}>
      <div className={styles.browserHeader}>
        <div>
          <h2 className={styles.heading} style={{ margin: 0 }}>{t('Redmine -- Ticket-Browser')}</h2>
          <p className={styles.subheading} style={{ margin: 0 }}>
            {t('Baum aus dem lokalen Mirror. Roots: {name}. Tickets ohne Verbindung landen unter "Orphan User Story".', {
              name: schema?.rootTrackerName || config?.rootTrackerName || '—',
            })}
          </p>
        </div>
        <div style={{ fontSize: '0.8rem', color: 'var(--text-secondary, #718096)' }}>
          {t('{count} von {total} Tickets sichtbar', {
            count: filteredTickets.length,
            total: tickets.length,
          })}
        </div>
      </div>

      {error && <div className={styles.alertErr}>{error}</div>}

      <div className={styles.browserFilters}>
        <div className={styles.filterGroup}>
          <label>{t('Zeitraum (letzte Aenderung)')}</label>
          <PeriodPicker
            value={period}
            onChange={(next) => setPeriod(next)}
            direction="past"
            defaultPreset={{ kind: 'lastQuarter' }}
            enabledPresets={[
              'thisMonth', 'lastMonth', 'thisQuarter', 'lastQuarter',
              'ytd', 'lastYear', 'last12Months', 'lastN', 'custom',
            ]}
            placeholder={t('Alle Zeiten')}
          />
        </div>

        <div className={styles.filterGroup}>
          <label>Status</label>
          <select
            className={styles.select}
            value={statusFilter}
            onChange={e => setStatusFilter(e.target.value as any)}
          >
            <option value="*">{t('Alle')}</option>
            <option value="open">{t('Nur offen')}</option>
            <option value="closed">{t('Nur geschlossen')}</option>
          </select>
        </div>

        {schema && schema.trackers.length > 0 && (
          <div className={styles.filterGroup} style={{ minWidth: 240 }}>
            <label>{t('Tracker (Klick blendet aus -- Root bleibt immer aktiv)')}</label>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {sortByTrackerOrder(schema.trackers, tr => tr.name).map(tr => {
                const isRoot = tr.id === rootTrackerId;
                // Active iff in the visible set (or root). selectedTrackerIds
                // is null only during the brief window before the schema seed
                // effect runs -- treat as "all visible".
                const active = isRoot || selectedTrackerIds == null || selectedTrackerIds.has(tr.id);
                const sty = getTrackerStyle(tr.name);
                return (
                  <button
                    key={tr.id}
                    type="button"
                    onClick={() => !isRoot && _toggleTracker(tr.id)}
                    style={{
                      padding: '2px 9px',
                      borderRadius: 999,
                      border: `1px solid ${active ? sty.border : 'var(--border-color, #e2e8f0)'}`,
                      background: active ? sty.bg : '#fff',
                      color: active ? sty.fg : 'var(--text-secondary, #4a5568)',
                      fontSize: '0.75rem',
                      cursor: isRoot ? 'default' : 'pointer',
                      fontFamily: 'inherit',
                      opacity: isRoot ? 0.9 : 1,
                      textDecoration: !active ? 'line-through' : 'none',
                    }}
                    title={
                      isRoot
                        ? t('Root-Tracker -- immer aktiv')
                        : active
                          ? t('Klicken, um {name} auszublenden', { name: tr.name })
                          : t('Klicken, um {name} wieder anzuzeigen', { name: tr.name })
                    }
                  >
                    {isRoot ? `⚓ ${tr.name}` : tr.name}
                  </button>
                );
              })}
            </div>
          </div>
        )}

        {schema && schema.users.length > 0 && (
          <div className={styles.filterGroup} style={{ minWidth: 220 }}>
            <label>{t('Zuweisung')}</label>
            <select
              className={styles.select}
              multiple
              size={Math.min(4, schema.users.length)}
              value={Array.from(selectedAssigneeIds).map(String)}
              onChange={e => {
                const ids = Array.from(e.target.selectedOptions).map(o => Number(o.value));
                setSelectedAssigneeIds(new Set(ids));
              }}
              style={{ height: 'auto' }}
            >
              {schema.users.map(u => (
                <option key={u.id} value={u.id}>{u.name}</option>
              ))}
            </select>
          </div>
        )}

        {sprintOptions.length > 0 && (
          <div className={styles.filterGroup} style={{ minWidth: 220 }}>
            <label>{t('Sprint (Zielversion)')}</label>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, maxHeight: 88, overflow: 'auto' }}>
              {sprintOptions.map(sp => {
                const active = selectedSprints.has(sp.value);
                return (
                  <button
                    key={sp.value}
                    type="button"
                    onClick={() => _toggleSprint(sp.value)}
                    style={{
                      padding: '2px 8px',
                      borderRadius: 4,
                      border: `1px solid ${active ? '#4A6FA5' : 'var(--border-color, #e2e8f0)'}`,
                      background: active ? '#4A6FA5' : '#fff',
                      color: active ? '#fff' : 'var(--text-secondary, #4a5568)',
                      fontSize: '0.72rem',
                      cursor: 'pointer',
                      fontFamily: 'inherit',
                    }}
                    title={sp.label}
                  >
                    {sp.label}
                  </button>
                );
              })}
            </div>
            {selectedSprints.size === 0 && (
              <span style={{ fontSize: '0.7rem', color: 'var(--text-secondary, #718096)' }}>
                {t('keine Auswahl = alle Sprints')}
              </span>
            )}
          </div>
        )}

        <div className={styles.filterGroup} style={{ minWidth: 260 }}>
          <label>{t('Beziehungsarten')}</label>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
            {RELATION_TYPE_OPTIONS.map(rt => {
              const active = selectedRelTypes.has(rt.value);
              return (
                <button
                  key={rt.value}
                  type="button"
                  onClick={() => _toggleRelType(rt.value)}
                  title={t('Beziehungstyp ein-/ausschalten -- nur aktive Typen werden im Baum verfolgt')}
                  style={{
                    padding: '2px 8px',
                    borderRadius: 4,
                    border: `1px solid ${active ? '#4A6FA5' : 'var(--border-color, #e2e8f0)'}`,
                    background: active ? '#4A6FA5' : '#fff',
                    color: active ? '#fff' : 'var(--text-secondary, #4a5568)',
                    fontSize: '0.72rem',
                    cursor: 'pointer',
                    fontFamily: 'inherit',
                  }}
                >
                  {rt.label}
                </button>
              );
            })}
          </div>
        </div>

        <div style={{ flex: 1 }} />

        <button className={styles.btnSecondary} onClick={_resetFilters}>
          {t('Filter zuruecksetzen')}
        </button>
      </div>

      <div className={styles.browserBody}>
        {/* Left: tree */}
        <div className={styles.browserTreeContainer}>
          <div className={styles.browserToolbar}>
            <span>
              {t('{rows} Zeilen sichtbar -- {orphans} Orphan-Tickets', {
                rows: flatRows.length,
                orphans: forest.orphanCount,
              })}
            </span>
            <div style={{ display: 'flex', gap: '0.25rem' }}>
              <button className={styles.linkBtn} onClick={_expandAll} disabled={flatRows.length === 0}>
                {t('Alle ausklappen')}
              </button>
              <button className={styles.linkBtn} onClick={_collapseAll} disabled={flatRows.length === 0}>
                {t('Einklappen')}
              </button>
            </div>
          </div>
          <div className={styles.treeScroll}>
            {loading ? (
              <div className={styles.loading}>{t('Baum wird aufgebaut ...')}</div>
            ) : flatRows.length === 0 ? (
              <div className={styles.placeholder}>
                {t('Keine Tickets sichtbar. Pruefe Filter oder fuehre einen Sync auf der Einstellungen-Seite aus.')}
              </div>
            ) : (
              <div className={styles.treeGrid}>
                <div className={styles.treeHeader}>
                  <div>{t('Ticket')}</div>
                  <div>Status</div>
                  <div>{t('Prio')}</div>
                  <div>{t('Zuweisung')}</div>
                  <div>{t('Geaendert')}</div>
                  <div>{t('Beziehung')}</div>
                </div>
                {flatRows.map(row => (
                  <TreeRow
                    key={row.node.id}
                    row={row}
                    ticket={ticketsById.get(row.node.id) || null}
                    selected={selectedId === row.node.id}
                    expanded={expanded.has(row.node.id)}
                    onToggle={_toggleExpand}
                    onSelect={setSelectedId}
                    rootTrackerId={rootTrackerId}
                    schemaStatusClosedById={schemaStatusClosedById}
                  />
                ))}
              </div>
            )}
          </div>
        </div>

        {/* Right: editor */}
        <div className={styles.browserEditorContainer}>
          {selectedId == null ? (
            <div className={styles.browserToolbar}>{t('Ticket links auswaehlen')}</div>
          ) : selectedId === ORPHAN_ROOT_ID ? (
            <div className={styles.browserToolbar}>
              {t('Virtueller "Orphan User Story"-Knoten -- enthaelt {count} Tickets ohne Verbindung.', {
                count: forest.orphanCount,
              })}
            </div>
          ) : (
            <RedmineTicketEditor
              instanceId={instanceId}
              ticketId={selectedId}
              schema={schema}
              baseUrl={config?.baseUrl || ''}
              onSaved={_handleTicketSaved}
            />
          )}
        </div>
      </div>
    </div>
  );
};

// ============================================================================
// TreeRow -- a single grid row, handling its own indent painting.
// ============================================================================

interface TreeRowProps {
  row: FlatRow;
  ticket: RedmineTicket | null;
  selected: boolean;
  expanded: boolean;
  onToggle: (id: number) => void;
  onSelect: (id: number) => void;
  rootTrackerId: number | null;
  schemaStatusClosedById: Map<number, boolean>;
}

const _TreeRowImpl: React.FC<TreeRowProps> = ({
  row, ticket, selected, expanded, onToggle, onSelect, rootTrackerId, schemaStatusClosedById,
}) => {
  const { node, depth, indentLines, hasChildren } = row;
  const isOrphanRoot = node.id === ORPHAN_ROOT_ID;
  const isRootTracker = !isOrphanRoot && ticket?.trackerId === rootTrackerId;
  const isClosed = ticket ? _isTicketClosed(ticket, schemaStatusClosedById) : false;

  const rowClass = [
    styles.treeRow,
    selected ? styles.selected : '',
    isOrphanRoot ? styles.orphan : '',
  ].filter(Boolean).join(' ');

  const _handleToggle = (e: React.MouseEvent) => {
    e.stopPropagation();
    onToggle(node.id);
  };

  const _handleSelect = () => onSelect(node.id);

  return (
    <div className={rowClass} onClick={_handleSelect}>
      <div className={styles.treeCell}>
        {Array.from({ length: Math.max(0, depth - 1) }).map((_, i) => (
          <span
            key={i}
            className={`${styles.indent}${indentLines[i] ? ` ${styles.line ?? 'line'}` : ''}`}
          />
        ))}
        {depth > 0 && (
          <span className={`${styles.indentElbow}${row.isLast ? '' : ` ${styles.mid ?? 'mid'}`}`}>
            <span className={styles.elbowBar} />
          </span>
        )}
        {hasChildren ? (
          <button className={styles.treeToggle} onClick={_handleToggle} title={expanded ? 'Einklappen' : 'Ausklappen'}>
            {expanded ? '▾' : '▸'}
          </button>
        ) : (
          <span className={styles.treeTogglePlaceholder} />
        )}
        <span
          className={`${styles.trackerPill} ${isOrphanRoot ? styles.orphanPill : ''}`}
          style={
            !isOrphanRoot && ticket?.trackerName
              ? (() => {
                  const sty = getTrackerStyle(ticket.trackerName);
                  return {
                    background: sty.bg,
                    color: sty.fg,
                    border: `1px solid ${sty.border}`,
                  };
                })()
              : undefined
          }
        >
          {isOrphanRoot ? 'Orphan' : (ticket?.trackerName || '—')}
        </span>
        <span className={styles.ticketId}>
          {isOrphanRoot ? '—' : `#${ticket?.id}`}
        </span>
        <span className={styles.ticketSubject} title={isOrphanRoot ? '' : (ticket?.subject || '')}>
          {isOrphanRoot
            ? `Tickets ohne Verbindung zu einer User Story (${node.children.length})`
            : (ticket?.subject || '(ohne Titel)')}
        </span>
      </div>
      <div>
        {isOrphanRoot ? <span className={styles.muted}>—</span>
          : ticket?.statusName
            ? <span className={`${styles.statusPill}${isClosed ? ` ${styles.closed ?? 'closed'}` : ''}`}>{ticket.statusName}</span>
            : <span className={styles.muted}>—</span>}
      </div>
      <div>{isOrphanRoot ? <span className={styles.muted}>—</span> : (ticket?.priorityName || '—')}</div>
      <div>{isOrphanRoot ? <span className={styles.muted}>—</span> : (ticket?.assignedToName || <span className={styles.muted}>—</span>)}</div>
      <div style={{ fontVariantNumeric: 'tabular-nums' }}>
        {isOrphanRoot ? '' : (ticket?.updatedOn ? ticket.updatedOn.slice(0, 10) : '')}
      </div>
      <div>
        {isOrphanRoot
          ? <span className={styles.relBadge}>virtuell</span>
          : isRootTracker && depth === 0
            ? <span className={`${styles.relBadge} ${styles.root ?? 'root'}`}>Root</span>
            : node.relType
              ? <span className={styles.relBadge}>{node.dir === 'in' ? '←' : '→'} {node.relType}</span>
              : <span className={styles.muted}>—</span>}
      </div>
    </div>
  );
};

// Custom equality: skip re-rendering rows whose visible inputs are identical.
// ``row`` and ``ticket`` references are stable across re-renders unless the
// underlying tree was rebuilt or the ticket itself changed -- much cheaper
// than re-painting 2k DOM nodes on every filter chip click.
const TreeRow = React.memo(_TreeRowImpl, (prev, next) => {
  return (
    prev.row === next.row
    && prev.ticket === next.ticket
    && prev.selected === next.selected
    && prev.expanded === next.expanded
    && prev.onToggle === next.onToggle
    && prev.onSelect === next.onSelect
    && prev.rootTrackerId === next.rootTrackerId
    && prev.schemaStatusClosedById === next.schemaStatusClosedById
  );
});

export default RedmineBrowserView;