// components/ui/Table.tsx
'use client';

import * as React from 'react';
import { ChevronDownIcon } from '@heroicons/react/20/solid';

function classNames(...classes: Array<string | boolean | null | undefined>) {
  return classes.filter(Boolean).join(' ');
}

export type SortDirection = 'asc' | 'desc';

export type TableColumn<T> = {
  /** Schlüssel im Datensatz, z.B. 'inventoryNumber' */
  key: keyof T;
  /** Spaltenüberschrift */
  header: string;
  /** Kann die Spalte sortiert werden? */
  sortable?: boolean;
  /** Kann die Spalte ausgeblendet werden? */
  canHide?: boolean,
  /** Optional eigene Klassen für die TH-Zelle */
  headerClassName?: string;
  /** Optional eigene Klassen für die TD-Zelle */
  cellClassName?: string;
  /** Custom Renderer für Zellen (z.B. formatDate) */
  render?: (row: T) => React.ReactNode;
};

export interface TableProps<T> {
  data: T[];
  columns: TableColumn<T>[];
  /** Eindeutige ID pro Zeile */
  getRowId: (row: T) => string;
  /** Checkboxen + Auswahl aktivieren */
  selectable?: boolean;
  /** Callback bei Änderung der Auswahl */
  onSelectionChange?: (selected: T[]) => void;
  /** Optional: Actions in der letzten Spalte rendern */
  renderActions?: (row: T) => React.ReactNode;
  /** Optional: Header-Text für die Actions-Spalte */
  actionsHeader?: string;
}

type SortState<T> = {
  key: keyof T | null;
  direction: SortDirection;
};

