import * as React from 'react';
import type { WebPartContext } from '@microsoft/sp-webpart-base';
import {
  ApprovalQueueKind,
  filterPendingByQuery,
  getApprovalQueue,
  getApprovalQueueIndex,
  getLinkedTypes,
  getOwnRequests,
  getOwnRequestsByStatus,
  hydrateDecisionComments,
  hydratePendingAuthors,
  searchOwnRequests,
} from './myRequests.service';
import { IMyRequest } from './models/IMyRequest';
import { DataTable, IDataTableColumn } from '@tnsu/ui-kit';
import { REQUEST_STATUS, REQUEST_STATUS_CHOICES, IRequestType, StatusBadge } from '../../shared/approval';
import { onRequestsChanged } from '../../shared/requestEvents';
import { perfScope } from '../../shared/perfTrace';
import { useRoutedQuery } from '../../shared/usePersistedQuery';
import { IPage, pageKey, pageSignature, readPage, writePage } from './pageCache';
import { Pager } from './Pager';
import styles from './RequestsTableView.module.scss';

const PAGE_SIZE = 20;

// Автообновление открытых таблиц: раз в 10 минут перечитываем данные, чтобы
// вкладка, оставленная открытой надолго, не показывала устаревший список.
// Обновление фоновое — строки с экрана не пропадают и перерисовываются, только
// если данные реально изменились (см. pageSignature).
const AUTO_REFRESH_MS = 10 * 60 * 1000;


/**
 * Что именно показывает таблица. Один компонент обслуживает все списки заявок
 * портала, а различаются они только источником строк и набором колонок:
 *
 *   'approvals' | 'execution'                  — очереди действий (из строк маршрута);
 *   'rework'                                   — свои заявки, возвращённые на доработку;
 *   'own:created'                              — свои заявки (+ фильтр по статусу);
 *   'own:approved'|'own:rejected'|'own:executed' — история своих решений.
 */
export type ListView =
  | 'approvals'
  | 'execution'
  | 'rework'
  | 'own:created'
  | 'own:approved'
  | 'own:rejected'
  | 'own:executed';

// Представления, которые строятся на строках маршрута пользователя, и их очередь
// в сервисе. Всё, чего здесь нет ('rework'/'own:created'), читается из списка
// данных по автору.
const QUEUE_BY_VIEW: { [key: string]: ApprovalQueueKind } = {
  approvals: 'approvals',
  execution: 'execution',
  'own:approved': 'approved',
  'own:rejected': 'rejected',
  'own:executed': 'executed',
};

const HEADINGS: Record<ListView, string> = {
  approvals: 'Ждут вашего согласования',
  execution: 'Ждут вашего исполнения',
  rework: 'Возвращены вам на доработку',
  'own:created': 'Инициированные мной',
  'own:approved': 'Согласованные мной',
  'own:rejected': 'Отклонённые мной',
  'own:executed': 'Выполненные мной',
};

const EMPTY_TEXTS: Record<ListView, string> = {
  approvals: 'Нет заявок, ждущих вашего согласования.',
  execution: 'Нет заявок, ждущих вашего исполнения.',
  rework: 'Нет заявок, возвращённых вам на доработку.',
  'own:created': 'Вы ещё не создавали заявок.',
  'own:approved': 'Вы ещё ничего не согласовали.',
  'own:rejected': 'Вы ещё ничего не отклоняли.',
  'own:executed': 'Вы ещё ничего не выполнили.',
};

// Цвет пункта в выпадающем списке фильтра — то же сопоставление статус→цвет,
// что в StatusBadge (VARIANT), только цвет текста, а не бейдж целиком: внутри
// нативного <option> нельзя отрендерить компонент, а background-color на нём
// браузеры показывают ненадёжно (в отличие от color). Если сопоставление там
// поменяется — поправить и здесь, второй раз найти дублирование негде.
function statusOptionClassName(status: string): string {
  switch (status) {
    case REQUEST_STATUS.onApproval:
    case REQUEST_STATUS.onExecution:
      return styles.optionOnApproval;
    case REQUEST_STATUS.approved:
    case REQUEST_STATUS.executed:
      return styles.optionApproved;
    case REQUEST_STATUS.rejected:
      return styles.optionRejected;
    case REQUEST_STATUS.returned:
      return styles.optionReturned;
    case REQUEST_STATUS.execution:
      return styles.optionExecution;
    case REQUEST_STATUS.closed:
      return styles.optionClosed;
    default:
      return styles.optionDraft;
  }
}

