"use client"

import Link from "next/link"
import {
  ActivityIcon,
  BellIcon,
  CableIcon,
  FilterIcon,
  GitMergeIcon,
  HardDriveIcon,
  HeartPulseIcon,
  MapIcon,
  ServerIcon,
  ShieldIcon,
} from "lucide-react"
import { PageHeader } from "@/components/page-header"
import { OpsPanel } from "@/components/ops-panel"
import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
import { QuickActionGrid } from "@/components/reui-kit/quick-action-grid"
import { AttentionQueue } from "@/components/reui-kit/attention-queue"
import { TrafficRxTxChart } from "@/components/reui-kit/traffic-rx-tx-chart"
import { LatencyChart } from "@/components/dashboard/latency-chart"
import { DashboardEventsTimeline } from "@/components/dashboard/dashboard-events-timeline"
import { InternetPathPanel } from "@/components/dashboard/internet-path-panel"
import { DashboardActiveProbesDataGrid } from "@/components/data-grids/dashboard-active-probes-data-grid"
import { EmptyState } from "@/components/empty-state"
import { DashboardDataStatus } from "@/components/dashboard/dashboard-data-status"
import { Badge } from "@/components/reui/badge"
import { buttonVariants } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { fmtRate } from "@/lib/fmt-rate"
import { useDashboardLive, type AttentionRow } from "@/hooks/use-dashboard-live"

function fmtIntRu(n: number): string {
  return n.toLocaleString("ru-RU")
}

function AttentionRows({ rows }: { rows: AttentionRow[] }) {
  function renderRow(row: AttentionRow) {
    return (
      <Link
        key={row.id}
        href={row.href}
        className="hover:bg-muted/40 focus-visible:ring-ring flex min-w-0 items-start justify-between gap-2 rounded-md px-1 py-1.5 focus-visible:ring-2"
      >
        <span className="min-w-0 wrap-anywhere text-sm font-medium">{row.title}</span>
        <Badge
          size="sm"
          variant={row.tone === "warning" ? "warning-light" : "destructive-light"}
          className="shrink-0"
        >
          {row.hint}
        </Badge>
      </Link>
    )
  }

  return (
    <div className="flex flex-col gap-0.5">
      {rows.slice(0, 5).map(renderRow)}
      {rows.length > 5 && (
        <details>
          <summary className="cursor-pointer rounded-md px-1 py-2 text-xs text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring">Ещё {rows.length - 5}</summary>
          {rows.slice(5).map(renderRow)}
        </details>
      )}
    </div>
  )
}

