EvoBGP/apps/web/src/components/blocks/settings-14/components/api-integrations-grid.tsx

"use client"

import { useMemo, useState } from "react"
import { DataGrid } from "@/components/reui/data-grid/data-grid"
import { DataGridPagination } from "@/components/reui/data-grid/data-grid-pagination"
import { DataGridScrollArea } from "@/components/reui/data-grid/data-grid-scroll-area"
import { DataGridTable } from "@/components/reui/data-grid/data-grid-table"
import {
  Frame,
  FrameDescription,
  FrameFooter,
  FrameHeader,
  FramePanel,
  FrameTitle,
} from "@/components/reui/frame"
import {
  getCoreRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
  type PaginationState,
  type SortingState,
  type VisibilityState,
} from "@tanstack/react-table"
import { toast } from "sonner"

import { Button } from "@evobgp/ui/components/button"
import { Switch } from "@evobgp/ui/components/switch"
import { TooltipProvider } from "@evobgp/ui/components/tooltip"
import { createColumns } from "./columns"
import { API_INTEGRATIONS } from "./data"
import { BriefcaseBusinessIcon } from "lucide-react"

// ── Main component ──

export function ApiIntegrationsGrid() {
  const [rows, setRows] = useState(API_INTEGRATIONS)
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  })
  const [sorting, setSorting] = useState<SortingState>([
    { id: "name", desc: false },
  ])
  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})

  const pauseAll = rows.every((row) => !row.enabled)

  const handleToggle = (id: string, enabled: boolean) => {
    setRows((current) =>
      current.map((row) => (row.id === id ? { ...row, enabled } : row))
    )
  }

  const handlePauseAllChange = (checked: boolean) => {
    const nextEnabled = !checked
    setRows((current) =>
      current.map((row) => ({ ...row, enabled: nextEnabled }))
    )
    toast.message(
      checked ? "All integrations paused" : "Integrations resumed",
      {
        description: checked
          ? "API traffic is temporarily disabled for every listed integration."
          : "The listed integrations can receive traffic again.",
      }
    )
  }

  const columns = useMemo(() => createColumns({ onToggle: handleToggle }), [])

  const table = useReactTable({
    data: rows,
    columns,
    getRowId: (row) => row.id,
    state: {
      pagination,
      sorting,
      columnVisibility,
    },
    onPaginationChange: setPagination,
    onSortingChange: setSorting,
    onColumnVisibilityChange: setColumnVisibility,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
  })

  return (
    <TooltipProvider delay={200}>
      {/* Table */}
      <DataGrid
        table={table}
        recordCount={rows.length}
        tableLayout={{
          columnsResizable: true,
          columnsVisibility: true,
          headerSticky: true,
          dense: true,
        }}
      >
        <Frame className="w-full max-w-6xl">
          <FrameHeader className="flex-row items-center justify-between px-2! py-2.5!">
            <div className="space-y-px">
              <FrameTitle>API Integrations</FrameTitle>
              <FrameDescription>
                Oversee endpoints, key rotation, and traffic availability.
              </FrameDescription>
            </div>

            <div className="flex flex-wrap items-center gap-2">
              <div className="flex items-center gap-2">
                <span className="text-muted-foreground hidden text-sm md:inline">
                  Pause all
                </span>
                <Switch
                  checked={pauseAll}
                  onCheckedChange={handlePauseAllChange}
                  aria-label="Pause all integrations"
                />
              </div>

              <Button
                variant="outline"
                onClick={() =>
                  toast.info("Positions", {
                    description:
                      "Review which integration seats are currently assigned across the workspace.",
                  })
                }
              >
                <BriefcaseBusinessIcon aria-hidden="true" />
                <span className="hidden md:inline">Positions</span>
              </Button>
            </div>
          </FrameHeader>

          <FramePanel className="p-0!">
            <DataGridScrollArea>
              <DataGridTable />
            </DataGridScrollArea>
          </FramePanel>

          <FrameFooter className="px-2! py-2.5!">
            <DataGridPagination />
          </FrameFooter>
        </Frame>
      </DataGrid>
    </TooltipProvider>
  )
}