"use client";

import type { ReactNode } from "react";
import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";

import { Button } from "@/components/ui/button";

export type DataTableColumn<T> = {
  key: string;
  label: string;
  sortable?: boolean;
  className?: string;
  render: (row: T) => ReactNode;
};

type Props<T> = {
  columns: DataTableColumn<T>[];
  rows: T[];
  rowKey: (row: T) => string | number;
  sortKey: string;
  sortDirection: "asc" | "desc";
  loading?: boolean;
  error?: string;
  emptyTitle: string;
  emptyDescription: string;
  onSort: (key: string) => void;
};

export default function DataTable<T>({
  columns,
  rows,
  rowKey,
  sortKey,
  sortDirection,
  loading = false,
  error,
  emptyTitle,
  emptyDescription,
  onSort,
}: Props<T>) {
  return (
    <div className="overflow-hidden rounded-lg border bg-white">
      <div className="overflow-x-auto">
        <table className="w-full min-w-[920px] text-sm">
          <thead className="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
            <tr>
              {columns.map((column) => {
                const active = sortKey === column.key;
                const SortIcon = active
                  ? sortDirection === "asc"
                    ? ArrowUp
                    : ArrowDown
                  : ArrowUpDown;

                return (
                  <th key={column.key} className={column.className ?? "px-4 py-3"}>
                    {column.sortable ? (
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="h-7 px-1 text-xs uppercase tracking-wide"
                        onClick={() => onSort(column.key)}
                      >
                        {column.label}
                        <SortIcon size={14} />
                      </Button>
                    ) : (
                      column.label
                    )}
                  </th>
                );
              })}
            </tr>
          </thead>

          <tbody>
            {loading && (
              <tr>
                <td colSpan={columns.length} className="px-4 py-12 text-center text-slate-500">
                  Daten werden geladen...
                </td>
              </tr>
            )}

            {!loading && error && (
              <tr>
                <td colSpan={columns.length} className="px-4 py-12 text-center text-red-600">
                  {error}
                </td>
              </tr>
            )}

            {!loading && !error && rows.length === 0 && (
              <tr>
                <td colSpan={columns.length} className="px-4 py-12 text-center">
                  <p className="font-medium text-slate-900">{emptyTitle}</p>
                  <p className="mt-1 text-slate-500">{emptyDescription}</p>
                </td>
              </tr>
            )}

            {!loading && !error && rows.map((row) => (
              <tr key={rowKey(row)} className="border-t hover:bg-slate-50">
                {columns.map((column) => (
                  <td key={column.key} className={column.className ?? "px-4 py-3"}>
                    {column.render(row)}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}