export default function DashboardPage() {
  const dash = useDashboardLive()
  const offline = Math.max(0, dash.totalServers - dash.onlineCount)
  const health = dash.probeDown + dash.probeWarn

  return (
    <div className="flex h-full flex-col">
      <PageHeader crumbs={[{ label: "Обзор" }, { label: "Дашборд" }]} />

      <div className="flex-1 overflow-y-auto">
        <div className="flex flex-col gap-4 px-4 py-4 md:gap-6 md:px-6 md:py-5">
          {dash.isLive && <DashboardDataStatus sources={dash.sources} refreshing={dash.refreshing} onRefresh={dash.retry} />}

          <KpiStatGrid
            aria-label="Сводка дашборда"
            isLoading={dash.loading}
            items={[
              {
                id: "fleet",
                label: "Серверы онлайн",
                value: dash.availability.servers ? `${dash.onlineCount} / ${dash.totalServers}` : "—",
                hint: !dash.availability.servers ? "нет данных" : !dash.isLive
                  ? "демо"
                  : offline > 0
                    ? `${offline} не в сети`
                    : dash.totalServers > 0
                      ? "все в сети"
                      : "нет серверов",
                href: "/servers",
                icon: <ServerIcon />,
                iconClassName: "text-muted-foreground",
                variant: offline > 0 ? "warning" : "default",
              },
              {
                id: "overlay",
                label: "Туннели работают",
                value: dash.availability.overlay ? String(dash.overlay.up) : "—",
                hint: !dash.availability.overlay ? "не все источники доступны" : dash.overlay.total > 0 ? `Не работают: ${dash.overlay.down}` : "нет туннелей",
                href: "/gre",
                icon: <CableIcon />,
                iconClassName: "text-info",
                variant: dash.overlay.down > 0 ? "warning" : "default",
              },
              {
                id: "bgp",
                label: "Префиксы BGP",
                value: dash.bgp?.prefixSum != null ? fmtIntRu(dash.bgp.prefixSum) : "—",
                hint: dash.bgp ? `Сессий установлено: ${dash.bgp.establishedCount ?? "неизвестно"}${dash.bgp.prefixSum === null ? " · префиксы неизвестны" : ""}` : "нет данных",
                href: "/bgp",
                icon: <GitMergeIcon />,
                iconClassName: "text-primary",
              },
              {
                id: "health",
                label: "Проверки с проблемами",
                value: dash.availability.probes ? String(health) : "—",
                hint: dash.availability.probes ? `${dash.probeDown} ошибок · ${dash.probeWarn} предупреждений` : "нет данных",
                href: "/uptime",
                icon: <BellIcon />,
                iconClassName: health > 0 ? "text-destructive" : "text-muted-foreground",
                variant: health > 0 ? "destructive" : "default",
              },
            ]}
          />

          <section aria-labelledby="dashboard-attention-title" className="flex min-w-0 flex-col gap-2">
            <h2 id="dashboard-attention-title" className="text-sm font-semibold">Требует внимания</h2>
            <AttentionQueue
              className="lg:grid-cols-3"
              columns={[
                {
                  id: "nodes",
                  title: "Серверы",
                  icon: ServerIcon,
                  count: dash.attentionServers.length,
                  countVariant: "warning-light",
                  emptyTitle: dash.reliable.servers ? (dash.totalServers > 0 ? "Серверы без проблем" : "Нет серверов") : "Состояние не подтверждено",
                  emptyDescription: dash.reliable.servers ? "Нет включённых серверов с ошибками доступности." : "Проверьте состояние источников выше.",
                  children: <AttentionRows rows={dash.attentionServers} />,
                },
                {
                  id: "overlay",
                  title: "Туннели",
                  icon: CableIcon,
                  iconClassName: "text-info",
                  count: dash.attentionOverlay.length,
                  countVariant: "destructive-light",
                  emptyTitle: dash.reliable.overlay ? (dash.overlay.total > 0 ? "Туннели работают" : "Нет туннелей") : "Состояние не подтверждено",
                  emptyDescription: dash.reliable.overlay ? "В GRE, WireGuard и VXLAN проблем не обнаружено." : "Проверьте состояние источников выше.",
                  children: <AttentionRows rows={dash.attentionOverlay} />,
                },
                {
                  id: "probes",
                  title: "Проверки",
                  icon: HeartPulseIcon,
                  iconClassName: "text-destructive",
                  count: dash.attentionProbes.length,
                  countVariant: "destructive-light",
                  emptyTitle: dash.reliable.probes ? (dash.probeCount > 0 ? "Проверки без ошибок" : "Нет активных проверок") : "Состояние не подтверждено",
                  emptyDescription: dash.reliable.probes ? "Нет ошибок и предупреждений активных проверок." : "Проверьте состояние источников выше.",
                  children: <AttentionRows rows={dash.attentionProbes} />,
                },
              ]}
            />
          </section>

          <div className="grid grid-cols-1 gap-4 lg:grid-cols-[2fr_1fr]">
            <OpsPanel
              title="Задержка до серверов"
              description={
                dash.latency.kind === "mock" || dash.latency.kind === "live"
                  ? dash.latency.subtitle
                  : dash.latency.kind === "loading"
                    ? "Загрузка…"
                    : "Нет серии RTT"
              }
              contentClassName="px-3 pb-3"
            >
              {dash.latency.kind === "loading" && (
                <div className="bg-muted/50 h-[220px] w-full animate-pulse rounded-md" />
              )}
              {dash.latency.kind === "empty" && (
                <p className="text-muted-foreground px-4 py-10 text-center text-sm">{dash.latency.message}</p>
              )}
              {(dash.latency.kind === "mock" || dash.latency.kind === "live") && (
                <LatencyChart series={dash.latency.series} labels={dash.latency.labels} />
              )}
            </OpsPanel>

            <OpsPanel
              title="Последние события"
              description="Система и BGP"
              headerRight={
                <Link href="/alerts" className={cn(buttonVariants({ variant: "ghost", size: "sm" }), "h-7 text-xs")}>
                  Все →
                </Link>
              }
            >
              <DashboardEventsTimeline
                events={dash.recentEvents}
                loading={dash.eventsLoading}
                error={dash.eventsError}
              />
            </OpsPanel>
          </div>

          <div>
            <OpsPanel
              title="Пропускная способность"
              description={dash.traffic?.demo ? "Суммарный RX / TX · демо" : "Суммарный RX / TX серверов · 1 ч"}
              headerRight={
                dash.traffic ? (
                  <div className="flex items-center gap-3 text-xs">
                    {dash.traffic.demo ? <Badge variant="outline" size="sm">демо</Badge> : null}
                    <span className="tabular-nums">RX {fmtRate(dash.traffic.rxNow)}</span>
                    <span className="tabular-nums">TX {fmtRate(dash.traffic.txNow)}</span>
                    <Link href="/traffic" className={cn(buttonVariants({ variant: "outline", size: "sm" }), "h-7 text-xs")}>
                      Трафик →
                    </Link>
                  </div>
                ) : null
              }
              contentClassName="px-3 pb-3"
            >
              {dash.loading && !dash.traffic ? (
                <div className="bg-muted/50 h-[220px] w-full animate-pulse rounded-md" />
              ) : !dash.traffic ? (
                <p className="text-muted-foreground px-4 py-10 text-center text-sm">
                  Нет данных трафика за последний час.{" "}
                  <Link href="/traffic" className="underline underline-offset-2">
                    Открыть трафик
                  </Link>
                </p>
              ) : (
                <TrafficRxTxChart rx={dash.traffic.rx} tx={dash.traffic.tx} range="1h" embedded />
              )}
            </OpsPanel>


          </div>

          <InternetPathPanel
            model={dash.internetPath}
            loading={dash.internetPathLoading}
            error={dash.isLive ? dash.internetPathError : null}
          />

          <OpsPanel
            title="Активные пробы"
            description={
              <span className={dash.error && dash.isLive ? "text-destructive" : undefined}>{dash.probesSubtitle}</span>
            }
            headerRight={
              <Link href="/uptime" className={cn(buttonVariants({ variant: "outline", size: "sm" }), "h-7 text-xs")}>
                Мониторинг →
              </Link>
            }
            contentClassName="px-0 pb-0"
          >
            {dash.activeProbes.length === 0 && !dash.probesLoading ? (
              <EmptyState
                className="py-10"
                title={dash.availability.probes ? "Нет проб на дашборде" : "Данные проб недоступны"}
                description={dash.availability.probes ? "Включите пробу и отметьте ★ на странице мониторинга." : "Повторите обновление данных."}
                action={
                  <Link href="/uptime" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
                    Открыть мониторинг
                  </Link>
                }
              />
            ) : (
              <DashboardActiveProbesDataGrid
                probes={dash.activeProbes}
                catalog={dash.servers}
                isLoading={dash.probesLoading}
                emptyDescription="Нет проб с звездой на дашборде."
              />
            )}
          </OpsPanel>

          <QuickActionGrid
            title="Быстрые переходы"
            description="Другие разделы управления сетью"
            actions={[
              {
                id: "traffic",
                title: "Трафик",
                description: "Приём, передача и потоки IPFIX",
                href: "/traffic",
                icon: <ActivityIcon />,
                iconClassName: "text-info",
              },
              {
                id: "map",
                title: "Карта сети",
                description: "Топология GRE и WAN",
                href: "/network-map",
                icon: <MapIcon />,
                iconClassName: "text-primary",
              },
              {
                id: "filters",
                title: "Фильтры",
                description: "Правила обхода и списки",
                href: "/filters",
                icon: <FilterIcon />,
                iconClassName: "text-info",
              },
              {
                id: "firewall",
                title: "Firewall",
                description: "Цепочки filter / nat",
                href: "/firewall",
                icon: <ShieldIcon />,
                iconClassName: "text-warning",
              },
              {
                id: "backups",
                title: "Бэкапы",
                description: "Снапшоты и расписание",
                href: "/backups",
                icon: <HardDriveIcon />,
                iconClassName: "text-muted-foreground",
              },
              {
                id: "bgp",
                title: "BGP",
                description: "Сессии и префиксы",
                href: "/bgp",
                icon: <GitMergeIcon />,
                iconClassName: "text-primary",
              },
            ]}
          />

        </div>
      </div>
    </div>
  )
}