// Ticket Forensics · standalone page.
// Hosts the GanttForensics widget with full-page filters:
//   · Weeks (rolling window) · Team (single-select) · Developers (multi-select).
// Selecting a team scopes the developer dropdown to that team and drops any
// previously-selected devs who aren't on the new team.

function ForensicsPage({ navigate }) {
  const [weeks, setWeeks] = useState(DATA.DEFAULT_WEEKS);
  const [team, setTeam] = useState('all');
  const [devIds, setDevIds] = useState([]);

  const teams = useMemo(
    () => Array.from(new Set(DATA.engineers.map(e => e.team))).sort(),
    []
  );

  const scopedDevs = useMemo(
    () => team === 'all' ? DATA.engineers : DATA.engineers.filter(e => e.team === team),
    [team]
  );

  // When the team changes, drop any selected dev ids that aren't on this team.
  const onTeamChange = (next) => {
    setTeam(next);
    if (next !== 'all') {
      const allowed = new Set(DATA.engineers.filter(e => e.team === next).map(e => e.id));
      setDevIds(prev => prev.filter(id => allowed.has(id)));
    }
  };

  // Filtered ticket rows for the Gantt.
  const rows = useMemo(() => {
    return DATA.ganttRowsFor(weeks, 11).filter(t => {
      const dev = DATA.devById(t.assignee);
      if (team !== 'all' && dev?.team !== team) return false;
      if (devIds.length && !devIds.includes(t.assignee)) return false;
      return true;
    });
  }, [weeks, team, devIds]);

  const headerWindow = DATA.windowFor(weeks);
  const filtersActive = weeks !== DATA.DEFAULT_WEEKS || team !== 'all' || devIds.length > 0;
  const clearAll = () => { setWeeks(DATA.DEFAULT_WEEKS); setTeam('all'); setDevIds([]); };

  const teamsInView = new Set(rows.map(t => DATA.devById(t.assignee)?.team).filter(Boolean));
  const devsInView = new Set(rows.map(t => t.assignee));

  return (
    <div className="page page-fade">
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14 }}>
        <div>
          <h1 style={{ margin: 0, fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>Ticket forensics</h1>
          <div className="mono-caps" style={{ marginTop: 4 }}>{headerWindow.dateLabel} · end-to-end lifecycle</div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <span className="evidence-chip" title="theSitrep shows what happened · not what might happen.">
            <span className="ev-dot" />
            <span>Ground truth · observed only</span>
          </span>
        </div>
      </div>

      <div style={{
        display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
        marginBottom: 14, padding: '10px 12px',
        background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-md)',
      }}>
        <span className="mono-caps" style={{ fontSize: 10, color: 'var(--text-3)', marginRight: 4 }}>Filters</span>
        <WindowSizeChip value={weeks} onChange={setWeeks} />
        <TeamFilter teams={teams} value={team} onChange={onTeamChange} />
        <DevMultiSelect devs={scopedDevs} value={devIds} onChange={setDevIds} />
        {filtersActive && (
          <button
            onClick={clearAll}
            className="btn ghost"
            style={{ fontSize: 11, padding: '5px 10px' }}
            title="Reset to defaults"
          >
            <Icon name="x" size={11} /> Reset
          </button>
        )}
        <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--text-3)' }}>
          <span className="mono" style={{ color: 'var(--text-2)' }}>{rows.length}</span> ticket{rows.length === 1 ? '' : 's'} ·{' '}
          <span className="mono" style={{ color: 'var(--text-2)' }}>{teamsInView.size}</span> team{teamsInView.size === 1 ? '' : 's'} ·{' '}
          <span className="mono" style={{ color: 'var(--text-2)' }}>{devsInView.size}</span> developer{devsInView.size === 1 ? '' : 's'}
        </span>
      </div>

      {rows.length === 0 ? (
        <div className="gate-banner calm">
          <div className="gb-icon"><Icon name="search" size={14} /></div>
          <div style={{ flex: 1 }}>
            <div className="gb-text">No tickets match these filters.</div>
            <div className="gb-sub">Try a wider window or a different team / developer.</div>
          </div>
          <button onClick={clearAll} className="btn ghost" style={{ fontSize: 11 }}>
            Clear filters
          </button>
        </div>
      ) : (
        <GanttForensics navigate={navigate} rows={rows} />
      )}
    </div>
  );
}

window.ForensicsPage = ForensicsPage;