"use client"

import { useEffect, useMemo } from "react"
import { DataGridContainer, DataGridScrollArea, DataGridTable, dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
import {
  type ColumnDef,
  useTable,
} from "@tanstack/react-table"
import type { Server, VxlanTunnel } from "@/lib/data"
import { Flag } from "@/components/flag"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
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 { EmptyState } from "@/components/empty-state"
import {
  CodeXmlIcon,
  MoreHorizontalIcon,
  NetworkIcon,
} from "lucide-react"

interface VxlanDataGridProps {
  tunnels: VxlanTunnel[]
  servers: Server[]
  failedServerIds?: string[]
  onExport: (tunnel: VxlanTunnel) => void
}

function VxlanDataGrid({ tunnels, servers, onExport, failedServerIds = [] }: VxlanDataGridProps) {
  const serverMap = useMemo(
    () => new Map(servers.map((s) => [s.id, s])),
    [servers],
  )

  const columns = useMemo<ColumnDef<DataGridFeatures, VxlanTunnel>[]>(
    () => [
      {
        id: "name",
        size: 176,
        accessorKey: "name",
        header: ({ column }) => (
          <DataGridSortHeader column={column} title="Имя / VTEP" className="ml-1" />
        ),
        cell: ({ row }) => {
          const t = row.original
          return (
            <div className="min-w-0 flex items-start gap-2">
              <span
                className={cn(
                  "size-2 rounded-full shrink-0 mt-1.5",
                  failedServerIds.includes(t.serverId) ? "bg-muted-foreground" : t.status === "up" ? "bg-success" : "bg-destructive",
                )}
              />
              <div className="min-w-0">
                <p className="font-mono font-medium text-sm break-all">{t.name}</p>
                <p className="text-[11px] text-muted-foreground font-mono break-all">VTEP: {t.vtepIp}</p>
              </div>
            </div>
          )
        },
        meta: {
          headerTitle: "Имя / VTEP",
          headerClassName: DATA_GRID_CELL_PAD_FIRST,
          cellClassName: DATA_GRID_CELL_PAD_FIRST,
        },
      },
      {
        id: "server",
        size: 128,
        accessorKey: "serverId",
        header: ({ column }) => <DataGridSortHeader column={column} title="Сервер" />,
        cell: ({ row }) => {
          const srv = serverMap.get(row.original.serverId)
          if (!srv) return <span className="text-muted-foreground">—</span>
          return (
            <div className="flex items-center gap-1.5 text-xs text-muted-foreground min-w-0">
              <Flag code={srv.country} size={12} />
              <span className="font-mono truncate">{srv.name}</span>
            </div>
          )
        },
        meta: {
          headerTitle: "Сервер",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "vni",
        size: 80,
        accessorKey: "vni",
        header: ({ column }) => <DataGridSortHeader column={column} title="VNI" />,
        cell: ({ row }) => <span className="font-mono text-sm">{row.original.vni}</span>,
        meta: {
          headerTitle: "VNI",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
        },
      },
      {
        id: "dstPort",
        size: 104,
        accessorKey: "dstPort",
        header: ({ column }) => <DataGridSortHeader column={column} title="Port" />,
        cell: ({ row }) => <span className="font-mono text-sm">{row.original.dstPort}</span>,
        meta: {
          headerTitle: "Port",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
        },
      },
      {
        id: "remoteVteps",
        size: 160,
        header: () => (
          <span className="text-xs font-medium text-muted-foreground">Remote</span>
        ),
        enableSorting: false,
        cell: ({ row }) => (
          <span className="font-mono text-sm text-center block">{row.original.remoteVteps.length}</span>
        ),
        meta: {
          headerTitle: "Remote",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
        },
      },
      {
        id: "arpProxy",
        size: 104,
        accessorKey: "arpProxy",
        header: () => <span className="sr-only">ARP</span>,
        enableSorting: false,
        cell: ({ row }) => (
          <span
            className={cn(
              "text-[10px] font-mono px-1.5 py-0.5 rounded",
              row.original.arpProxy
                ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
                : "bg-muted text-muted-foreground",
            )}
          >
            ARP {row.original.arpProxy ? "✓" : "✗"}
          </span>
        ),
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "macLearning",
        size: 128,
        accessorKey: "macLearning",
        header: () => <span className="sr-only">MAC</span>,
        enableSorting: false,
        cell: ({ row }) => (
          <span
            className={cn(
              "text-[10px] font-mono px-1.5 py-0.5 rounded",
              row.original.macLearning
                ? "bg-sky-500/10 text-sky-600 dark:text-sky-400"
                : "bg-muted text-muted-foreground",
            )}
          >
            MAC {row.original.macLearning ? "✓" : "✗"}
          </span>
        ),
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "status",
        size: 104,
        accessorKey: "status",
        header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
        cell: ({ row }) => (
          <span
            className={cn(
              "text-[11px] font-mono px-2 py-0.5 rounded border whitespace-nowrap",
              failedServerIds.includes(row.original.serverId)
                ? "bg-muted text-muted-foreground border-border"
                : row.original.status === "up"
                ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
                : "bg-red-500/10 text-red-500 border-red-500/20",
            )}
          >
            {failedServerIds.includes(row.original.serverId) ? "Неизвестно" : row.original.status === "up" ? "UP" : "DOWN"}
          </span>
        ),
        meta: {
          headerTitle: "Статус",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "actions",
        header: () => <span className="sr-only">Действия</span>,
        cell: ({ row }) => {
          const tunnel = row.original
          return (
            <div className="flex justify-end">
              <DropdownMenu>
                <DropdownMenuTrigger
                  render={
                    <Button
                      type="button"
                      variant="outline"
                      size="icon"
                      className={cn(
                        "size-11 shrink-0 border-border/60 bg-background/80 text-muted-foreground shadow-none",
                        "transition-colors",
                        "data-popup-open:opacity-100",
                      )}
                      aria-label={`Действия: ${tunnel.name}`}
                    >
                      <MoreHorizontalIcon className="size-4" />
                    </Button>
                  }
                />
                <DropdownMenuContent side="bottom" align="end">
                  <DropdownMenuItem onClick={() => onExport(tunnel)}>
                    <CodeXmlIcon className="size-4" />
                    Экспорт .rsc
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          )
        },
        enableSorting: false,
        size: 72,
        meta: {
          headerClassName: DATA_GRID_CELL_PAD_LAST,
          cellClassName: DATA_GRID_CELL_PAD_LAST,
        },
      },
    ],
    [onExport, serverMap, failedServerIds],
  )

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

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

  if (tunnels.length === 0) {
    return (
      <EmptyState
        icon={<NetworkIcon className="size-4" />}
        title="Нет VXLAN-туннелей"
        description="Измените поиск или проверьте конфигурацию VXLAN в RouterOS"
        className="border-0 py-16"
      />
    )
  }

  return (
    <DataGridShell
      table={table}
      recordCount={tunnels.length}
      pagination={tunnels.length > 50 || pageSize !== 50}
      tableLayout={{ dense: true, columnsPinnable: true }}
      tableClassNames={{
        headerRow: "border-b border-border",
        bodyRow: cn("group/row", "[&[data-disabled=true]]:opacity-50"),
      }}
    >
      <DataGridContainer border={false} className="w-full rounded-none border-0">
        <DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
      </DataGridContainer>
    </DataGridShell>
  )
}

export { VxlanDataGrid, type VxlanDataGridProps }