"use client"

import type { ColumnDef } from "@tanstack/react-table"
import { useMemo, useState } from "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 { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { type ActivityLogRow } from "@/lib/api/activity-logs"
import { useActivityLogsList } from "@/hooks/api/use-activity-logs"
import { usePathname, useRouter } from "@/i18n/navigation"

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

  const [page, setPage] = useState(1)
  const [perPage, setPerPage] = useState(15)
  const [storeFilter, setStoreFilter] = useState("all")
  const [moduleFilter, setModuleFilter] = useState("all")
  const [userFilter, setUserFilter] = useState("all")

  const query = useActivityLogsList({
    page,
    perPage,
    subjectType: moduleFilter === "all" ? undefined : moduleFilter,
  })
  const rows = query.data?.items ?? []
  const lastPage = Math.max(1, query.data?.meta.lastPage ?? 1)
  const total = query.data?.meta.total ?? 0

  const storeOptions = useMemo(
    () =>
      Array.from(new Set(rows.map((row) => row.store).filter((s) => s !== "—"))).sort(),
    [rows]
  )
  const moduleOptions = useMemo(
    () =>
      Array.from(new Set(rows.map((row) => row.moduleType).filter(Boolean))).sort(),
    [rows]
  )
  const userOptions = useMemo(
    () =>
      Array.from(new Set(rows.map((row) => row.userName).filter((u) => u !== "—"))).sort(),
    [rows]
  )

  const columns = useMemo<ColumnDef<ActivityLogRow>[]>(
    () => [
      {
        accessorKey: "date",
        header: t("columns.date"),
        cell: ({ row }) => (
          <time
            className="font-mono text-xs whitespace-nowrap"
            dateTime={row.original.date}
          >
            {row.original.date}
          </time>
        ),
      },
      {
        accessorKey: "store",
        header: t("columns.store"),
        cell: ({ row }) => (
          <span className="font-mono text-xs">{row.original.store}</span>
        ),
      },
      {
        accessorKey: "event",
        header: t("columns.event"),
      },
      {
        accessorKey: "moduleType",
        header: t("columns.moduleType"),
        cell: ({ row }) => <Badge variant="secondary">{row.original.moduleType}</Badge>,
      },
      {
        accessorKey: "userName",
        header: t("columns.userName"),
      },
    ],
    [t]
  )

  const filteredData = useMemo(
    () =>
      rows.filter((row) => {
        const matchesStore = storeFilter === "all" || row.store === storeFilter
        const matchesUser = userFilter === "all" || row.userName === userFilter
        return matchesStore && matchesUser
      }),
    [rows, storeFilter, userFilter]
  )

  const clearFilters = () => {
    setStoreFilter("all")
    setModuleFilter("all")
    setUserFilter("all")
    setPage(1)
  }

  const isFiltered =
    storeFilter !== "all" || moduleFilter !== "all" || userFilter !== "all"

  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">
          {/* TODO: Use API Filters */}
          <div className="gap-3 grid md:grid-cols-3 px-4 lg:px-6">
            <Select
              value={storeFilter}
              onValueChange={(value) => {
                setStoreFilter(value)
                setPage(1)
              }}
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder={t("filters.store")} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">{t("filters.allStores")}</SelectItem>
                {storeOptions.map((store) => (
                  <SelectItem key={store} value={store}>
                    {store}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            <Select
              value={moduleFilter}
              onValueChange={(value) => {
                setModuleFilter(value)
                setPage(1)
              }}
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder={t("filters.moduleType")} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">{t("filters.allModules")}</SelectItem>
                {moduleOptions.map((module) => (
                  <SelectItem key={module} value={module}>
                    {module}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            <Select
              value={userFilter}
              onValueChange={(value) => {
                setUserFilter(value)
                setPage(1)
              }}
            >
              <SelectTrigger className="w-full">
                <SelectValue placeholder={t("filters.user")} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">{t("filters.allUsers")}</SelectItem>
                {userOptions.map((user) => (
                  <SelectItem key={user} value={user}>
                    {user}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <SuperDataTable
            data={filteredData}
            columns={columns}
            disableClientPagination
            loading={query.isFetching && !query.isLoading}
            searchKey="event"
            searchPlaceholder={t("placeholders.search")}
            defaultSearch={searchParams.get("search") ?? ""}
            onSearch={(value) => {
              const qs = value ? `?search=${encodeURIComponent(value)}` : ""
              router.replace(`${pathname}${qs}`, { scroll: false })
            }}
            pageStatus={{ current: page, last: lastPage, total }}
            pageStatusCountLabel="logs"
            serverPagination={{
              page,
              lastPage,
              perPage,
              disabled: query.isFetching,
              onPageChange: setPage,
              onPerPageChange: (next) => {
                setPerPage(next)
                setPage(1)
              },
            }}
          />
        </div>
      </QueryState>
    </div>
  )
}