"use client"

import { useEffect, useMemo, useState } from "react"
import type { ColumnDef } from "@tanstack/react-table"
import { ExternalLinkIcon } from "lucide-react"
import { useTranslations } from "next-intl"
import { useSearchParams } from "next/navigation"

import { QueryState } from "@/components/api/query-state"
import { PageHeader } from "@/components/page-header"
import { SuperDataTable } from "@/components/super-data-table"
import { TenantsSyncControl } from "@/components/tenants/tenants-sync-control"
import { StatusBadge } from "@/components/ui/status-badge"
import { useTenantsList, useInvalidateTenants } from "@/hooks/api/use-tenants"
import { useTenantRowActions } from "@/hooks/use-tenant-row-actions"
import type { TenantRow } from "@/lib/api/tenants"
import { Link, usePathname, useRouter } from "@/i18n/navigation"

export default function Page() {
  const t = useTranslations("Tenants")
  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 invalidateTenants = useInvalidateTenants()
  const { actionsForRow, assignPlanDialog } = useTenantRowActions(() => {
    void invalidateTenants()
  })

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

  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 columns = useMemo<ColumnDef<TenantRow>[]>(
    () => [
      {
        accessorKey: "storeId",
        header: t("columns.storeId"),
        cell: ({ row }) => (
          <span className="font-mono font-medium text-xs">{row.original.storeId}</span>
        ),
      },
      {
        accessorKey: "name",
        header: t("columns.name"),
        cell: ({ row }) => (
          <Link
            className="font-medium hover:underline"
            href={`/tenants/${row.original.id}`}
          >
            {row.original.name}
          </Link>
        ),
      },
      {
        accessorKey: "email",
        header: t("columns.email"),
        cell: ({ row }) => (
          <span className="text-sm">{row.original.email}</span>
        ),
      },
      {
        accessorKey: "domain",
        header: t("columns.domain"),
        cell: ({ row }) => (
          <a
            className="flex items-center gap-2 font-medium text-primary hover:underline underline-offset-4"
            href={`https://${row.original.domain}`}
            rel="noreferrer"
            target="_blank"
          >
            <ExternalLinkIcon className="size-4" />
            {row.original.domain}
          </a>
        ),
      },
      {
        accessorKey: "cname",
        header: t("columns.cname"),
        cell: ({ row }) => (
          row.original.cname !== "—" ? (
            <a
              className="flex items-center gap-2 font-medium text-primary hover:underline underline-offset-4"
              href={`https://${row.original.cname}`}
              rel="noreferrer"
              target="_blank"
            >
              <ExternalLinkIcon className="size-4" />
              {row.original.cname}
            </a>
          ) :
            <span className="text-sm">-</span>
        ),
      },
      {
        accessorKey: "createdAt",
        header: t("columns.createdAt"),
        cell: ({ row }) => (
          <time className="text-sm whitespace-nowrap" dateTime={row.original.createdAt}>
            {row.original.createdAt || "—"}
          </time>
        ),
      },
      {
        accessorKey: "status",
        header: t("columns.status"),
        cell: ({ row }) => (
          <StatusBadge
            status={row.original.status}
            label={t(`status.${row.original.status}`)}
          />
        ),
      },
    ],
    [t]
  )

  return (
    <div className="flex flex-col gap-4 md:gap-6 py-4 md:py-6">
      <PageHeader title={t("title")} actions={<TenantsSyncControl />} />

      {assignPlanDialog}

      <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: tc("placeholders.searchTenants"),
              ariaLabel: tc("placeholders.searchTenants"),
            }}
            pageStatus={{ current: page, last: lastPage, total }}
            serverPagination={{
              page,
              lastPage,
              perPage,
              disabled: query.isFetching,
              onPageChange: setPage,
              onPerPageChange: (next) => {
                setPerPage(next)
                setPage(1)
              },
            }}
            actionsForRow={actionsForRow}
          />
        </div>
      </QueryState>
    </div>
  )
}