"use client"

import * as React from "react"
import { Column } from "@tanstack/react-table"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { ClientTableColumnMeta } from "./types"

interface ClientTableFilterProps<TData, TValue> {
  column: Column<TData, TValue>
}

export function ClientTableFilter<TData, TValue>({
  column,
}: ClientTableFilterProps<TData, TValue>) {
  const columnFilterValue = column.getFilterValue()
  // Cast meta to our local type
  const meta = column.columnDef.meta as ClientTableColumnMeta | undefined

  // Handle Boolean Filter
  if (meta?.filterType === "boolean") {
    return (
      <div onClick={(e) => e.stopPropagation()} className="mt-2">
        <Select
          value={(columnFilterValue as string) ?? "all"}
          onValueChange={(value) =>
            column.setFilterValue(value === "all" ? undefined : value === "true")
          }
        >
          <SelectTrigger className="h-8 w-full">
            <SelectValue placeholder="All" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All</SelectItem>
            <SelectItem value="true">Yes</SelectItem>
            <SelectItem value="false">No</SelectItem>
          </SelectContent>
        </Select>
      </div>
    )
  }

  // Handle Select Filter (for specific options)
  if (meta?.filterType === "select" && meta.filterOptions) {
    return (
      <div onClick={(e) => e.stopPropagation()} className="mt-2">
        <Select
          value={(columnFilterValue as string) ?? "all"}
          onValueChange={(value) =>
            column.setFilterValue(value === "all" ? undefined : value)
          }
        >
          <SelectTrigger className="h-8 w-full">
            <SelectValue placeholder="All" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All</SelectItem>
            {meta.filterOptions.map((option) => (
              <SelectItem key={option.value} value={option.value}>
                {option.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    )
  }

  // Default Text Filter
  const [value, setValue] = React.useState(columnFilterValue)

  React.useEffect(() => {
    setValue(columnFilterValue)
  }, [columnFilterValue])

  React.useEffect(() => {
    const timeout = setTimeout(() => {
      column.setFilterValue(value)
    }, 500)

    return () => clearTimeout(timeout)
  }, [value, column])

  return (
    <div onClick={(e) => e.stopPropagation()} className="mt-2">
      <Input
        type="text"
        value={(value ?? "") as string}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Search..."
        className="h-8 w-full font-normal bg-background"
      />
    </div>
  )
}