"use client";

/**
 * Аудит доступа (Feature 2) — с каких IP/устройств заходят пилотные аккаунты и
 * что они ищут. Admin-only: nav entry в Topbar скрыт для не-admin ролей (see
 * NAV_ITEMS scopePath), backend 403-ит non-admin регардлесс — обрабатываем
 * это здесь, а не крашимся (RouteGuard сам по себе НЕ блокирует прямой заход
 * на /admin/audit для pilot, см. комментарий в Topbar.tsx про /scrapers —
 * тот же паттерн).
 */

import { Fragment, useState, type ReactNode } from "react";

import "@/components/trade-in/trade-in.css";
import { NoAccessScreen } from "@/components/auth/NoAccessScreen";
import { Topbar } from "@/components/trade-in/Topbar";
import { HTTPError } from "@/lib/api";
import {
  useAccountDrilldown,
  useAuditAccounts,
  type AccountDrilldown,
} from "@/lib/admin-audit-api";

function formatDateTime(iso: string | null): string {
  if (!iso) return "—";
  try {
    return new Date(iso).toLocaleString("ru-RU", {
      day: "2-digit",
      month: "2-digit",
      year: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
    });
  } catch {
    return iso;
  }
}

function DrilldownSection<T>({
  title,
  rows,
  render,
}: {
  title: string;
  rows: T[];
  render: (row: T, i: number) => ReactNode;
}) {
  return (
    <div>
      <h4>
        {title} ({rows.length})
      </h4>
      {rows.length === 0 ? (
        <p className="scraper-hint" style={{ margin: 0 }}>
          Нет данных.
        </p>
      ) : (
        <table className="runs-table">
          <tbody>{rows.map(render)}</tbody>
        </table>
      )}
    </div>
  );
}

function AccountDrilldownPanel({ username }: { username: string }) {
  const drilldownQ = useAccountDrilldown(username);

  if (drilldownQ.isError) {
    return (
      <p className="scraper-result scraper-result--error" style={{ margin: "12px 6px" }}>
        Не удалось загрузить детали аккаунта: {drilldownQ.error.message}
      </p>
    );
  }

  const d: AccountDrilldown | undefined = drilldownQ.data;
  if (!d) {
    return (
      <p className="scraper-hint" style={{ margin: "12px 6px" }}>
        Загрузка деталей…
      </p>
    );
  }

  const hasAnyData =
    d.ips.length > 0 ||
    d.devices.length > 0 ||
    d.searches.length > 0 ||
    d.recent_activity.length > 0;

  if (!hasAnyData) {
    return (
      <p className="scraper-hint" style={{ margin: "12px 6px" }}>
        Пока нет данных по этому аккаунту.
      </p>
    );
  }

  return (
    <div className="admin-drilldown">
      <DrilldownSection
        title="IP-адреса"
        rows={d.ips}
        render={(row, i) => (
          <tr key={i}>
            <td>{row.ip_address ?? "—"}</td>
            <td className="run-muted">{row.event_count} событ.</td>
            <td className="run-muted">
              {formatDateTime(row.first_seen)} → {formatDateTime(row.last_seen)}
            </td>
          </tr>
        )}
      />
      <DrilldownSection
        title="Устройства"
        rows={d.devices}
        render={(row, i) => (
          <tr key={i}>
            <td style={{ maxWidth: 260, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
              {row.user_agent ?? "—"}
            </td>
            <td className="run-muted">{row.event_count} событ.</td>
            <td className="run-muted">{formatDateTime(row.last_seen)}</td>
          </tr>
        )}
      />
      <DrilldownSection
        title="Поиски"
        rows={d.searches}
        render={(row, i) => (
          <tr key={i}>
            <td>{row.address ?? "—"}</td>
            <td className="run-muted">
              {row.rooms ?? "?"}к · {row.area_m2 ?? "?"} м²
            </td>
            <td className="run-muted">
              {formatDateTime(row.created_at)} · {row.ip_address ?? "—"}
            </td>
          </tr>
        )}
      />
      <DrilldownSection
        title="Недавняя активность"
        rows={d.recent_activity}
        render={(row, i) => (
          <tr key={i}>
            <td>{row.event_type}</td>
            <td className="run-muted">
              {row.method ?? ""} {row.path ?? "—"}
            </td>
            <td className="run-muted">{formatDateTime(row.created_at)}</td>
          </tr>
        )}
      />
    </div>
  );
}

export default function AdminAuditPage() {
  const accountsQ = useAuditAccounts();
  const [expandedUser, setExpandedUser] = useState<string | null>(null);

  // Backend 403-ит non-admin регардлесс (nav уже прячет ссылку) — прямой заход
  // на URL не должен крашить страницу, показываем тот же экран, что RouteGuard
  // рендерит для path-deny.
  if (accountsQ.error instanceof HTTPError && accountsQ.error.status === 403) {
    return <NoAccessScreen variant="user" />;
  }

  return (
    <>
      <Topbar active="audit" />
      <main className="page scraper-page" style={{ maxWidth: 1180 }}>
        <h1 className="scraper-h1">Аудит доступа</h1>
        <p className="scraper-subtitle">
          С каких IP-адресов и устройств заходят аккаунты и что они ищут. Клик по
          аккаунту раскрывает детали.
        </p>

        <section className="scraper-section">
          {accountsQ.isPending && <p className="scraper-hint">Загрузка…</p>}
          {accountsQ.isError && (
            <p className="scraper-result scraper-result--error">
              Ошибка загрузки: {accountsQ.error.message}
            </p>
          )}
          {accountsQ.data && accountsQ.data.length === 0 && (
            <p className="scraper-hint">
              Пока нет данных — событий аудита ещё не собрано.
            </p>
          )}
          {accountsQ.data && accountsQ.data.length > 0 && (
            <table className="runs-table">
              <thead>
                <tr>
                  <th scope="col">Аккаунт</th>
                  <th scope="col">Последний визит</th>
                  <th scope="col">Первый визит</th>
                  <th scope="col">IP</th>
                  <th scope="col">Устройства</th>
                  <th scope="col">Входы</th>
                  <th scope="col">Запросы</th>
                  <th scope="col">Поиски</th>
                </tr>
              </thead>
              <tbody>
                {accountsQ.data.map((a) => {
                  const isOpen = expandedUser === a.username;
                  return (
                    <Fragment key={a.username}>
                      <tr>
                        <td>
                          <button
                            type="button"
                            className="admin-row-toggle"
                            aria-expanded={isOpen}
                            onClick={() => setExpandedUser(isOpen ? null : a.username)}
                          >
                            {isOpen ? "▾" : "▸"} {a.username}
                          </button>
                        </td>
                        <td className="run-muted">{formatDateTime(a.last_seen_at)}</td>
                        <td className="run-muted">{formatDateTime(a.first_seen_at)}</td>
                        <td>{a.distinct_ips}</td>
                        <td>{a.distinct_devices}</td>
                        <td>{a.login_count}</td>
                        <td>{a.request_count}</td>
                        <td>{a.search_count}</td>
                      </tr>
                      {isOpen && (
                        <tr>
                          <td colSpan={8} style={{ background: "var(--bg-card-alt, #fafbfc)" }}>
                            <AccountDrilldownPanel username={a.username} />
                          </td>
                        </tr>
                      )}
                    </Fragment>
                  );
                })}
              </tbody>
            </table>
          )}
        </section>
      </main>
    </>
  );
}
