"use client";

/**
 * Активность (Feature 3) — поведенческая аналитика по user_events: сколько
 * событий, кто активен, что чаще ищут/дёргают. Названо «Активность», не
 * «Аналитика» — этот label уже занят market-analytics overlay (АНАЛИТИКА ДОМА,
 * v2/AnalyticsView.tsx) внутри самой оценки, здесь другой домен (юзер-активность).
 *
 * Admin-only — тот же паттерн gating, что и /admin/audit (см. комментарий там).
 */

import { useMemo, useState } from "react";
import {
  CartesianGrid,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";

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 { useUserAnalytics } from "@/lib/admin-audit-api";

const DAYS_OPTIONS = [7, 30, 90] as const;
type DaysOption = (typeof DAYS_OPTIONS)[number];

function formatDay(iso: string): string {
  try {
    return new Date(iso).toLocaleDateString("ru-RU", { day: "2-digit", month: "2-digit" });
  } catch {
    return iso;
  }
}

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

function KpiCard({ label, value }: { label: string; value: number }) {
  return (
    <div className="admin-kpi-card">
      <div className="admin-kpi-label">{label}</div>
      <div className="admin-kpi-value">{value.toLocaleString("ru-RU")}</div>
    </div>
  );
}

interface DailyChartPoint {
  day: string;
  events: number;
  users: number;
  label: string;
}

export default function AdminAnalyticsPage() {
  const [days, setDays] = useState<DaysOption>(30);
  const analyticsQ = useUserAnalytics(days);

  const chartData = useMemo<DailyChartPoint[]>(
    () => (analyticsQ.data?.daily ?? []).map((p) => ({ ...p, label: formatDay(p.day) })),
    [analyticsQ.data],
  );

  if (analyticsQ.error instanceof HTTPError && analyticsQ.error.status === 403) {
    return <NoAccessScreen variant="user" />;
  }

  return (
    <>
      <Topbar active="analytics" />
      <main className="page scraper-page" style={{ maxWidth: 1180 }}>
        <h1 className="scraper-h1">Активность</h1>
        <p className="scraper-subtitle">
          Поведенческая аналитика по всем аккаунтам: события, активные
          пользователи, частые поиски и API-пути.
        </p>

        <div className="admin-days-filter">
          {DAYS_OPTIONS.map((d) => (
            <button
              key={d}
              type="button"
              className={days === d ? "is-active" : undefined}
              onClick={() => setDays(d)}
            >
              {d} дн.
            </button>
          ))}
        </div>

        {analyticsQ.isPending && <p className="scraper-hint">Загрузка…</p>}
        {analyticsQ.isError && (
          <p className="scraper-result scraper-result--error">
            Ошибка загрузки: {analyticsQ.error.message}
          </p>
        )}

        {analyticsQ.data && (
          <>
            <div className="admin-kpi-grid">
              <KpiCard label="Всего событий" value={analyticsQ.data.summary.total_events} />
              <KpiCard
                label="Уникальных пользователей"
                value={analyticsQ.data.summary.distinct_users}
              />
              <KpiCard label="События за 24ч" value={analyticsQ.data.summary.events_last_24h} />
              <KpiCard
                label="Активны за 24ч"
                value={analyticsQ.data.summary.active_users_last_24h}
              />
            </div>

            <section className="scraper-section">
              <h2>Динамика по дням</h2>
              <p className="scraper-hint">События и уникальные пользователи в день.</p>
              {chartData.length < 2 ? (
                <p className="scraper-hint" style={{ margin: 0 }}>
                  Недостаточно данных для графика — нужно минимум 2 дня наблюдений.
                </p>
              ) : (
                <div aria-hidden="true" style={{ width: "100%", height: 260 }}>
                  <ResponsiveContainer>
                    <LineChart data={chartData} margin={{ top: 8, right: 16, left: 8, bottom: 8 }}>
                      <CartesianGrid stroke="var(--border-card, #e6e8ec)" strokeDasharray="3 3" />
                      <XAxis dataKey="label" tick={{ fontSize: 11 }} />
                      <YAxis tick={{ fontSize: 11 }} allowDecimals={false} />
                      <Tooltip labelFormatter={(label: string) => label} />
                      <Line
                        type="monotone"
                        dataKey="events"
                        stroke="var(--accent, #1d4ed8)"
                        strokeWidth={2}
                        dot={{ r: 2 }}
                        name="События"
                      />
                      <Line
                        type="monotone"
                        dataKey="users"
                        stroke="var(--success, #0a7a3a)"
                        strokeWidth={2}
                        dot={{ r: 2 }}
                        name="Пользователи"
                      />
                    </LineChart>
                  </ResponsiveContainer>
                </div>
              )}
            </section>

            <div className="admin-two-col">
              <section className="scraper-section">
                <h2>Топ поисковых адресов</h2>
                {analyticsQ.data.top_searches.length === 0 ? (
                  <p className="scraper-hint" style={{ margin: 0 }}>
                    Пока нет данных.
                  </p>
                ) : (
                  <table className="runs-table">
                    <thead>
                      <tr>
                        <th scope="col">Адрес</th>
                        <th scope="col">Поисков</th>
                      </tr>
                    </thead>
                    <tbody>
                      {analyticsQ.data.top_searches.map((row, i) => (
                        <tr key={i}>
                          <td>{row.address ?? "—"}</td>
                          <td>{row.n}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                )}
              </section>

              <section className="scraper-section">
                <h2>Топ API-путей</h2>
                {analyticsQ.data.top_paths.length === 0 ? (
                  <p className="scraper-hint" style={{ margin: 0 }}>
                    Пока нет данных.
                  </p>
                ) : (
                  <table className="runs-table">
                    <thead>
                      <tr>
                        <th scope="col">Путь</th>
                        <th scope="col">Запросов</th>
                      </tr>
                    </thead>
                    <tbody>
                      {analyticsQ.data.top_paths.map((row, i) => (
                        <tr key={i}>
                          <td>{row.path ?? "—"}</td>
                          <td>{row.n}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                )}
              </section>
            </div>

            <section className="scraper-section">
              <h2>Активность по аккаунтам</h2>
              {analyticsQ.data.by_account.length === 0 ? (
                <p className="scraper-hint" style={{ margin: 0 }}>
                  Пока нет данных.
                </p>
              ) : (
                <table className="runs-table">
                  <thead>
                    <tr>
                      <th scope="col">Аккаунт</th>
                      <th scope="col">События</th>
                      <th scope="col">Поиски</th>
                      <th scope="col">Последняя активность</th>
                    </tr>
                  </thead>
                  <tbody>
                    {analyticsQ.data.by_account.map((row) => (
                      <tr key={row.username}>
                        <td>{row.username}</td>
                        <td>{row.events}</td>
                        <td>{row.searches}</td>
                        <td className="run-muted">{formatDateTime(row.last_seen)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
            </section>
          </>
        )}
      </main>
    </>
  );
}
