"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 { useCompaniesUsingPayments } from "@/hooks/api/use-statistics"
import { getTenantRouteId, type PaymentMethodTenantRow } from "@/lib/statistics-mock"

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

  const [tenantFilter, setTenantFilter] = useState("all")
  const [paymentMethodFilter, setPaymentMethodFilter] = useState("all")

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

  const tenantOptions = useMemo(
    () => Array.from(new Set(rows.map((row) => row.tenantName))),
    [rows]
  )
  const paymentMethodOptions = useMemo(
    () => Array.from(new Set(rows.map((row) => row.paymentMethod))),
    [rows]
  )

  const columns = useMemo<ColumnDef<PaymentMethodTenantRow>[]>(
    () => [
      {
        accessorKey: "tenantId",
        header: t("columns.tenantId"),
        cell: ({ row }) => (
          <span className="font-mono font-medium text-xs">{row.original.tenantId}</span>
        ),
      },
      {
        accessorKey: "tenantName",
        header: t("columns.paymentMethodName"),
      },
      {
        accessorKey: "registeredDate",
        header: t("columns.registeredDate"),
        cell: ({ row }) => (
          <time className="text-sm whitespace-nowrap" dateTime={row.original.registeredDate}>
            {row.original.registeredDate}
          </time>
        ),
      },
      {
        accessorKey: "paymentMethod",
        header: t("columns.paymentMethod"),
        cell: ({ row }) => (
          <Badge variant="secondary">{row.original.paymentMethod}</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 matchesTenant = tenantFilter === "all" || row.tenantName === tenantFilter
        const matchesPaymentMethod =
          paymentMethodFilter === "all" || row.paymentMethod === paymentMethodFilter

        return matchesTenant && matchesPaymentMethod
      }),
    [rows, tenantFilter, paymentMethodFilter]
  )

  const clearFilters = () => {
    setTenantFilter("all")
    setPaymentMethodFilter("all")
  }

  const isFiltered = tenantFilter !== "all" || paymentMethodFilter !== "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-2 px-4 lg:px-6">
        <Select value={tenantFilter} onValueChange={setTenantFilter}>
          <SelectTrigger className="w-full">
            <SelectValue placeholder={t("filters.tenantName")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("filters.allTenants")}</SelectItem>
            {tenantOptions.map((tenant) => (
              <SelectItem key={tenant} value={tenant}>
                {tenant}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <Select value={paymentMethodFilter} onValueChange={setPaymentMethodFilter}>
          <SelectTrigger className="w-full">
            <SelectValue placeholder={t("filters.paymentMethod")} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t("filters.allPaymentMethods")}</SelectItem>
            {paymentMethodOptions.map((method) => (
              <SelectItem key={method} value={method}>
                {method}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

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