"use client"

import { DataGridContainer, DataGridScrollArea, DataGridTable, dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"

import { useEffect, useMemo, useState } from "react"
import {
  type ColumnDef,
  useTable,
} from "@tanstack/react-table"
import type { FullRoute } from "@/lib/route-optimizer-data"
import { Flag } from "@/components/flag"
import { cn } from "@/lib/utils"
import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
import {
  DATA_GRID_CELL_PAD,
  DATA_GRID_CELL_PAD_FIRST,
  DATA_GRID_CELL_PAD_LAST,
} from "@/components/data-grids/shared/data-grid-layout"
import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
import { ArrowRightIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"

function Chip({ children, color }: { children: React.ReactNode; color?: string }) {
  return (
    <span
      className={cn(
        "inline-flex items-center rounded px-1.5 py-0.5 text-[11px] font-medium border",
        color ?? "bg-muted text-muted-foreground border-border",
      )}
    >
      {children}
    </span>
  )
}

function ProbChip({ prob, best }: { prob: number; best?: boolean }) {
  return (
    <Chip
      color={
        best
          ? "bg-success/10 text-success  border-success/20"
          : "bg-muted text-muted-foreground border-border"
      }
    >
      {prob} б.
    </Chip>
  )
}

function ConfChip({ conf }: { conf: string }) {
  const map: Record<string, string> = {
    HIGH: "bg-info/10 text-info  border-info/20",
    MEDIUM: "bg-warning/10 text-warning  border-warning/20",
    LOW: "bg-destructive/10 text-destructive  border-destructive/20",
  }
  return <Chip color={map[conf] ?? map.LOW}>{conf}</Chip>
}

interface RouteOptimizerFullRoutesDataGridProps {
  routes: FullRoute[]
  bestId?: string
}

function RouteOptimizerFullRoutesDataGrid({
  routes,
  bestId,
}: RouteOptimizerFullRoutesDataGridProps) {
  const [expanded, setExpanded] = useState(false)
  const visibleRoutes = expanded ? routes : routes.slice(0, 5)

  const indexed = useMemo(
    () => visibleRoutes.map((r, index) => ({ ...r, _index: index })),
    [visibleRoutes],
  )

  const columns = useMemo<ColumnDef<DataGridFeatures, FullRoute & { _index: number }>[]>(
    () => [
      {
        id: "index",
        size: 112,
        header: () => <span className="text-[11px] font-medium text-muted-foreground"># Маршрут</span>,
        enableSorting: false,
        cell: ({ row }) => {
          const isBest = row.original.id === bestId || row.original._index === 0
          return (
            <div className="flex items-center gap-2">
              <span className="text-[10px] font-mono text-muted-foreground min-w-6 tabular-nums">
                {row.original._index + 1}
              </span>
              {isBest && (
                <span className="text-[9px] font-bold uppercase tracking-wide text-success  bg-success/10 border border-success/20 px-1.5 py-0.5 rounded">
                  Лучший
                </span>
              )}
            </div>
          )
        },
        meta: { headerClassName: DATA_GRID_CELL_PAD_FIRST, cellClassName: DATA_GRID_CELL_PAD_FIRST },
      },
      {
        id: "wanJh",
        size: 264,
        header: () => <span className="text-[11px] font-medium text-muted-foreground">WAN → JH</span>,
        enableSorting: false,
        cell: ({ row }) => {
          const r = row.original
          return (
            <div className="flex items-center gap-1.5 text-xs">
              <span className="font-mono font-semibold text-info ">{r.wan.name}</span>
              <ArrowRightIcon aria-hidden="true" className="size-3 text-muted-foreground shrink-0" />
              <div>
                <div className="font-medium">{r.jh.label}</div>
                <div className="font-mono text-[10px] text-muted-foreground">
                  Модель: {r.hw.pingMs} мс · ↓{r.hw.dlMbps} ↑{r.hw.ulMbps}
                </div>
              </div>
            </div>
          )
        },
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "jhExit",
        size: 240,
        header: () => <span className="text-[11px] font-medium text-muted-foreground">JH → Exit</span>,
        enableSorting: false,
        cell: ({ row }) => {
          const r = row.original
          return (
            <div className="text-xs">
              <div className="flex items-center gap-1 font-medium">
                <Flag code={r.exit.country} />
                {r.exit.label}
                <span className="text-[10px] text-muted-foreground">({r.exit.site})</span>
              </div>
              <div className="font-mono text-[10px] text-muted-foreground">
                Модель: {r.je.pingMs} мс · ↓{r.je.dlMbps} ↑{r.je.ulMbps}
              </div>
            </div>
          )
        },
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "totalPing",
        size: 144,
        accessorFn: (row) => row.hw.pingMs + row.je.pingMs,
        header: ({ column }) => (
          <DataGridSortHeader column={column} title="Ping модели" className="mx-auto" />
        ),
        cell: ({ row }) => {
          const totalPing = row.original.hw.pingMs + row.original.je.pingMs
          return (
            <span
              className={cn(
                "font-mono text-xs text-center block",
                totalPing < 40
                  ? "text-success "
                  : totalPing < 80
                    ? "text-warning "
                    : "text-destructive",
              )}
            >
              {totalPing} мс
            </span>
          )
        },
        meta: {
          headerTitle: "Ping модели",
          headerClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
        },
      },
      {
        id: "bw",
        size: 144,
        header: () => (
          <span className="text-[11px] font-medium text-muted-foreground block text-center">
            BW (мин)
          </span>
        ),
        enableSorting: false,
        cell: ({ row }) => {
          const r = row.original
          const minDl = Math.min(r.hw.dlMbps, r.je.dlMbps)
          const minUl = Math.min(r.hw.ulMbps, r.je.ulMbps)
          return (
            <div className="font-mono text-xs text-muted-foreground text-center">
              <div>↓{minDl}</div>
              <div>↑{minUl}</div>
            </div>
          )
        },
        meta: {
          headerClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
        },
      },
      {
        id: "score",
        size: 80,
        accessorKey: "score",
        header: ({ column }) => (
          <DataGridSortHeader column={column} title="Score" className="mx-auto" />
        ),
        cell: ({ row }) => (
          <span className="font-mono text-xs font-semibold text-center block">
            {row.original.score}
          </span>
        ),
        meta: {
          headerTitle: "Score",
          headerClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
        },
      },
      {
        id: "prob",
        size: 104,
        accessorKey: "probabilityOptimal",
        header: ({ column }) => (
          <DataGridSortHeader column={column} title="Индекс" className="mx-auto" />
        ),
        cell: ({ row }) => {
          const isBest = row.original.id === bestId || row.original._index === 0
          return (
            <div className="flex justify-center">
              <ProbChip prob={row.original.probabilityOptimal} best={isBest} />
            </div>
          )
        },
        meta: {
          headerTitle: "Индекс",
          headerClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
        },
      },
      {
        id: "confidence",
        size: 176,
        accessorKey: "confidence",
        header: ({ column }) => (
          <DataGridSortHeader column={column} title="Категория модели" className="mx-auto" />
        ),
        cell: ({ row }) => (
          <div className="flex justify-center">
            <ConfChip conf={row.original.confidence} />
          </div>
        ),
        meta: {
          headerTitle: "Категория модели",
          headerClassName: DATA_GRID_CELL_PAD_LAST,
          cellClassName: cn(DATA_GRID_CELL_PAD_LAST, "text-center"),
        },
      },
    ],
    [bestId],
  )

  const table = useTable({
    features: dataGridFeatures,
    manualPagination: false,
    autoResetPageIndex: false,
    initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["index"], end: [] } },
    data: indexed,
    columns,
    getRowId: (row) => row.id,
  })

  const { pageIndex, pageSize } = table.state.pagination
  useEffect(() => {
    const lastPage = Math.max(0, Math.ceil(indexed.length / pageSize) - 1)
    if (pageIndex > lastPage) table.setPageIndex(lastPage)
  }, [indexed.length, pageIndex, pageSize, table])

  return (
    <section aria-label="Полные маршруты оптимизатора" className="min-w-0">
      <DataGridShell
        table={table}
        recordCount={visibleRoutes.length}
        pagination={expanded && (visibleRoutes.length > 50 || pageSize !== 50)}
        tableClassNames={{
          headerRow: "border-b bg-muted/20",
          bodyRow: cn("group/row hover:bg-muted/30", "has-[[data-route-best=true]]:bg-success/5"),
        }}
        tableLayout={{ dense: true, width: "fixed", columnsPinnable: true }}
      >
        <DataGridContainer border={false}>
          <DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
        </DataGridContainer>
      </DataGridShell>
      {routes.length > 5 && (
        <button
          type="button"
          onClick={() => { setExpanded((v) => !v); table.setPageIndex(0) }}
          className="w-full min-h-11 py-2 text-xs text-muted-foreground hover:text-foreground transition-colors border-t flex items-center justify-center gap-1"
        >
          {expanded ? (
            <>
              <ChevronUpIcon aria-hidden="true" className="size-3" />
              Свернуть
            </>
          ) : (
            <>
              <ChevronDownIcon aria-hidden="true" className="size-3" />
              {routes.length > 50 ? `Открыть все ${routes.length} комбинаций` : `Показать все ${routes.length} комбинаций`}
            </>
          )}
        </button>
      )}
    </section>
  )
}

export { RouteOptimizerFullRoutesDataGrid, type RouteOptimizerFullRoutesDataGridProps }