"use client"

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

import { QueryState } from "@/components/api/query-state"
import { PlanBadge } from "@/components/plan-badge"
import { SuperDataTable } from "@/components/super-data-table"
import { Button } from "@/components/ui/button"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  useCompanyStatistics,
  useInvalidateCompanyStatistics,
} from "@/hooks/api/use-statistics"
import { useTenantRowActions } from "@/hooks/use-tenant-row-actions"
import { Link } from "@/i18n/navigation"
import type { CompanyStatisticsRow } from "@/lib/api/statistics"

const SEARCH_DEBOUNCE_MS = 600

type DateFilters = {
  createdAtFrom: string
  createdAtTo: string
  planStartedAt: string
  planExpiredAt: string
}

const DEFAULT_DATE_FILTERS: DateFilters = {
  createdAtFrom: "",
  createdAtTo: "",
  planStartedAt: "",
  planExpiredAt: "",
}

function formatCount(value: number, locale: string) {
  return new Intl.NumberFormat(locale).format(value)
}

function formatMoney(value: number | null, locale: string) {
  if (value == null) return "—"
  return new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }).format(value)
}

function formatIndustry(value: string) {
  if (!value) return "—"
  return value
    .split(/[_\s.-]+/)
    .filter(Boolean)
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
    .join(" ")
}

function DomainLink({ domain }: { domain: string }) {
  if (!domain || domain === "—") {
    return <span className="text-sm">—</span>
  }

  return (
    <a
      className="flex items-center gap-2 font-medium text-primary hover:underline underline-offset-4"
      href={`https://${domain}`}
      rel="noreferrer"
      target="_blank"
    >
      <ExternalLinkIcon className="size-4 shrink-0" />
      <span className="font-mono text-xs">{domain}</span>
    </a>
  )
}

