"use client"

import * as React from "react"

import { cn } from "@/lib/utils"
import { ArrowDown, ArrowUp, ArrowUpDown, Filter } from "lucide-react"
import { Input } from "./input"
import { Button } from "./button"
import { Skeleton } from "./skeleton"
import { AsyncCombobox, Option } from "./combobox"
import { DatePicker } from "./date-picker"

function Table({ className, ...props }: React.ComponentProps<"table">) {
  return (
    <div
      data-slot="table-container"
      className="relative w-full overflow-x-auto"
    >
      <table
        data-slot="table"
        className={cn("w-full caption-bottom text-sm", className)}
        {...props}
      />
    </div>
  )
}

function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
  return (
    <thead
      data-slot="table-header"
      className={cn("[&_tr]:border-b", className)}
      {...props}
    />
  )
}

function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
  return (
    <tbody
      data-slot="table-body"
      className={cn("[&_tr:last-child]:border-0", className)}
      {...props}
    />
  )
}

function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
  return (
    <tfoot
      data-slot="table-footer"
      className={cn(
        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
        className
      )}
      {...props}
    />
  )
}

function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
  return (
    <tr
      data-slot="table-row"
      className={cn(
        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
        className
      )}
      {...props}
    />
  )
}

function TableHead({ className, ...props }: React.ComponentProps<"th">) {
  return (
    <th
      data-slot="table-head"
      className={cn(
        "h-12 px-3 text-left align-middle font-medium whitespace-nowrap text-foreground has-[[role=checkbox]]:pr-0",
        className
      )}
      {...props}
    />
  )
}

function TableCell({ className, ...props }: React.ComponentProps<"td">) {
  return (
    <td
      data-slot="table-cell"
      className={cn(
        "p-3 align-middle whitespace-nowrap has-[[role=checkbox]]:pr-0",
        className
      )}
      {...props}
    />
  )
}

function TableCaption({
  className,
  ...props
}: React.ComponentProps<"caption">) {
  return (
    <caption
      data-slot="table-caption"
      className={cn("mt-4 text-sm text-muted-foreground", className)}
      {...props}
    />
  )
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
function SortableHeader({ column, title }: { column: any; title: string }) {
  return (
    <button
      onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      className="flex items-center gap-1 font-medium"
    >
      {title}
      {column.getIsSorted() === "asc" ? (
        <ArrowUp className="h-4 w-4" />
      ) : column.getIsSorted() === "desc" ? (
        <ArrowDown className="h-4 w-4" />
      ) : (
        <ArrowUpDown className="h-4 w-4 text-muted-foreground" />
      )}
    </button>
  )
}

function FilterInput({
  value,
  onChange,
  placeholder,
}: {
  value: string
  onChange: (value: string) => void
  placeholder?: string
}) {
  return (
    <Input
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder={placeholder}
      className="h-8 text-xs"
      type="search"
    />
  )
}

interface SFCHPBase {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  column: any
  title: string
  placeholder?: string
}

interface DefaultColumn extends SFCHPBase {
  type: "default"
}

interface WithOptions extends SFCHPBase {
  type: "select"
  get_options: (query: string, page: number) => Promise<Option[]>
}

interface Dates extends SFCHPBase {
  type: "date"
  from: boolean
  to: boolean
}

export function createColumn<T extends SFCHPBase & Record<string, unknown>>(
  config: T
): T extends { get_options: (query: string, page: number) => Promise<Option[]> }
  ? WithOptions
  : T extends { from: boolean; to: boolean }
    ? Dates
    : DefaultColumn {
  if ("get_options" in config) {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    return { ...config, type: "select" } as any
  }
  if ("from" in config || "to" in config) {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    return { ...config, type: "date" } as any
  }
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  return { ...config, type: "default" } as any
}

type SFCHP = DefaultColumn | WithOptions | Dates

function SortableFilterableColumnHeader(props: SFCHP) {
  const { column, title, placeholder, type } = props
  const get_options = type === "select" ? props.get_options : undefined
  const { from, to } = type === "date" ? props : {}
  const [showFilter, setShowFilter] = React.useState(false)
  const canSort = column.getCanSort()
  const canFilter = column.getCanFilter()

  function getDateFilterInput() {
    if (type !== "date") return null
    if (from && to)
      return (
        <DatePicker
          value={
            column.getFilterValue() as
              { from: Date | undefined; to?: Date } | undefined
          }
          onDateChange={(dates) =>
            !dates
              ? column.setFilterValue(undefined)
              : column.setFilterValue({
                  ...dates,
                  to: dates?.to
                    ? new Date(dates.to.setHours(23, 59, 59, 0))
                    : undefined,
                })
          }
          range
        />
      )
    if (from)
      return (
        <>
          {" "}
          -
          <DatePicker
            value={column.getFilterValue()?.from as Date | undefined}
            onDateChange={(date) => column.setFilterValue({ from: date })}
          />
        </>
      )
    if (to)
      return (
        <>
          <DatePicker
            value={column.getFilterValue()?.to as Date | undefined}
            onDateChange={(date) =>
              column.setFilterValue({
                to: date ? new Date(date.setHours(23, 59, 59, 0)) : undefined,
              })
            }
          />{" "}
          -
        </>
      )
    return null
  }

  function getFilterInput() {
    switch (type) {
      case "select":
        return (
          <AsyncCombobox
            fetchOptions={get_options!}
            value={(column.getFilterValue() as string) ?? ""}
            onChange={(value) => column.setFilterValue(value)}
          />
        )
      case "date":
        return getDateFilterInput()
      case "default":
      default:
        return (
          <FilterInput
            value={(column.getFilterValue() as string) ?? ""}
            onChange={(value) => column.setFilterValue(value)}
            placeholder={placeholder}
          />
        )
    }
  }

  return (
    <div className="space-y-1">
      <div className="flex items-center justify-between gap-2">
        {canSort && <SortableHeader column={column} title={title} />}
        {!canSort && <span>{title}</span>}
        {canFilter && (
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className="h-6 w-6"
            onClick={() => setShowFilter(!showFilter)}
          >
            <Filter
              className={`h-3 w-3 ${showFilter ? "text-primary" : "text-muted-foreground"}`}
            />
          </Button>
        )}
      </div>
      {canFilter && showFilter ? getFilterInput() : null}
    </div>
  )
}

interface TableSkeletonProps {
  columns: number
  rows?: number
}

function TableRowSkeleton({ columns, rows = 5 }: TableSkeletonProps) {
  return Array.from({ length: rows }).map((_, rowIndex) => (
    <TableRow key={rowIndex}>
      {Array.from({ length: columns }).map((_, colIndex) => (
        <TableCell key={colIndex}>
          <Skeleton className="h-4 w-full" />
        </TableCell>
      ))}
    </TableRow>
  ))
}

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
  SortableHeader,
  FilterInput,
  SortableFilterableColumnHeader,
  TableRowSkeleton,
}