"use client"

import { Link, usePathname, useRouter } from "@/i18n/navigation"
import { type ColumnDef } from "@tanstack/react-table"
import { ExternalLinkIcon, PencilIcon, Trash2Icon } from "lucide-react"
import { useLocale, useTranslations } from "next-intl"
import { useSearchParams } from "next/navigation"
import { useCallback, useMemo } from "react"

import { QueryState } from "@/components/api/query-state"
import { MediaPreview } from "@/components/markatty/media-preview"
import { PageHeader } from "@/components/page-header"
import { SuperDataTable } from "@/components/super-data-table"
import { Button } from "@/components/ui/button"
import { useClients, useDeleteClient } from "@/hooks/api/use-clients"
import {
  displayClientLink,
  groupClientsIntoPairs,
  type ClientPair,
} from "@/lib/api/clients"

function formatDate(value: string, locale: string, fallback: string) {
  if (!value.trim()) return fallback
  const date = new Date(value)
  if (Number.isNaN(date.getTime())) return value
  return date.toLocaleString(locale, {
    dateStyle: "medium",
    timeStyle: "short",
  })
}

export function ClientsTable() {
  const t = useTranslations("Clients")
  const tc = useTranslations("Common")
  const locale = useLocale()
  const searchParams = useSearchParams()
  const router = useRouter()
  const pathname = usePathname()
  const { data = [], isLoading, isError, error } = useClients()
  const deleteClient = useDeleteClient()
  const empty = "—"

  const pairs = useMemo(() => groupClientsIntoPairs(data), [data])

  const handleDelete = useCallback(
    async (pair: ClientPair) => {
      if (!window.confirm(t("confirm.delete", { name: pair.name }))) return
      const ids = [pair.en?.id, pair.ar?.id].filter(
        (id): id is string => Boolean(id)
      )
      for (const id of ids) {
        await deleteClient.mutateAsync(id)
      }
    },
    [deleteClient, t]
  )

  const handleSearch = useCallback(
    (value: string) => {
      const current = searchParams.get("search") ?? ""
      if (current === value) return
      const qs = value ? `?search=${encodeURIComponent(value)}` : ""
      router.replace(`${pathname}${qs}`, { scroll: false })
    },
    [pathname, router, searchParams]
  )

  const columns = useMemo<ColumnDef<ClientPair>[]>(
    () => [
      {
        accessorKey: "name",
        header: t("columns.name"),
        cell: ({ row }) => (
          <Link
            className="font-medium hover:underline"
            href={`/clients/${row.original.primaryId}/edit`}
          >
            {row.original.name}
          </Link>
        ),
      },
      {
        accessorKey: "logoUrl",
        header: t("columns.logo"),
        cell: ({ row }) => (
          <MediaPreview
            src={row.original.logoUrl}
            label={`${row.original.name} logo`}
          />
        ),
      },
      {
        accessorKey: "link",
        header: t("columns.link"),
        cell: ({ row }) => {
          const url = displayClientLink(row.original.link)
          if (!url) return empty
          return (
            <Link
              href={url}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 font-medium hover:underline"
            >
              <ExternalLinkIcon className="size-4" />
              {t("columns.preview")}
            </Link>
          )
        },
      },
      {
        accessorKey: "categoryEn",
        header: t("columns.categoryEn"),
        cell: ({ row }) => row.original.categoryEn.trim() || empty,
      },
      {
        accessorKey: "categoryAr",
        header: t("columns.categoryAr"),
        cell: ({ row }) => row.original.categoryAr.trim() || empty,
      },
      {
        accessorKey: "createdAt",
        header: t("columns.createdAt"),
        cell: ({ row }) => formatDate(row.original.createdAt, locale, empty),
      },
      {
        id: "edit",
        header: tc("actions.edit"),
        cell: ({ row }) => (
          <Button variant="ghost" size="icon" className="size-8" asChild>
            <Link
              href={`/clients/${row.original.primaryId}/edit`}
              aria-label={`${tc("actions.edit")} ${row.original.name}`}
            >
              <PencilIcon className="size-4" />
            </Link>
          </Button>
        ),
      },
      {
        id: "delete",
        header: tc("actions.delete"),
        cell: ({ row }) => (
          <Button
            variant="ghost"
            size="icon"
            className="size-8 text-destructive hover:text-destructive"
            aria-label={`${tc("actions.delete")} ${row.original.name}`}
            disabled={deleteClient.isPending}
            onClick={() => void handleDelete(row.original)}
          >
            <Trash2Icon className="size-4" />
          </Button>
        ),
      },
    ],
    [t, tc, locale, empty, deleteClient.isPending, handleDelete]
  )

  return (
    <div className="flex flex-col gap-4 py-4 md:gap-6 md:py-6">
      <PageHeader
        title={t("title")}
        actions={
          <Button asChild>
            <Link href="/clients/create">{t("actions.addClient")}</Link>
          </Button>
        }
      />
      <QueryState isLoading={isLoading} isError={isError} error={error}>
        <SuperDataTable
          data={pairs}
          columns={columns}
          searchKey="name"
          searchPlaceholder={t("placeholders.searchClients")}
          defaultSearch={searchParams.get("search") ?? ""}
          onSearch={handleSearch}
        />
      </QueryState>
    </div>
  )
}