/* ops2-feed.jsx — Лента событий (Project Timeline / Activity Feed) для Ops Hub.
   Канон: TZ-LK/00-platform/01-activity-feed.md §4.4 (global feed).
   Единая хронология движения проектов с фильтрами по категориям, drill-down
   в проект и отдельной полосой «Требует разбора» для orchestration/SLA-блоков. */
(function () {
  const { Card, Badge, Button } = window.DesignSystem_9e0a09;
  const CardHead = window.CardHead;

  function FeedZone({ openProject }) {
    const O = window.OPS;
    const cats = O.ACT_CATEGORIES;
    const catMap = O.ACT_CAT;
    const [active, setActive] = React.useState(new Set());

    const toggle = (id) => {
      const s = new Set(active);
      if (s.has(id)) s.delete(id); else s.add(id);
      setActive(s);
    };

    const events = O.ACTIVITY.filter((e) => active.size === 0 || active.has(e.cat));
    const clarify = O.ACTIVITY.filter((e) => e.clarify);

    const open = (e) => { if (e.projId) openProject(e.projId); };

    const days = [];
    events.forEach((e) => {
      let g = days.find((d) => d.day === e.day);
      if (!g) { g = { day: e.day, items: [] }; days.push(g); }
      g.items.push(e);
    });

    return (
      <div className="ov ov-zone">
        <div className="feed-cat-bar zone-seg" role="tablist" aria-label="Категории ленты" style={{ gridColumn: '1 / -1' }}>
          <button
            type="button"
            role="tab"
            aria-selected={active.size === 0}
            className={'feed-cat-tab' + (active.size === 0 ? ' on' : '')}
            onClick={() => setActive(new Set())}
          >
            <span className="feed-cat-tab-l">Все</span>
            <span className="feed-cat-tab-n t-num">{O.ACTIVITY.length}</span>
          </button>
          {cats.map((c) =>
            <button
              key={c.id}
              type="button"
              role="tab"
              aria-selected={active.has(c.id)}
              className={'feed-cat-tab' + (active.has(c.id) ? ' on' : '')}
              onClick={() => toggle(c.id)}
            >
              <span className="feed-cat-dot" style={{ background: catMap[c.id].c }} aria-hidden="true" />
              <span className="feed-cat-tab-l">{catMap[c.id].label}</span>
            </button>
          )}
        </div>

        {clarify.length > 0 &&
          <section className="feed-clarify-zone" id="feed-clarify" style={{ gridColumn: '1 / -1' }} aria-labelledby="feed-clarify-title">
            <div className="feed-clarify-zone-head">
              <div className="feed-clarify-zone-copy">
                <h2 className="feed-clarify-zone-title" id="feed-clarify-title">Требует разбора</h2>
                <p className="feed-clarify-zone-sub">Оркестрация и SLA остановили цепочку — нужен ручной ввод</p>
              </div>
              <Badge tone="warning" dot>{clarify.length}</Badge>
            </div>
            <div className="feed-clarify-grid" role="list">
              {clarify.map((e) => (
                <button
                  key={e.id}
                  type="button"
                  className="feed-clarify-tile"
                  role="listitem"
                  onClick={() => open(e)}
                >
                  <div className="feed-clarify-tile-head">
                    <span className="feed-clarify-tile-obj">{e.object}</span>
                    <span className="feed-clarify-tile-action">{e.cta || 'Открыть'}</span>
                  </div>
                  <span className="feed-clarify-tile-title">{e.title}</span>
                  {e.body && <span className="feed-clarify-tile-body">{e.body}</span>}
                  {(e.chips || []).length > 0 &&
                    <span className="feed-clarify-tile-chips" aria-hidden="true">
                      {(e.chips || []).map((ch, j) => <Badge key={j} tone={ch.tone} dot>{ch.label}</Badge>)}
                    </span>}
                </button>
              ))}
            </div>
          </section>
        }

        <Card variant="glass" padding="lg" style={{ gridColumn: '1 / -1' }}>
          <CardHead
            title="Хронология событий"
            sub={active.size === 0 ? `Все категории · ${events.length} событий` : `Фильтр активен · ${events.length} событий`}
            action={<Badge tone="neutral" dot>{days.length} дн</Badge>} />
          <div className="ov-inset feed-timeline-inset">
        <div className="feed-timeline">
          {days.map((g) =>
            <div key={g.day} className="feed-day-group">
              <div className="feed-day"><span className="feed-day-l">{g.day}</span><span className="feed-day-line" /></div>
              {g.items.map((e, idx) => {
                const cat = catMap[e.cat];
                const Row = e.projId ? 'button' : 'div';
                const last = idx === g.items.length - 1;
                return (
                  <Row
                    key={e.id}
                    className="feed-row"
                    {...(e.projId ? { type: 'button', onClick: () => open(e) } : {})}
                  >
                    <div className="feed-rail" aria-hidden="true">
                      <span className="feed-ic" style={{ background: `color-mix(in srgb, ${cat.c} 14%, var(--card))`, color: cat.c }}>
                        <Ic n={cat.icon} s={17} sw={2} />
                      </span>
                      {!last && <span className="feed-stem" />}
                    </div>
                    <div className="feed-body">
                      <div className="feed-top">
                        <span className="feed-cat">{cat.label}</span>
                        <span className="feed-time">{e.time}</span>
                      </div>
                      <div className="feed-title">{e.title}</div>
                      {e.body && <div className="feed-detail">{e.body}</div>}
                      <div className="feed-meta">
                        <span className="feed-actor">
                          <span className="mini-ava" style={{ background: e.actor.c, width: 20, height: 20, fontSize: 8.5 }}>{e.actor.ava}</span>
                          <b>{e.actor.name}</b>
                        </span>
                        {e.role && <span className="feed-role">{e.role}</span>}
                        <span className="feed-obj"><Ic n="folder-kanban" s={12} c="var(--text-tertiary)" />{e.object}</span>
                        {(e.chips || []).map((ch, j) => <Badge key={j} tone={ch.tone} dot>{ch.label}</Badge>)}
                      </div>
                    </div>
                    {e.projId &&
                      <span className="feed-open" aria-hidden="true">
                        <Ic n="chevron-right" s={16} c="currentColor" />
                      </span>}
                  </Row>);
              })}
            </div>
          )}
        </div>
          </div>
        </Card>

        {events.length === 0 &&
          <div className="feed-empty">
            <p>Нет событий по выбранным категориям</p>
            <Button variant="outline" size="sm" onClick={() => setActive(new Set())}>Сбросить фильтры</Button>
          </div>}
      </div>);
  }

  window.FeedZone = FeedZone;
})();