"use client";

/**
 * Team-дашборд менеджера (#2556, эпик #2549) — единая страница для ролей
 * `admin` и `manager` (backend сам скоупит список по org-изоляции, см.
 * `app/api/v1/team.py::list_employees`), UI не дублируется под роли.
 *
 * Доступ: `useMe().role` проверяется на клиенте ДО первого запроса (не ждём
 * доомed 403 round-trip), но HTTPError 403 от самого списка сотрудников тоже
 * ловится — тот же defense-in-depth паттерн, что и `app/admin/audit/page.tsx`
 * (прямой заход на URL не крашит страницу, даже если nav её уже прячет).
 */

import { useState } from "react";

import "@/components/trade-in/trade-in.css";
import { NoAccessScreen } from "@/components/auth/NoAccessScreen";
import { CreateEmployeeForm } from "@/components/team/CreateEmployeeForm";
import { EmployeeHistoryDrawer } from "@/components/team/EmployeeHistoryDrawer";
import { EmployeeTable } from "@/components/team/EmployeeTable";
import { QuotaEditor } from "@/components/team/QuotaEditor";
import { Topbar } from "@/components/trade-in/Topbar";
import { HTTPError } from "@/lib/api";
import type { Employee } from "@/lib/team-api";
import { teamErrorMessage, useEmployees } from "@/lib/team-api";
import { useMe } from "@/lib/useMe";

const PAGE_LIMIT = 50;

export default function TeamPage() {
  const meQ = useMe();
  // Вычисляем ДО useEmployees (не после) — иначе для employee/analyst/pilot
  // при прямом заходе на /team улетает обречённый GET (401/403) ещё до того,
  // как ниже отрисуется role-gate. Порядок хуков не меняется — это просто
  // производное значение, не условный вызов хука.
  const role = meQ.data?.role;
  const isAllowedRole = role === "admin" || role === "manager";

  const [offset, setOffset] = useState(0);
  const employeesQ = useEmployees(PAGE_LIMIT, offset, isAllowedRole);

  const [showCreateForm, setShowCreateForm] = useState(false);
  const [quotaEmployee, setQuotaEmployee] = useState<Employee | null>(null);
  const [historyEmployee, setHistoryEmployee] = useState<Employee | null>(null);

  // Роль ещё не загружена — не решаем ничего, RouteGuard уже отрисовал
  // страницу (401/403 верхнего уровня он ловит сам), здесь только role-gate.
  if (meQ.isPending) {
    return (
      <>
        <Topbar active="team" />
        <main className="page scraper-page" style={{ maxWidth: 1180 }}>
          <p className="scraper-hint">Загрузка…</p>
        </main>
      </>
    );
  }

  if (!isAllowedRole) {
    return <NoAccessScreen variant="user" />;
  }

  // Backend 403 регардлесс роли фронта (напр. session истекла между /me и
  // /employees) — тот же fallback, что и в admin/audit.
  if (employeesQ.error instanceof HTTPError && employeesQ.error.status === 403) {
    return <NoAccessScreen variant="user" />;
  }

  const employees = employeesQ.data ?? [];
  const hasNextPage = employees.length === PAGE_LIMIT;

  return (
    <>
      <Topbar active="team" />
      <main className="page scraper-page" style={{ maxWidth: 1180 }}>
        <h1 className="scraper-h1">Команда</h1>
        <p className="scraper-subtitle">
          Сотрудники, их доступ и месячные квоты на оценку. История оценок — по клику
          «История».
        </p>

        <section className="scraper-section">
          <div className="team-toolbar">
            <h2 style={{ margin: 0 }}>Сотрудники</h2>
            <button
              type="button"
              className="team-btn-primary"
              onClick={() => setShowCreateForm(true)}
            >
              + Добавить сотрудника
            </button>
          </div>

          {employeesQ.isPending ? <p className="scraper-hint">Загрузка…</p> : null}
          {employeesQ.isError && !(employeesQ.error instanceof HTTPError && employeesQ.error.status === 403) ? (
            <p className="scraper-result scraper-result--error">
              {teamErrorMessage(employeesQ.error)}
            </p>
          ) : null}

          {employeesQ.data ? (
            <EmployeeTable
              employees={employees}
              onEditQuota={setQuotaEmployee}
              onViewHistory={setHistoryEmployee}
              limit={PAGE_LIMIT}
              offset={offset}
              onOffsetChange={setOffset}
              hasNextPage={hasNextPage}
            />
          ) : null}
        </section>
      </main>

      {showCreateForm ? <CreateEmployeeForm onClose={() => setShowCreateForm(false)} /> : null}
      {quotaEmployee ? (
        <QuotaEditor employee={quotaEmployee} onClose={() => setQuotaEmployee(null)} />
      ) : null}
      {historyEmployee ? (
        <EmployeeHistoryDrawer
          employee={historyEmployee}
          onClose={() => setHistoryEmployee(null)}
        />
      ) : null}
    </>
  );
}
