"use client"

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

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 { StatusBadge } from "@/components/ui/status-badge"
import { Button } from "@/components/ui/button"
import { useDeleteTestimonial, useTestimonials } from "@/hooks/api/use-testimonials"
import type { TestimonialRecord } from "@/lib/markatty"

function quotePreview(quote: string): string {
  return quote.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim()
}

export function TestimonialsTable({ initialData }: { initialData?: TestimonialRecord[] }) {
  const t = useTranslations("Testimonials")
  const tc = useTranslations("Common")
  const searchParams = useSearchParams()
  const router = useRouter()
  const pathname = usePathname()
  const { data = [], isLoading, isError, error } = useTestimonials(initialData)
  const deleteTestimonial = useDeleteTestimonial()

  const handleDelete = useCallback(
    (testimonial: TestimonialRecord) => {
      if (!window.confirm(t("confirm.delete", { name: testimonial.name }))) return
      deleteTestimonial.mutate(testimonial.id)
    },
    [deleteTestimonial, t]
  )

  const columns = useMemo<ColumnDef<TestimonialRecord>[]>(
    () => [
      {
        accessorKey: "name",
        header: t("columns.name"),
        cell: ({ row }) => (
          <div className="flex items-center gap-3">
            <MediaPreview
              src={row.original.avatarUrl}
              label={`${row.original.name} avatar`}
              className="rounded-full"
            />
            <Link
              className="font-medium hover:underline"
              href={`/testimonials/${row.original.id}/edit`}
            >
              {row.original.name}
            </Link>
          </div>
        ),
      },
      { accessorKey: "roleCompany", header: t("columns.roleCompany") },
      {
        accessorKey: "quote",
        header: t("columns.quote"),
        cell: ({ row }) => (
          <div className="max-w-md truncate">{quotePreview(row.original.quote)}</div>
        ),
      },
      { accessorKey: "rating", header: t("columns.rating") },
      {
        accessorKey: "status",
        header: t("columns.status"),
        cell: ({ row }) => (
          <StatusBadge
            status={row.original.status}
            label={t(`status.${row.original.status}`)}
          />
        ),
      },
      {
        id: "edit",
        header: tc("actions.edit"),
        cell: ({ row }) => (
          <Button variant="ghost" size="icon" className="size-8" asChild>
            <Link
              href={`/testimonials/${row.original.id}/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={deleteTestimonial.isPending}
            onClick={() => handleDelete(row.original)}
          >
            <Trash2Icon className="size-4" />
          </Button>
        ),
      },
    ],
    [t, tc, deleteTestimonial.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="/testimonials/create">{t("actions.addTestimonial")}</Link>
          </Button>
        }
      />
      <QueryState isLoading={isLoading} isError={isError} error={error}>
        <SuperDataTable
          data={data}
          columns={columns}
          searchKey="name"
          searchPlaceholder={t("placeholders.searchTestimonials")}
          defaultSearch={searchParams.get("search") ?? ""}
          onSearch={(value) => {
            const qs = value ? `?search=${encodeURIComponent(value)}` : ""
            router.replace(`${pathname}${qs}`, { scroll: false })
          }}
        />
      </QueryState>
    </div>
  )
}