"use client"

import { useMemo, useState } from "react"
import { Card } from "@/components/ui/card"
import { SearchIcon } from "lucide-react"

export interface Column<T> {
  key: string
  label: string
  render: (row: T) => React.ReactNode
}

interface DataTableProps<T extends { id: string }> {
  data: T[]
  columns: Column<T>[]
  searchPlaceholder?: string
  searchKeys?: (keyof T)[]
}

export function DataTable<T extends { id: string }>({
  data,
  columns,
  searchPlaceholder = "Поиск…",
  searchKeys = [],
}: DataTableProps<T>) {
  const [search, setSearch] = useState("")

  const filtered = useMemo(() => {
    if (!search || searchKeys.length === 0) return data
    const s = search.toLowerCase()
    return data.filter((row) =>
      searchKeys.some((k) => String(row[k]).toLowerCase().includes(s)),
    )
  }, [data, search, searchKeys])

  return (
    <Card>
      <div className="flex items-center gap-2 px-5 py-3 border-b">
        <div className="flex items-center gap-2 h-8 px-3 border border-input rounded-md bg-background min-w-[220px]">
          <SearchIcon className="size-3.5 text-muted-foreground shrink-0" />
          <input
            className="flex-1 bg-transparent outline-none placeholder:text-muted-foreground text-sm"
            placeholder={searchPlaceholder}
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
        </div>
        <span className="text-sm text-muted-foreground ml-1">{filtered.length} записей</span>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-border text-xs text-muted-foreground">
              {columns.map((col) => (
                <th key={col.key} className="text-left font-medium px-5 py-3">
                  {col.label}
                </th>
              ))}
            </tr>
          </thead>
          <tbody className="divide-y divide-border">
            {filtered.map((row) => (
              <tr key={row.id} className="hover:bg-muted/40 transition-colors">
                {columns.map((col) => (
                  <td key={col.key} className="px-5 py-3">
                    {col.render(row)}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Card>
  )
}