// Колонки: «Автор» нужен там, где заявка чужая; «Статус» — где он не следует из
// самого раздела. В истории решений важно и то, и другое: заявка чужая, а её
// текущий статус мог уйти дальше вашего решения.
//
// 'rework' — свои заявки (автор не нужен) И все с одним статусом «Возвращена на
// доработку», раз именно по нему раздел и отобран (см. getOwnRequestsByStatus):
// колонка из одинаковых плашек ничего не сообщает, только шумит. Та же логика,
// что у очередей согласования/исполнения.
//
// 'own:created' — статус нужен, только пока показаны ВСЕ заявки. Стоит выбрать
// его в фильтре, и колонка вырождается в тот же столбец одинаковых плашек,
// поэтому она зависит не от одного вида, а ещё и от фильтра.
//
// Статус решения, ОБЩИЙ для всех строк раздела, — если он есть, показывать его
// колонкой незачем (столбец одинаковых плашек), зато полезен комментарий
// согласующего: почему вернули или почему отклонили. Именно за этим в такие
// списки и заходят.
function decisionStatusFor(view: ListView, statusFilter: string): string | undefined {
  if (view === 'rework') return REQUEST_STATUS.returned;
  if (view === 'own:rejected') return REQUEST_STATUS.rejected;
  if (
    view === 'own:created' &&
    (statusFilter === REQUEST_STATUS.returned || statusFilter === REQUEST_STATUS.rejected)
  ) {
    return statusFilter;
  }
  return undefined;
}

interface ITableColumns {
  author: boolean;
  status: boolean;
  /** Заголовок колонки с комментарием; undefined — колонки нет. */
  commentLabel?: string;
}

function columnsFor(view: ListView, statusFilter: string): ITableColumns {
  const decisionStatus = decisionStatusFor(view, statusFilter);
  const commentLabel =
    decisionStatus === REQUEST_STATUS.rejected
      ? 'Причина отклонения'
      : decisionStatus === REQUEST_STATUS.returned
        ? 'Причина возврата'
        : undefined;

  if (view === 'approvals' || view === 'execution') return { author: true, status: false };
  if (view === 'rework') return { author: false, status: false, commentLabel };
  if (view === 'own:created') return { author: false, status: !statusFilter, commentLabel };
  // История решений: заявка чужая, поэтому нужен автор. Статус — только если он
  // не предопределён самой вкладкой («Отклонённые мной» — это всегда «Отклонено»,
  // а вот у согласованных/выполненных заявка могла уйти дальше по маршруту).
  return { author: true, status: !decisionStatus, commentLabel };
}

export interface IRequestsTableViewProps {
  context: WebPartContext;
  view: ListView;
  /** Фильтр по статусу заявки; только для view='own:created'. '' — все статусы. */
  statusFilter?: string;
  onStatusFilterChange?: (status: string) => void;
  /**
   * Текущая страница (1-based) и её смена. Страница живёт в маршруте, а не
   * внутри компонента: так она попадает в адрес (ссылку можно передать),
   * переживает открытие/закрытие заявки и запоминается для этой таблицы
   * (см. persistPage в shared/routing.ts).
   */
  page: number;
  onPageChange: (page: number) => void;
  /**
   * Текст поиска и его смена. Тоже живёт в маршруте (см. page выше): попадает
   * в адрес, переживает открытие заявки и запоминается для этой таблицы.
   */
  query: string;
  onQueryChange: (query: string) => void;
  /** Клик по строке — открыть заявку (в выезжающей панели). */
  onOpen: (request: IMyRequest) => void;
}

function formatDate(iso: string): string {
  if (!iso) return '';
  const d = new Date(iso);
  const dd = d.getDate() < 10 ? `0${d.getDate()}` : `${d.getDate()}`;
  const mm = d.getMonth() + 1 < 10 ? `0${d.getMonth() + 1}` : `${d.getMonth() + 1}`;
  return `${dd}.${mm}.${d.getFullYear()}`;
}