export function CompanyStatisticsTable() {
  const t = useTranslations("RealTenants.Statistics")
  const locale = useLocale()

  const [page, setPage] = useState(1)
  const [perPage, setPerPage] = useState(15)
  const [search, setSearch] = useState("")
  const [debouncedSearch, setDebouncedSearch] = useState("")
  const [dateFilters, setDateFilters] = useState<DateFilters>(DEFAULT_DATE_FILTERS)

  const invalidateCompanyStatistics = useInvalidateCompanyStatistics()
  const { actionsForRow, assignPlanDialog } = useTenantRowActions(() => {
    void invalidateCompanyStatistics()
  })

  useEffect(() => {
    const handle = setTimeout(() => {
      setDebouncedSearch(search.trim())
    }, SEARCH_DEBOUNCE_MS)
    return () => clearTimeout(handle)
  }, [search])

  const query = useCompanyStatistics({
    page,
    perPage,
    search: debouncedSearch,
    createdAtFrom: dateFilters.createdAtFrom,
    createdAtTo: dateFilters.createdAtTo,
    planStartedAt: dateFilters.planStartedAt,
    planExpiredAt: dateFilters.planExpiredAt,
  })

  const rows = query.data?.items ?? []
  const lastPage = Math.max(1, query.data?.meta.lastPage ?? 1)
  const total = query.data?.meta.total ?? 0

  const columns = useMemo<ColumnDef<CompanyStatisticsRow>[]>(
    () => [
      {
        accessorKey: "id",
        header: t("columns.id"),
        cell: ({ row }) => (
          <span className="font-mono font-medium text-xs">{row.original.id}</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: "domain",
        header: t("columns.domain"),
        cell: ({ row }) => <DomainLink domain={row.original.domain} />,
      },
      {
        accessorKey: "cname",
        header: t("columns.cname"),
        cell: ({ row }) => <DomainLink domain={row.original.cname} />,
      },
      {
        accessorKey: "planName",
        header: t("columns.planName"),
        cell: ({ row }) => <PlanBadge planName={row.original.planName} />,
      },
      {
        accessorKey: "planStartedAt",
        header: t("columns.planStartedAt"),
        cell: ({ row }) => (
          <time className="text-sm whitespace-nowrap" dateTime={row.original.planStartedAt}>
            {row.original.planStartedAt || "—"}
          </time>
        ),
      },
      {
        accessorKey: "planExpiredAt",
        header: t("columns.planExpiredAt"),
        cell: ({ row }) => (
          <time className="text-sm whitespace-nowrap" dateTime={row.original.planExpiredAt}>
            {row.original.planExpiredAt || "—"}
          </time>
        ),
      },
      {
        accessorKey: "industry",
        header: t("columns.industry"),
        cell: ({ row }) => (
          <span className="text-sm">{formatIndustry(row.original.industry)}</span>
        ),
      },
      {
        accessorKey: "orderCount",
        header: t("columns.orderCount"),
        cell: ({ row }) => (
          <span className="tabular-nums">{formatCount(row.original.orderCount, locale)}</span>
        ),
      },
      {
        accessorKey: "orderCompleted",
        header: t("columns.orderCompleted"),
        cell: ({ row }) => (
          <span className="tabular-nums">
            {formatCount(row.original.orderCompleted, locale)}
          </span>
        ),
      },
      {
        accessorKey: "completedGrandTotal",
        header: t("columns.completedGrandTotal"),
        cell: ({ row }) => (
          <span className="tabular-nums">
            {formatMoney(row.original.completedGrandTotal, locale)}
          </span>
        ),
      },
      {
        accessorKey: "totalGrandTotal",
        header: t("columns.totalGrandTotal"),
        cell: ({ row }) => (
          <span className="tabular-nums">
            {formatMoney(row.original.totalGrandTotal, locale)}
          </span>
        ),
      },
      {
        accessorKey: "productCount",
        header: t("columns.productCount"),
        cell: ({ row }) => (
          <span className="tabular-nums">{formatCount(row.original.productCount, locale)}</span>
        ),
      },
      {
        accessorKey: "createdAt",
        header: t("columns.createdAt"),
        cell: ({ row }) => (
          <time className="text-sm whitespace-nowrap" dateTime={row.original.createdAt}>
            {row.original.createdAt || "—"}
          </time>
        ),
      },
    ],
    [locale, t]
  )

  const updateDateFilter = (key: keyof DateFilters, value: string) => {
    setDateFilters((current) => ({ ...current, [key]: value }))
    setPage(1)
  }

  const isFiltered =
    dateFilters.createdAtFrom !== DEFAULT_DATE_FILTERS.createdAtFrom ||
    dateFilters.createdAtTo !== DEFAULT_DATE_FILTERS.createdAtTo ||
    dateFilters.planStartedAt !== DEFAULT_DATE_FILTERS.planStartedAt ||
    dateFilters.planExpiredAt !== DEFAULT_DATE_FILTERS.planExpiredAt

  const clearFilters = () => {
    setDateFilters(DEFAULT_DATE_FILTERS)
    setPage(1)
  }

  return (
    <div className="flex flex-col gap-4">
      {isFiltered ? (
        <div className="flex justify-end px-4 lg:px-6">
          <Button variant="outline" type="button" size="sm" onClick={clearFilters}>
            {t("actions.clearFilters")}
          </Button>
        </div>
      ) : null}

      <div className="gap-3 grid sm:grid-cols-2 lg:grid-cols-4 px-4 lg:px-6">
        <Field>
          <FieldLabel htmlFor="stats-created-from">{t("filters.createdAtFrom")}</FieldLabel>
          <Input
            id="stats-created-from"
            type="date"
            value={dateFilters.createdAtFrom}
            onChange={(e) => updateDateFilter("createdAtFrom", e.target.value)}
          />
        </Field>
        <Field>
          <FieldLabel htmlFor="stats-created-to">{t("filters.createdAtTo")}</FieldLabel>
          <Input
            id="stats-created-to"
            type="date"
            value={dateFilters.createdAtTo}
            onChange={(e) => updateDateFilter("createdAtTo", e.target.value)}
          />
        </Field>
        <Field>
          <FieldLabel htmlFor="stats-plan-started">{t("filters.planStartedAt")}</FieldLabel>
          <Input
            id="stats-plan-started"
            type="date"
            value={dateFilters.planStartedAt}
            onChange={(e) => updateDateFilter("planStartedAt", e.target.value)}
          />
        </Field>
        <Field>
          <FieldLabel htmlFor="stats-plan-expired">{t("filters.planExpiredAt")}</FieldLabel>
          <Input
            id="stats-plan-expired"
            type="date"
            value={dateFilters.planExpiredAt}
            onChange={(e) => updateDateFilter("planExpiredAt", e.target.value)}
          />
        </Field>
      </div>

      {assignPlanDialog}

      <QueryState
        isLoading={query.isLoading}
        isError={query.isError}
        error={query.error}
      >
        <SuperDataTable
          data={rows}
          columns={columns}
          disableClientPagination
          loading={query.isFetching && !query.isLoading}
          serverSearch={{
            value: search,
            onChange: (value) => {
              setSearch(value)
              setPage(1)
            },
            placeholder: t("placeholders.search"),
            ariaLabel: t("placeholders.search"),
          }}
          pageStatus={{ current: page, last: lastPage, total }}
          serverPagination={{
            page,
            lastPage,
            perPage,
            disabled: query.isFetching,
            onPageChange: setPage,
            onPerPageChange: (next) => {
              setPerPage(next)
              setPage(1)
            },
          }}
          actionsForRow={actionsForRow}
        />
      </QueryState>
    </div>
  )
}