'use client';

import * as React from 'react';
import {
  flexRender,
  getCoreRowModel,
  useReactTable,
  type ColumnDef,
  type SortingState,
  getSortedRowModel,
} from '@tanstack/react-table';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { cn } from '@/lib/utils';
import { ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, ChevronUp, Inbox } from 'lucide-react';

type ColumnMeta = { headerClassName?: string; cellClassName?: string };

type DataTableProps<T> = {
  columns: ColumnDef<T, unknown>[];
  data: T[];
  emptyMessage?: string;
  emptyDescription?: string;
  isLoading?: boolean;
  className?: string;
  /** Sellzy / stok tablosu — gri kenarlık, light-primary metin */
  variant?: 'default' | 'sellzy';
};

export function DataTable<T>({
  columns,
  data,
  emptyMessage = 'Kayıt bulunamadı.',
  emptyDescription,
  isLoading,
  className,
  variant = 'default',
}: DataTableProps<T>) {
  const [sorting, setSorting] = React.useState<SortingState>([]);

  const table = useReactTable({
    data,
    columns,
    state: { sorting },
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });

  return (
    <div className={cn('w-full', variant === 'sellzy' && 'relative overflow-x-auto', className)}>
      <Table>
        <TableHeader>
          {table.getHeaderGroups().map((hg) => (
            <TableRow
              key={hg.id}
              className={cn(
                'border-y bg-gray-100 hover:bg-gray-100 dark:bg-zinc-800/90 dark:hover:bg-zinc-800/90',
                variant === 'sellzy'
                  ? 'border-gray-500/20 dark:border-white/10'
                  : 'border-slate-900/10 dark:border-white/10',
              )}
            >
              {hg.headers.map((header) => {
                const colMeta = header.column.columnDef.meta as ColumnMeta | undefined;
                return (
                <TableHead
                  key={header.id}
                  className={cn(
                    header.column.getCanSort() ? 'cursor-pointer select-none' : '',
                    colMeta?.headerClassName,
                    variant === 'sellzy' && 'text-light-primary-text dark:text-zinc-100',
                  )}
                >
                  {header.isPlaceholder ? null : !header.column.getCanSort() ? (
                    <div className="text-sm font-semibold">{flexRender(header.column.columnDef.header, header.getContext())}</div>
                  ) : (
                    <button
                      type="button"
                      className={cn(
                        'group inline-flex items-center gap-1.5 text-left text-sm font-semibold disabled:cursor-default disabled:opacity-100',
                        variant === 'sellzy'
                          ? 'text-light-primary-text hover:text-light-primary-text dark:text-zinc-100'
                          : 'text-slate-900 hover:text-slate-700 dark:text-zinc-100 dark:hover:text-white',
                      )}
                      onClick={header.column.getToggleSortingHandler()}
                      disabled={!header.column.getCanSort()}
                    >
                      {flexRender(header.column.columnDef.header, header.getContext())}
                      {header.column.getIsSorted() === 'asc' ? (
                        <ChevronUp
                          className={cn(
                            'size-3.5 shrink-0',
                            variant === 'sellzy' ? 'text-light-secondary-text' : 'text-slate-500 dark:text-zinc-400',
                          )}
                          strokeWidth={2}
                        />
                      ) : header.column.getIsSorted() === 'desc' ? (
                        <ChevronDown
                          className={cn(
                            'size-3.5 shrink-0',
                            variant === 'sellzy' ? 'text-light-secondary-text' : 'text-slate-500 dark:text-zinc-400',
                          )}
                          strokeWidth={2}
                        />
                      ) : (
                        <ChevronsUpDown
                          className={cn(
                            'size-3.5 shrink-0 opacity-70 group-hover:opacity-100',
                            variant === 'sellzy' ? 'text-light-secondary-text' : 'text-slate-400 dark:text-zinc-500',
                          )}
                          strokeWidth={2}
                        />
                      )}
                    </button>
                  )}
                </TableHead>
              );
              })}
            </TableRow>
          ))}
        </TableHeader>
        <TableBody>
          {isLoading ? (
            <TableRow className="border-0 hover:bg-transparent dark:hover:bg-transparent">
              <TableCell colSpan={columns.length} className="h-32 px-5 text-center">
                <div className="flex flex-col items-center justify-center gap-2 py-6">
                  <div className="h-5 w-5 animate-pulse rounded-full bg-gray-200 dark:bg-zinc-700" />
                  <p className="text-sm text-slate-500 dark:text-zinc-400">Yükleniyor…</p>
                </div>
              </TableCell>
            </TableRow>
          ) : table.getRowModel().rows.length === 0 ? (
            <TableRow className="border-0 hover:bg-transparent dark:hover:bg-transparent">
              <TableCell colSpan={columns.length} className="h-0 p-0 px-5">
                <div className="flex min-h-[220px] flex-col items-center justify-center gap-3 px-6 py-14 text-center">
                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 dark:bg-zinc-800/80">
                    <Inbox className="h-6 w-6 text-slate-400 dark:text-zinc-500" strokeWidth={1.5} />
                  </div>
                  <div className="max-w-sm space-y-1">
                    <p className="text-[15px] font-medium tracking-tight text-slate-900 dark:text-zinc-100">{emptyMessage}</p>
                    {emptyDescription ? (
                      <p className="text-sm leading-relaxed text-slate-500 dark:text-zinc-400">{emptyDescription}</p>
                    ) : null}
                  </div>
                </div>
              </TableCell>
            </TableRow>
          ) : (
            table.getRowModel().rows.map((row) => (
              <TableRow
                key={row.id}
                data-state={row.getIsSelected() && 'selected'}
                className={
                  variant === 'sellzy'
                    ? 'border-b border-gray-500/20 last:border-0 hover:bg-gray-50/50 dark:border-white/10 dark:hover:bg-zinc-800/40'
                    : undefined
                }
              >
                {row.getVisibleCells().map((cell) => {
                  const colMeta = cell.column.columnDef.meta as ColumnMeta | undefined;
                  return (
                    <TableCell key={cell.id} className={colMeta?.cellClassName}>
                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                    </TableCell>
                  );
                })}
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </div>
  );
}

function visiblePageNumbers(page: number, lastPage: number, max = 5): number[] {
  if (lastPage <= max) return Array.from({ length: lastPage }, (_, i) => i + 1);
  let end = Math.min(lastPage, Math.max(max, page + 2));
  let start = Math.max(1, end - max + 1);
  end = Math.min(lastPage, start + max - 1);
  start = Math.max(1, end - max + 1);
  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
}

export function PaginationBar({
  page,
  totalPages,
  total,
  limit,
  onPageChange,
  className,
  appearance = 'default',
}: {
  page: number;
  totalPages: number;
  total: number;
  limit: number;
  onPageChange: (p: number) => void;
  className?: string;
  /** Stok / Sellzy — sağa hizalı, ince üst çizgi */
  appearance?: 'default' | 'sellzy';
}) {
  const lastPage = Math.max(1, totalPages);
  const from = total === 0 ? 0 : (page - 1) * limit + 1;
  const to = Math.min(page * limit, total);
  const pages = visiblePageNumbers(page, lastPage, 5);

  const navBtn = cn(
    'flex shrink-0 items-center justify-center rounded-full text-gray-600 transition-colors hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40 dark:text-zinc-400 dark:hover:bg-zinc-800',
    appearance === 'sellzy' ? 'h-[30px] w-10' : 'h-9 w-10',
  );

  const pageBtn = (p: number) => (
    <button
      key={p}
      type="button"
      onClick={() => onPageChange(p)}
      className={cn(
        'flex shrink-0 items-center justify-center rounded-full text-sm font-medium transition-colors',
        appearance === 'sellzy' ? 'h-[30px] w-10' : 'h-9 w-10',
        p === page
          ? 'bg-brand-500/15 font-semibold text-primary-dark dark:bg-brand-500/20 dark:text-brand-300'
          : 'text-gray-600 hover:bg-gray-50 dark:text-zinc-400 dark:hover:bg-zinc-800',
      )}
    >
      {p}
    </button>
  );

  return (
    <div
      className={cn(
        'flex gap-3 border-t p-4 sm:p-6 dark:border-white/10',
        appearance === 'sellzy'
          ? 'border-gray-500/20 justify-end'
          : 'flex-col border-slate-900/10 sm:flex-row sm:items-center sm:justify-between',
        className,
      )}
    >
      {appearance === 'default' && total > 0 ? (
        <p className="order-2 text-sm text-slate-500 dark:text-zinc-400 sm:order-1">
          <span className="font-semibold text-slate-900 dark:text-zinc-100">{total}</span> kayıt
          {total > 0 ? (
            <>
              {' '}
              ·{' '}
              <span className="font-semibold text-slate-900 dark:text-zinc-100">{from}</span>–
              <span className="font-semibold text-slate-900 dark:text-zinc-100">{to}</span>
            </>
          ) : null}
        </p>
      ) : appearance === 'default' ? (
        <span className="order-2 sm:order-1" />
      ) : null}
      <div
        className={cn(
          'flex items-center gap-2',
          appearance === 'default' && 'order-1 justify-end sm:order-2',
          appearance === 'sellzy' && 'justify-end',
        )}
      >
        <button
          type="button"
          disabled={page <= 1}
          onClick={() => onPageChange(page - 1)}
          className={navBtn}
          aria-label="Önceki sayfa"
        >
          <ChevronLeft className="size-5 shrink-0" strokeWidth={2} />
        </button>
        <div className="flex items-center gap-1">{pages.map(pageBtn)}</div>
        <button
          type="button"
          disabled={page >= lastPage}
          onClick={() => onPageChange(page + 1)}
          className={navBtn}
          aria-label="Sonraki sayfa"
        >
          <ChevronRight className="size-5 shrink-0" strokeWidth={2} />
        </button>
      </div>
    </div>
  );
}