"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 { Link, usePathname, useRouter } from "@/i18n/navigation"
import { PageHeader } from "@/components/page-header"
import { SuperDataTable } from "@/components/super-data-table"
import { TenantTableActions } from "@/components/statistics/tenant-table-actions"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { useCompaniesUsingCarriers } from "@/hooks/api/use-statistics"
import { getTenantRouteId, type CarrierTenantRow } from "@/lib/statistics-mock"

export default function CarriersStatisticsPage() {
  const t = useTranslations("RealTenants.Carriers")
  const tStats = useTranslations("RealTenants")
  const searchParams = useSearchParams()
  const router = useRouter()
  const pathname = usePathname()

  const [nameFilter, setNameFilter] = useState("all")
  const [carrierFilter, setCarrierFilter] = useState("all")
  const [domainFilter, setDomainFilter] = useState("all")

  const { data: rows = [], isLoading, isError, error } = useCompaniesUsingCarriers()

  const nameOptions = useMemo(
    () => Array.from(new Set(rows.map((row) => row.name))),
    [rows]
  )
  const carrierOptions = useMemo(
    () => Array.from(new Set(rows.map((row) => row.carrierName))),
    [rows]
  )
  const domainOptions = useMemo(
    () => Array.from(new Set(rows.map((row) => row.domain))),
    [rows]
  )

  const columns = useMemo<ColumnDef<CarrierTenantRow>[]>(
    () => [
      {
        accessorKey: "tenantId",
        header: t("columns.tenantId"),
        cell: ({ row }) => (
          <span className="font-mono font-medium text-xs">{row.original.tenantId}</span>
        ),
      },
      {
        accessorKey: "name",
        header: t("columns.name"),
      },
      {
        accessorKey: "domain",
        header: t("columns.domain"),
        cell: ({ row }) => (
          <span className="font-mono text-xs">{row.original.domain}</span>
        ),
      },
      {
        accessorKey: "registeredDate",
        header: t("columns.registeredDate"),
        cell: ({ row }) => (
          <time className="text-sm whitespace-nowrap" dateTime={row.original.registeredDate}>
            {row.original.registeredDate}
          </time>
        ),
      },
      {
        accessorKey: "carrierName",
        header: t("columns.carrierName"),
        cell: ({ row }) => <Badge variant="secondary">{row.original.carrierName}</Badge>,
      },
      {
        id: "actions",
        header: t("columns.actions"),
        cell: ({ row }) => (
          <TenantTableActions tenantRouteId={getTenantRouteId(row.original.tenantId)} />
        ),
        enableSorting: false,
      },
    ],
    [t]
  )

  const filteredData = useMemo(
    () =>
      rows.filter((row) => {
        const matchesName = nameFilter === "all" || row.name === nameFilter
        const matchesCarrier =
          carrierFilter === "all" || row.carrierName === carrierFilter
        const matchesDomain = domainFilter === "all" || row.domain === domainFilter

        return matchesName && matchesCarrier && matchesDomain
      }),
    [rows, nameFilter, carrierFilter, domainFilter]
  )

  const clearFilters = () => {
    setNameFilter("all")
    setCarrierFilter("all")
    setDomainFilter("all")
  }

  const isFiltered =
    nameFilter !== "all" || carrierFilter !== "all" || domainFilter !== "all"

  return (
    <div className="flex flex-col gap-4 md:gap-6 py-4 md:py-6">
      <PageHeader
        title={t("title")}
        actions={
          <div className="flex flex-wrap items-center gap-2">
            <Button variant="outline" asChild>
              <Link href="/real-stores">{tStats("actions.backToRealTenants")}</Link>
            </Button>
            {isFiltered ? (
              <Button variant="outline" type="button" onClick={clearFilters}>
                {t("actions.clearFilters")}
              </Button>
            ) : null}
          </div>
        }
      />

      <div className="gap-3 grid md:grid-cols-3 px-4 lg:px-6">
        <Select value={nameFilter} onValueChange={setNameFilter}>
          <SelectTrigger className="w-full">
            <SelectValue placeholder={t("filters.tenantName")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("filters.allTenants")}</SelectItem>
            {nameOptions.map((name) => (
              <SelectItem key={name} value={name}>
                {name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <Select value={carrierFilter} onValueChange={setCarrierFilter}>
          <SelectTrigger className="w-full">
            <SelectValue placeholder={t("filters.carrierName")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("filters.allCarriers")}</SelectItem>
            {carrierOptions.map((carrier) => (
              <SelectItem key={carrier} value={carrier}>
                {carrier}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <Select value={domainFilter} onValueChange={setDomainFilter}>
          <SelectTrigger className="w-full">
            <SelectValue placeholder={t("filters.domain")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("filters.allDomains")}</SelectItem>
            {domainOptions.map((domain) => (
              <SelectItem key={domain} value={domain}>
                {domain}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <QueryState isLoading={isLoading} isError={isError} error={error}>
        <SuperDataTable
          data={filteredData}
          columns={columns}
          searchKey="name"
          searchPlaceholder={t("placeholders.search")}
          defaultSearch={searchParams.get("search") ?? ""}
          onSearch={(value) => {
            const qs = value ? `?search=${encodeURIComponent(value)}` : ""
            router.replace(`${pathname}${qs}`, { scroll: false })
          }}
        />
      </QueryState>
    </div>
  )
}