export default function Table<T>(props: TableProps<T>) {
  const {
    data,
    columns,
    getRowId,
    selectable = false,
    onSelectionChange,
    renderActions,
    actionsHeader = '',
  } = props;

  const [sort, setSort] = React.useState<SortState<T>>({
    key: null,
    direction: 'asc',
  });

  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
  const headerCheckboxRef = React.useRef<HTMLInputElement | null>(null);

  // Sortierte Daten
  const sortedData = React.useMemo(() => {
    if (!sort.key) return data;

    const col = columns.find((c) => c.key === sort.key);
    if (!col) return data;

    const sorted = [...data].sort((a, b) => {
      const va = (a as any)[sort.key!];
      const vb = (b as any)[sort.key!];

      if (va == null && vb == null) return 0;
      if (va == null) return sort.direction === 'asc' ? -1 : 1;
      if (vb == null) return sort.direction === 'asc' ? 1 : -1;

      // Numbers
      if (typeof va === 'number' && typeof vb === 'number') {
        return sort.direction === 'asc' ? va - vb : vb - va;
      }

      // Date / ISO-String
      const sa = va instanceof Date ? va.getTime() : String(va);
      const sb = vb instanceof Date ? vb.getTime() : String(vb);

      if (sa < sb) return sort.direction === 'asc' ? -1 : 1;
      if (sa > sb) return sort.direction === 'asc' ? 1 : -1;
      return 0;
    });

    return sorted;
  }, [data, columns, sort]);

  // Selection / Tri-State Header Checkbox
  React.useLayoutEffect(() => {
    if (!selectable || !headerCheckboxRef.current) return;

    const allIds = sortedData.map((row) => getRowId(row));
    const checkedCount = allIds.filter((id) => selectedIds.includes(id)).length;
    const isAll = checkedCount === allIds.length && allIds.length > 0;
    const isNone = checkedCount === 0;
    const isIndeterminate = !isAll && !isNone;

    headerCheckboxRef.current.checked = isAll;
    headerCheckboxRef.current.indeterminate = isIndeterminate;
  }, [sortedData, selectedIds, selectable, getRowId]);

  React.useEffect(() => {
    if (!onSelectionChange) return;
    const selectedRows = sortedData.filter((row) => selectedIds.includes(getRowId(row)));
    onSelectionChange(selectedRows);
  }, [selectedIds, sortedData, getRowId, onSelectionChange]);

  function toggleSort(key: keyof T) {
    setSort((prev) => {
      if (prev.key === key) {
        // gleiche Spalte -> Richtung flippen
        return {
          key,
          direction: prev.direction === 'asc' ? 'desc' : 'asc',
        };
      }
      // neue Spalte -> asc
      return { key, direction: 'asc' };
    });
  }

  function toggleAll() {
    if (!selectable) return;
    const allIds = sortedData.map((row) => getRowId(row));
    const allSelected = allIds.length > 0 && allIds.every((id) => selectedIds.includes(id));

    setSelectedIds(allSelected ? [] : allIds);
  }

  function toggleRow(id: string) {
    if (!selectable) return;
    setSelectedIds((prev) =>
      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
    );
  }

  return (
    <div className="rounded-lg border border-gray-200 bg-white shadow-sm dark:border-white/10 dark:bg-gray-900/40">
      {/* Wichtig: auf kleinen Screens overflow-x-visible, erst ab lg overflow-x-auto */}
      <div className="overflow-x-visible lg:overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-left text-sm dark:divide-white/10">
          <thead className="bg-gray-50 dark:bg-gray-800/60">
            <tr>
              {selectable && (
                <th scope="col" className="w-12 px-4">
                  <div className="group grid size-4 grid-cols-1">
                    <input
                      ref={headerCheckboxRef}
                      type="checkbox"
                      onChange={toggleAll}
                      className="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:border-white/20 dark:bg-gray-800/50 dark:checked:border-indigo-500 dark:checked:bg-indigo-500 dark:indeterminate:border-indigo-500 dark:indeterminate:bg-indigo-500 dark:focus-visible:outline-indigo-500"
                    />
                    <svg
                      className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white"
                      viewBox="0 0 14 14"
                      fill="none"
                    >
                      <path
                        className="opacity-0 group-has-checked:opacity-100"
                        d="M3 8L6 11L11 3.5"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                      <path
                        className="opacity-0 group-has-indeterminate:opacity-100"
                        d="M3 7H11"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                  </div>
                </th>
              )}

              {columns.map((col) => {
                const isSorted = sort.key === col.key;
                const isSortable = col.sortable;
                const isHideable = col.canHide;

                return (
                  <th
                    key={String(col.key)}
                    scope="col"
                    className={classNames(
                      'py-3.5 px-4 text-left text-sm font-semibold text-gray-900 dark:text-white',
                      col.headerClassName,
                      isHideable
                        ? 'hidden lg:table-cell'
                        : '',
                    )}
                  >
                    {isSortable ? (
                      <button
                        type="button"
                        onClick={() => toggleSort(col.key)}
                        className="group inline-flex items-center"
                      >
                        {col.header}
                        <span
                          className={classNames(
                            'ml-2 flex-none rounded-sm',
                            isSorted
                              ? 'bg-gray-100 text-gray-900 group-hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:group-hover:bg-gray-700'
                              : 'invisible text-gray-400 group-hover:visible group-focus:visible dark:text-gray-500',
                          )}
                        >
                          <ChevronDownIcon
                            aria-hidden="true"
                            className={classNames(
                              'size-4',
                              isSorted && sort.direction === 'desc' && 'rotate-180',
                            )}
                          />
                        </span>
                      </button>
                    ) : (
                      col.header
                    )}
                  </th>
                );
              })}

              {renderActions && (
                <th
                  scope="col"
                  className="py-3.5 px-4 text-sm font-semibold text-gray-900 dark:text-white"
                >
                  {actionsHeader}
                </th>
              )}
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200 bg-white dark:divide-white/10 dark:bg-gray-900/40">
          {sortedData.map((row) => {
            const id = getRowId(row);
            const isSelected = selectedIds.includes(id);

            return (
              <tr
                key={id}
                className={classNames(isSelected && 'bg-gray-50 dark:bg-gray-800/60')}
              >
                {selectable && (
                  <td className="px-4">
                      <div className="group grid size-4 grid-cols-1">
                        <input
                          type="checkbox"
                          checked={isSelected}
                          onChange={() => toggleRow(id)}
                          className="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:border-white/20 dark:bg-gray-800/50 dark:checked:border-indigo-500 dark:checked:bg-indigo-500 dark:indeterminate:border-indigo-500 dark:indeterminate:bg-indigo-500 dark:focus-visible:outline-indigo-500"
                        />
                        <svg
                          className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white"
                          viewBox="0 0 14 14"
                          fill="none"
                        >
                          <path
                            className="opacity-0 group-has-checked:opacity-100"
                            d="M3 8L6 11L11 3.5"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                          <path
                            className="opacity-0 group-has-indeterminate:opacity-100"
                            d="M3 7H11"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                      </div>
                    </td>
                  )}

                  {columns.map((col) => (
                    <td
                      key={String(col.key)}
                      className={classNames(
                        'px-4 py-3 text-sm whitespace-nowrap text-gray-700 dark:text-gray-300',
                        col.cellClassName,
                        col.canHide && 'hidden lg:table-cell', // <-- HIER
                      )}
                    >
                      {col.render ? col.render(row) : String((row as any)[col.key] ?? '—')}
                    </td>
                  ))}

                  {renderActions && (
                    <td className="px-4 py-3 text-sm whitespace-nowrap text-right">
                      {renderActions(row)}
                    </td>
                  )}
                </tr>
              );
            })}

            {sortedData.length === 0 && (
              <tr>
                <td
                  colSpan={columns.length + (selectable ? 1 : 0) + (renderActions ? 1 : 0)}
                  className="px-4 py-6 text-center text-sm text-gray-500 dark:text-gray-400"
                >
                  Keine Daten vorhanden.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}