// Таблица заявок. Клик в ЛЮБОМ месте строки открывает заявку (кликабельна вся
// строка, а не только название), поэтому строка — <tr> с onClick + tabIndex
// (доступ с клавиатуры: Enter/Space).
//
// Набор колонок зависит от раздела и от фильтра — см. columnsFor.
const Table: React.FC<{
  rows: IMyRequest[];
  view: ListView;
  statusFilter: string;
  onOpen: (request: IMyRequest) => void;
}> = ({ rows, view, statusFilter, onOpen }) => {
  const cols = columnsFor(view, statusFilter);

  // Колонки для DataTable строим динамически: базовые всегда, автор/статус/
  // комментарий — по columnsFor (зависит от раздела и фильтра). Кастомные ячейки
  // (статус → StatusBadge, дата → формат) задаются через render.
  const columns: IDataTableColumn<IMyRequest>[] = [
    // Код заявки, а не Id элемента: Id уникален только внутри своей партиции
    // (в каждом списке SharePoint нумерация с единицы), поэтому после архивации
    // в таблице встречались разные заявки под одним номером. Кода нет у заявок,
    // созданных до появления колонки — для них показываем Id, как раньше.
    { key: 'code', title: 'Код', width: '130px', render: (r) => r.code || `#${r.id}` },
    { key: 'type', title: 'Тип', width: '200px', render: (r) => r.requestTypeName },
    { key: 'title', title: 'Название', render: (r) => r.title || r.code || `#${r.id}` },
    { key: 'date', title: 'Дата', width: '110px', render: (r) => formatDate(r.created) }
  ];
  if (cols.author) {
    columns.push({
      key: 'author',
      title: 'Автор',
      width: '280px',
      render: (r) => [r.authorName, r.authorEmail].filter(Boolean).join(' · ') || '—'
    });
  }
  if (cols.status) {
    columns.push({
      key: 'status',
      title: 'Статус',
      width: '190px',
      render: (r) => (r.status ? <StatusBadge status={r.status} size="sm" /> : '—')
    });
  }
  if (cols.commentLabel) {
    columns.push({
      key: 'comment',
      title: cols.commentLabel,
      render: (r) => r.decisionComment || <span className={styles.commentEmpty}>Без комментария</span>
    });
  }

  return (
    <div className={styles.tableWrap}>
      <DataTable
        columns={columns}
        rows={rows}
        rowKey={(r) => `${r.requestTypeId}-${r.id}`}
        onRowClick={onOpen}
      />
    </div>
  );
};

