"use client"

import { useCallback, useEffect, useMemo, useState } from "react"
import type { ColumnDef } from "@tanstack/react-table"
import {
  MessageSquareReplyIcon,
  EyeIcon,
  Trash2Icon,
  CircleCheckIcon,
} from "lucide-react"
import { useLocale, 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 { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { ApiError } from "@/lib/api/errors"
import {
  closeTicket,
  deleteTicket,
  isTicketClosed,
  type SupportTicketRow,
} from "@/lib/api/support-tickets"
import { useSupportTicketsList, useInvalidateSupportTickets } from "@/hooks/api/use-support-tickets"
import type { SuperRowAction } from "@/components/super-data-table"
import {
  formatTicketDate,
  ticketPriorityLabel,
  ticketPriorityVariant,
  ticketStatusLabel,
} from "@/lib/support-ticket-display"
import { Link, usePathname, useRouter } from "@/i18n/navigation"
import { cn } from "@/lib/utils"

export default function TicketsPage() {
  const t = useTranslations("Tickets")
  const tc = useTranslations("Common")
  const locale = useLocale()
  const emptyDate = "—"
  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 [statusFilter, setStatusFilter] = useState("all")
  const [priorityFilter, setPriorityFilter] = useState("all")
  const [readFilter, setReadFilter] = useState("all")

  const apiStatus = statusFilter === "all" ? "" : statusFilter
  const apiPriority = priorityFilter === "all" ? "" : priorityFilter
  const apiReadMsgAgent = readFilter === "all" ? "" : readFilter

  const invalidateTickets = useInvalidateSupportTickets()
  const query = useSupportTicketsList({
    page,
    perPage,
    search: debouncedSearch,
    status: apiStatus,
    priority: apiPriority,
    readMsgAgent: apiReadMsgAgent,
  })
  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 isFiltered =
    statusFilter !== "all" ||
    priorityFilter !== "all" ||
    readFilter !== "all" ||
    search.trim().length > 0

  const clearFilters = () => {
    setStatusFilter("all")
    setPriorityFilter("all")
    setReadFilter("all")
    setSearch("")
    setDebouncedSearch("")
    setPage(1)
  }

  const columns = useMemo<ColumnDef<SupportTicketRow>[]>(
    () => [
      {
        accessorKey: "title",
        header: t("columns.title"),
        cell: ({ row }) => (
          <Link
            href={`/tickets/${row.original.id}`}
            className={cn(
              "block max-w-xs hover:underline",
              row.original.isUnread ? "font-semibold" : "font-medium"
            )}
          >
            <span className="flex items-center gap-2">
              {row.original.isUnread ? (
                <span
                  className="bg-sky-500 rounded-full size-2 shrink-0"
                  aria-hidden
                />
              ) : null}
              <span className="line-clamp-2">{row.original.title}</span>
            </span>
          </Link>
        ),
      },
      {
        accessorKey: "createdBy",
        header: t("columns.createdBy"),
        cell: ({ row }) => (
          <span className="max-w-40 truncate">{row.original.createdBy}</span>
        ),
      },
      {
        accessorKey: "email",
        header: t("columns.email"),
        cell: ({ row }) => (
          <span className="max-w-48 text-muted-foreground text-sm truncate">
            {row.original.email || "—"}
          </span>
        ),
      },
      {
        accessorKey: "companyId",
        header: t("columns.company"),
        cell: ({ row }) => (
          <span className="font-mono text-xs">{row.original.companyId || "—"}</span>
        ),
      },
      {
        accessorKey: "priority",
        header: t("columns.priority"),
        cell: ({ row }) => (
          <Badge variant={ticketPriorityVariant(row.original.priority)}>
            {ticketPriorityLabel(row.original.priority, t)}
          </Badge>
        ),
      },
      {
        accessorKey: "status",
        header: t("columns.status"),
        cell: ({ row }) => {
          const closed = isTicketClosed(row.original.status)
          return (
            <Badge variant={closed ? "outline" : "default"}>
              {ticketStatusLabel(row.original, t)}
            </Badge>
          )
        },
      },
      {
        accessorKey: "createdAt",
        header: t("columns.createdAt"),
        cell: ({ row }) => (
          <time
            className="font-mono text-xs whitespace-nowrap"
            dateTime={row.original.createdAt}
          >
            {formatTicketDate(row.original.createdAt, locale, emptyDate)}
          </time>
        ),
      },
    ],
    [t, locale]
  )

  return (
    <div className="flex flex-col gap-4 md:gap-6 py-4 md:py-6">
      <PageHeader
        title={t("title")}
        description={t("description")}
        actions={
          isFiltered ? (
            <Button variant="outline" type="button" onClick={clearFilters}>
              {t("actions.clearFilters")}
            </Button>
          ) : null
        }
      />

      <QueryState isLoading={query.isLoading} isError={query.isError} error={query.error}>
        <div className="flex flex-col gap-3">
          <div className="gap-3 grid px-4 sm:grid-cols-2 lg:grid-cols-3 lg:px-6">
            <Select
              value={statusFilter}
              onValueChange={(value) => {
                setStatusFilter(value)
                setPage(1)
              }}
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder={t("filters.status")} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">{t("filters.allStatuses")}</SelectItem>
                <SelectItem value="0">{t("filters.open")}</SelectItem>
                <SelectItem value="1">{t("filters.closed")}</SelectItem>
              </SelectContent>
            </Select>

            <Select
              value={priorityFilter}
              onValueChange={(value) => {
                setPriorityFilter(value)
                setPage(1)
              }}
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder={t("filters.priority")} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">{t("filters.allPriorities")}</SelectItem>
                <SelectItem value="0">{t("priority.low")}</SelectItem>
                <SelectItem value="1">{t("priority.medium")}</SelectItem>
                <SelectItem value="2">{t("priority.high")}</SelectItem>
              </SelectContent>
            </Select>

            <Select
              value={readFilter}
              onValueChange={(value) => {
                setReadFilter(value)
                setPage(1)
              }}
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder={t("filters.readStatus")} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">{t("filters.allReadStatuses")}</SelectItem>
                <SelectItem value="0">{t("filters.unread")}</SelectItem>
                <SelectItem value="1">{t("filters.readByAgent")}</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <SuperDataTable
            data={rows}
            columns={columns}
            disableClientPagination
            loading={query.isFetching && !query.isLoading}
            serverSearch={{
              value: search,
              onChange: (value) => {
                setSearch(value)
                setPage(1)
              },
              placeholder: t("placeholders.searchTickets"),
              ariaLabel: t("placeholders.searchTickets"),
            }}
            pageStatus={{ current: page, last: lastPage, total }}
            serverPagination={{
              page,
              lastPage,
              perPage,
              disabled: query.isFetching,
              onPageChange: setPage,
              onPerPageChange: (next) => {
                setPerPage(next)
                setPage(1)
              },
            }}
            actionsForRow={(row) => {
              const closed = isTicketClosed(row.status)
              const actions: SuperRowAction<SupportTicketRow>[] = [
                {
                  type: "link",
                  label: t("actions.view"),
                  icon: EyeIcon,
                  href: () => `/tickets/${row.id}`,
                },
              ]

              if (!closed) {
                actions.push(
                  {
                    type: "link",
                    label: t("actions.reply"),
                    icon: MessageSquareReplyIcon,
                    href: () => `/tickets/${row.id}?reply=1`,
                  },
                  { type: "separator" },
                  {
                    type: "action",
                    label: t("actions.close"),
                    icon: CircleCheckIcon,
                    onClick: async () => {
                      if (!window.confirm(t("confirm.close"))) return
                      try {
                        await closeTicket(row.id)
                        toast.success(t("toast.closed"))
                        void invalidateTickets()
                      } catch (e) {
                        showApiError(e)
                      }
                    },
                  }
                )
              }

              actions.push(
                { type: "separator" },
                {
                  type: "action",
                  label: tc("actions.delete"),
                  icon: Trash2Icon,
                  destructive: true,
                  onClick: async () => {
                    if (!window.confirm(t("confirm.delete"))) return
                    try {
                      await deleteTicket(row.id)
                      toast.success(t("toast.deleted"))
                      void invalidateTickets()
                    } catch (e) {
                      showApiError(e)
                    }
                  },
                }
              )

              return actions
            }}
          />
        </div>
      </QueryState>
    </div>
  )
}