"use client"

import { useCallback, useEffect, useMemo, useState } from "react"
import type { ColumnDef } from "@tanstack/react-table"
import { PencilIcon, Trash2Icon } from "lucide-react"
import { useTranslations } from "next-intl"
import { useSearchParams } from "next/navigation"
import { toast } from "sonner"

import { QueryState } from "@/components/api/query-state"
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 { useDeleteFaq, useFaqsList } from "@/hooks/api/use-faqs"
import { Link, usePathname, useRouter } from "@/i18n/navigation"
import { ApiError } from "@/lib/api/errors"
import type { FaqRecord } from "@/lib/api/faqs"

export default function Page() {
  const t = useTranslations("Faqs")
  const tc = useTranslations("Common")
  const searchParams = useSearchParams()
  const router = useRouter()
  const pathname = usePathname()

  const [page, setPage] = useState(1)
  const [perPage, setPerPage] = useState(15)
  const [search, setSearch] = useState(searchParams.get("search") ?? "")
  const [debouncedSearch, setDebouncedSearch] = useState(searchParams.get("search") ?? "")

  const query = useFaqsList({ page, perPage, search: debouncedSearch })
  const deleteFaq = useDeleteFaq()
  const rows = query.data?.items ?? []
  const lastPage = Math.max(1, query.data?.meta.lastPage ?? 1)
  const total = query.data?.meta.total ?? 0

  const showApiError = useCallback(
    (e: unknown) => {
      toast.error(e instanceof ApiError ? e.message : tc("api.errorFallback"))
    },
    [tc]
  )

  useEffect(() => {
    const handle = setTimeout(() => {
      setDebouncedSearch(search.trim())
    }, 600)
    return () => clearTimeout(handle)
  }, [search])

  useEffect(() => {
    const qs = debouncedSearch ? `?search=${encodeURIComponent(debouncedSearch)}` : ""
    router.replace(`${pathname}${qs}`, { scroll: false })
  }, [debouncedSearch, pathname, router])

  const handleDelete = useCallback(
    async (faq: FaqRecord) => {
      if (!window.confirm(t("confirm.delete", { name: faq.question }))) return
      try {
        await deleteFaq.mutateAsync(faq.id)
        toast.success(t("toast.deleted"))
      } catch (e) {
        showApiError(e)
      }
    },
    [deleteFaq, showApiError, t]
  )

  const columns = useMemo<ColumnDef<FaqRecord>[]>(
    () => [
      {
        accessorKey: "question",
        header: t("columns.question"),
        cell: ({ row }) => (
          <div className="max-w-xl font-medium">{row.original.question}</div>
        ),
      },
      { accessorKey: "position", header: t("columns.position") },
      {
        accessorKey: "status",
        header: t("columns.active"),
        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={`/faqs/${row.original.id}/edit`}
              aria-label={`${tc("actions.edit")} ${row.original.question}`}
            >
              <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.question}`}
            disabled={deleteFaq.isPending}
            onClick={() => void handleDelete(row.original)}
          >
            <Trash2Icon className="size-4" />
          </Button>
        ),
      },
    ],
    [deleteFaq.isPending, handleDelete, t, tc]
  )

  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="/faqs/create">{t("actions.addFaq")}</Link>
          </Button>
        }
      />

      <QueryState
        isLoading={query.isLoading}
        isError={query.isError}
        error={query.error}
      >
        <div className="flex flex-col gap-3">
          <SuperDataTable
            data={rows}
            columns={columns}
            disableClientPagination
            loading={query.isFetching && !query.isLoading}
            serverSearch={{
              value: search,
              onChange: (value) => {
                setSearch(value)
                setPage(1)
              },
              placeholder: t("placeholders.searchFaqs"),
              ariaLabel: t("placeholders.searchFaqs"),
            }}
            pageStatus={{ current: page, last: lastPage, total }}
            serverPagination={{
              page,
              lastPage,
              perPage,
              disabled: query.isFetching,
              onPageChange: setPage,
              onPerPageChange: (next) => {
                setPerPage(next)
                setPage(1)
              },
            }}
          />
        </div>
      </QueryState>
    </div>
  )
}