// Раздел с таблицей заявок: поиск по всем полям + вывод постранично.
//
// Движок выбирается по наличию текста в поиске, а не по разделу: БЕЗ запроса —
// всегда обычный REST (мгновенно свежий, без задержки индексации), С запросом —
// всегда Search (полнотекстовый, но переиндексируется с задержкой). Раньше
// поиск подмешивал REST для «свежих» строк поверх Search — из-за этого
// результат мог быть неустойчивым (заявка то находилась, то нет, в зависимости
// от того, попала ли она в окно подстраховки); эту гибридную логику убрали.
//
// 'own:created' без фильтра и поиска — getOwnRequests (Search + REST-довесок на
// свежесть). С поиском — searchOwnRequests (Search, RowLimit/StartRow).
//
// Очереди и история решений ('approvals'/'execution'/'own:*' кроме created) без
// поиска — getApprovalQueue: REST по ApproverId(+Status), страница нарезается на
// СЕРВЕРЕ (сам берёт нужный срез индекса и дочитывает автора только для него).
// С поиском — getApprovalQueueIndex даёт ПОЛНЫЙ список этой же очереди без
// автора (постранично его тут не взять, т.к. фильтрация текстом идёт уже
// после), затем текстовый фильтр через Search (filterPendingByQuery), и только
// после фильтрации — нарезка на страницы и дочитывание автора
// (hydratePendingAuthors) — тоже только для видимой страницы.
//
// Отбор по статусу ЗАЯВКИ ('rework' и фильтр на 'own:created') — НЕ через KQL:
// managed property для произвольной Choice-колонки ненадёжна (см.
// getOwnRequestsByStatus в myRequests.service.ts — там объяснение и ссылка на
// реальный инцидент). Вместо этого Search ищет только по автору (надёжная
// AuthorOWSUSER), а статус фильтруется в памяти по полям, дочитанным через
// REST; постраничность там же, в памяти.
//
// Все варианты перечитываются по событию rp-requests-changed
// (shared/requestEvents) — после создания заявки и после решения согласующего.
// Поиск идёт по индексу, поэтому свежая правка может проявиться не мгновенно.
export const RequestsTableView: React.FC<IRequestsTableViewProps> = ({
  context,
  view,
  statusFilter = '',
  onStatusFilterChange,
  page,
  onPageChange,
  query,
  onQueryChange,
  onOpen,
}) => {
  const [types, setTypes] = React.useState<IRequestType[] | undefined>(undefined);
  const [rows, setRows] = React.useState<IMyRequest[] | undefined>(undefined);
  const [totalRows, setTotalRows] = React.useState<number>(0);
  const [error, setError] = React.useState<string>('');

  // input — то, что в поле ввода (меняется сразу); в маршрут значение уходит
  // после паузы в наборе. Данные грузятся по МАРШРУТНОМУ query — он и так уже
  // «отложенный», отдельный debounce здесь был бы вторым по счёту.
  const [input, setInput] = useRoutedQuery(query, onQueryChange);
  const debouncedQuery = query;

  // Какой ИМЕННО таблице принадлежат лежащие в состоянии rows/totalRows.
  // Компонент один на все разделы (см. LIST_VIEWS в RequestPortal), поэтому при
  // переключении раздела его состояние ещё хранит данные ПРЕДЫДУЩЕГО, пока не
  // отработает загрузка. Без этой отметки сброс страницы ниже принимал решение
  // по чужому totalRows и сбивал страницу на первую — из-за чего запомненная
  // страница затиралась при каждом переходе по левому меню.
  // Страница в ключ НЕ входит: totalRows один на всю таблицу, а не на страницу.
  const dataKey = `${view}|${statusFilter}|${debouncedQuery.trim()}`;
  const [loadedKey, setLoadedKey] = React.useState<string>('');

  // Страницу при смене запроса здесь НЕ сбрасываем: и запрос, и страница живут
  // в маршруте, и меняются они одним переходом (см. setQuery в RequestPortal).

  React.useEffect(() => {
    let cancelled = false;
    getLinkedTypes(context)
      .then((t) => {
        if (!cancelled) setTypes(t);
      })
      .catch((e) => {
        if (!cancelled) setError((e as Error).message);
      });
    return () => {
      cancelled = true;
    };
  }, [context]);

  React.useEffect(() => {
    if (types === undefined) return;
    let cancelled = false;
    const cacheKey = pageKey('table', [view, statusFilter, debouncedQuery.trim(), page]);

    // Сразу показываем то, что уже загружали для ЭТОЙ вкладки (и этого запроса
    // и страницы), а обновление идёт фоном. Компонент один на обе вкладки —
    // без кеша при переключении на экране оставались бы строки предыдущей
    // вкладки, пока не придёт ответ. Если для этой вкладки данных ещё нет —
    // rows становится undefined, и показывается «Загрузка…».
    const cached = readPage(cacheKey);
    setRows(cached ? cached.rows : undefined);
    setTotalRows(cached ? cached.totalRows : 0);
    // Пока не подтвердим, что загруженное относится к ТЕКУЩЕЙ таблице, ничего
    // на основании totalRows решать нельзя — см. loadedKey ниже.
    setLoadedKey(cached ? dataKey : '');

    const q = debouncedQuery.trim();

    // onPartial — Search и REST-довесок по свежести («Мои заявки»/«Доработка»,
    // см. getOwnRequests/getOwnRequestsByStatus в myRequests.service.ts) теперь
    // идут параллельно, и заранее не угадать, какой из двух ответит первым —
    // сеть шумит то в одну, то в другую сторону. onPartial зовётся с тем, что
    // пришло раньше, чтобы не держать список пустым ради заведомо более
    // медленного источника. Остальные ветки (approvals/execution/поиск) его
    // просто не принимают — там нет пары «Search + довесок» с независимо
    // валидным промежуточным результатом.
    const fetchRows = async (onPartial?: (p: IPage) => void): Promise<IPage> => {
      // «Доработка» — тот же список, что «Инициированные», просто со статусом,
      // зашитым в раздел, а не выбранным в фильтре.
      if (view === 'rework' || (view === 'own:created' && statusFilter)) {
        const status = view === 'rework' ? REQUEST_STATUS.returned : statusFilter;
        return getOwnRequestsByStatus(context, types, status, page, debouncedQuery, onPartial);
      }

      if (view === 'own:created') {
        return q.length > 0
          ? searchOwnRequests(context, types, debouncedQuery, page)
          : getOwnRequests(context, types, page, onPartial);
      }

      const queue = QUEUE_BY_VIEW[view];
      if (q.length === 0) {
        // Без поиска — страница уже нарезана и дочитана сервером.
        const r = await getApprovalQueue(context, queue, page);
        return { rows: r.rows, totalRows: r.totalRows };
      }

      // С поиском — сначала полный список этой очереди (без автора), фильтруем
      // текстом, и только потом режем на страницы и дочитываем автора — только
      // для видимой страницы.
      const idx = await getApprovalQueueIndex(context, queue);
      const filtered = await filterPendingByQuery(context, idx.types, idx.rows, debouncedQuery);
      const pageRows = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
      await hydratePendingAuthors(context, idx.types, pageRows);
      return { rows: pageRows, totalRows: filtered.length };
    };

    // Комментарий к решению дочитываем ОДНИМ местом на все ветки: «Доработка» и
    // «Отклонённые мной» приходят разными путями (по автору и по строкам
    // маршрута соответственно), а колонка у них одинаковая по смыслу. И только
    // для видимой страницы — как и автор в hydratePendingAuthors. Промежуточный
    // показ (onPartial) комментарий ещё не несёт — он дочитывается только для
    // ИТОГОВОГО результата, полный показ его донесёт следом.
    const fetchPage = async (onPartial?: (p: IPage) => void): Promise<IPage> => {
      const result = await fetchRows(onPartial);
      const decisionStatus = decisionStatusFor(view, statusFilter);
      if (decisionStatus) {
        await hydrateDecisionComments(context, types, result.rows, decisionStatus);
      }
      return result;
    };

    const load = async (forceRender = false): Promise<void> => {
      try {
        // Промежуточный показ — ТОЛЬКО когда для этой страницы прямо СЕЙЧАС
        // ничего не закешировано (первый заход, экран пуст). Проверяем на
        // каждый вызов load(), а не один раз на весь эффект: тот же load()
        // переиспользуется автообновлением по таймеру и событием
        // rp-requests-changed все 10 минут жизни вкладки, и ко второму вызову
        // кеш почти наверняка уже есть — без повторной проверки список бы на
        // мгновение "усыхал" при КАЖДОМ фоновом обновлении, а не только при
        // самой первой загрузке.
        const onPartial = readPage(cacheKey)
          ? undefined
          : (partial: IPage): void => {
              if (cancelled) return;
              // ПУСТОЙ промежуточный результат не показываем: смысл onPartial —
              // не держать экран пустым, пока отвечает более медленный источник,
              // а пустая страница как раз пустой экран и даёт, только вместо
              // «Загрузка…» на нём появляется «Вы ещё не создавали заявок» —
              // и через мгновение исчезает, когда придёт второй источник.
              if (partial.rows.length === 0) return;
              setRows(partial.rows);
              setTotalRows(partial.totalRows);
            };

        const fresh = await perfScope(`таблица ${view} стр.${page}`, () => fetchPage(onPartial));
        if (cancelled) return;

        // Перерисовываем, только если данные реально изменились — иначе при
        // каждом возврате на вкладку таблица моргала бы, перерисовываясь тем же
        // самым содержимым. forceRender — исключение: строки уже спрятаны со
        // экрана (см. force ниже), и их обязательно нужно вернуть, даже если
        // свежий ответ побайтово совпал с тем, что было в кеше, — иначе таблица
        // так и останется в состоянии «Загрузка…», хотя данные давно пришли
        // (баг: ушёл на этом самом совпадении сигнатур, найден 2026-08-18).
        const prev = readPage(cacheKey);
        if (forceRender || !prev || pageSignature(prev) !== pageSignature(fresh)) {
          writePage(cacheKey, fresh);
          setRows(fresh.rows);
          setTotalRows(fresh.totalRows);
        }
        // Данные точно от текущей таблицы — теперь по ним можно судить о
        // количестве страниц (см. сброс страницы ниже).
        setLoadedKey(dataKey);
        setError('');
      } catch (e) {
        if (!cancelled) setError((e as Error).message);
      }
    };

    load().catch(() => undefined); // ошибки уже обработаны внутри load через setError
    const unsubscribe = onRequestsChanged((force) => {
      // Явный повторный клик по уже открытому пункту меню — пользователь ждёт
      // видимого обновления, а не молчаливой подмены данных за спиной. Прежние
      // строки прячем сразу; свежие подставит load(force).
      if (force) {
        setRows(undefined);
        setLoadedKey('');
      }
      load(force).catch(() => undefined);
    });
    // Пока вкладка браузера скрыта, обновляться незачем — при возврате к ней
    // сработает ближайший тик.
    const timer = window.setInterval(() => {
      if (!document.hidden) load().catch(() => undefined);
    }, AUTO_REFRESH_MS);
    return () => {
      cancelled = true;
      unsubscribe();
      window.clearInterval(timer);
    };
  }, [context, types, view, statusFilter, debouncedQuery, page, dataKey]);

  // Все ветки отдают уже нарезанную страницу — просто показываем как есть.
  const q = debouncedQuery.trim();
  const total = totalRows;
  const visible = rows || [];

  /**
   * Можно ли уже судить о содержимом таблицы.
   *
   * Пустоту («Вы ещё не создавали заявок») объявляем ТОЛЬКО по завершённой
   * загрузке именно ЭТОЙ таблицы (loadedKey), а не по любому пустому rows: до
   * этого rows может быть пустым по совершенно другой причине — часть источников
   * ещё в пути (см. onPartial выше, «Мои заявки» собираются из Search + REST).
   * Промежуточный НЕПУСТОЙ результат показывать можно и нужно — в нём уже есть
   * что смотреть.
   */
  const loaded = loadedKey === dataKey || visible.length > 0;
  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));

  // Страница может оказаться за пределами набора: пришла из старой ссылки или
  // из запомненной, а заявок с тех пор стало меньше (часть согласовали, и они
  // ушли из этой очереди). Показывать пустую таблицу с непустым счётчиком —
  // выглядит как поломка, поэтому возвращаемся на последнюю существующую.
  //
  // Строго ПОСЛЕ проверки loadedKey: totalRows в состоянии может быть ещё от
  // предыдущей таблицы (компонент общий), и решение по нему сбило бы страницу
  // на первую при обычном переходе по левому меню.
  React.useEffect(() => {
    if (loadedKey !== dataKey) return;
    if (rows && page > totalPages) onPageChange(totalPages);
  }, [loadedKey, dataKey, rows, page, totalPages, onPageChange]);

  return (
    <section className={styles.view}>
      <div className={styles.head}>
        <h2 className={styles.heading}>
          {HEADINGS[view]}
          {rows && <span className={styles.count}>{total}</span>}
        </h2>
        {view === 'own:created' && onStatusFilterChange && (
          <select
            // Цвет самого <select> (закрытое состояние) — тем же классом, что и
            // у выбранного <option>: statusFilter задаёт нейтральные border/фон,
            // а конкретный statusOptionClassName(statusFilter) перекрывает color.
            className={`${styles.statusFilter} ${statusFilter ? statusOptionClassName(statusFilter) : ''}`}
            value={statusFilter}
            onChange={(e) => onStatusFilterChange(e.target.value)}
            aria-label="Фильтр по статусу"
          >
            <option value="">Все статусы</option>
            {REQUEST_STATUS_CHOICES.map((s) => (
              <option key={s} value={s} className={statusOptionClassName(s)}>
                {s}
              </option>
            ))}
          </select>
        )}
        <input
          type="search"
          className={styles.search}
          placeholder="Поиск по заявкам…"
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
      </div>

      {error && <div className={styles.error}>Не удалось загрузить заявки: {error}</div>}
      {!error && !loaded && <div className={styles.empty}>Загрузка…</div>}
      {!error && loaded && total === 0 && (
        <div className={styles.empty}>
          {q ? `По запросу «${debouncedQuery}» ничего не найдено.` : EMPTY_TEXTS[view]}
        </div>
      )}
      {!error && rows && total > 0 && (
        <>
          <Table rows={visible} view={view} statusFilter={statusFilter} onOpen={onOpen} />
          <Pager page={page} totalPages={totalPages} onChange={onPageChange} />
        </>
      )}
    </section>
  );
};