import {
  DndContext,
  KeyboardSensor,
  PointerSensor,
  closestCenter,
  useSensor,
  useSensors,
  type DragEndEvent,
} from "@dnd-kit/core";
import {
  SortableContext,
  sortableKeyboardCoordinates,
  useSortable,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { Button } from "@tailor-platform/app-shell";
import { GripVertical, Plus, Trash2 } from "lucide-react";
import type {
  ArrayPath,
  FieldArray,
  FieldValues,
  UseFieldArrayReturn,
  UseFormReturn,
} from "react-hook-form";
import { LinesFooter, useClientPagination } from "@/components/composed/line-pagination-footer";
import { Label } from "@/components/ui/label";

export interface LineColumn<TForm extends FieldValues> {
  id: string;
  header: React.ReactNode;
  width?: string;
  align?: "left" | "right" | "center";
  cell: (ctx: { index: number; form: UseFormReturn<TForm>; rowId: string }) => React.ReactNode;
}

export interface LineItemsTableProps<TForm extends FieldValues, TName extends ArrayPath<TForm>> {
  form: UseFormReturn<TForm>;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  fieldArray: UseFieldArrayReturn<TForm, TName, any>;
  columns: LineColumn<TForm>[];
  label?: React.ReactNode;
  newRow?: () => FieldArray<TForm, TName>;
  addLabel?: string;
  canRemove?: (index: number) => boolean;
  emptyMessage?: React.ReactNode;
  arrayErrorMessage?: string;
  sortable?: boolean;
  /**
   * When set, rows are paginated client-side (all rows stay in the field array;
   * only one page renders at a time) and a list-style footer is shown. Drag
   * reordering works within the visible page. Omit to render every row at once
   * (the default — unchanged behaviour for non-paginated callers).
   */
  pageSize?: number;
  /** Page-size options for the footer's selector. Defaults to [10, 25, 50, 100]. */
  pageSizeOptions?: number[];
}

const alignClass = (align?: "left" | "right" | "center") =>
  align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";

/** A field plus its index in the full (unpaginated) field array. */
interface IndexedRow<TForm extends FieldValues, TName extends ArrayPath<TForm>> {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  field: UseFieldArrayReturn<TForm, TName, any>["fields"][number];
  index: number;
}

// Shared cell + remove-button rendering used by both row variants.
interface RowCellsProps<TForm extends FieldValues> {
  rowId: string;
  index: number;
  columns: LineColumn<TForm>[];
  form: UseFormReturn<TForm>;
  removable: boolean;
  onRemove: () => void;
}

function RowCells<TForm extends FieldValues>({
  rowId,
  index,
  columns,
  form,
  removable,
  onRemove,
}: RowCellsProps<TForm>) {
  return (
    <>
      {columns.map((col) => (
        <td key={col.id} className={`px-3 py-2 ${alignClass(col.align)}`}>
          {col.cell({ index, form, rowId })}
        </td>
      ))}
      <td className="px-3 py-2">
        {removable && (
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={onRemove}
            aria-label="Remove line"
          >
            <Trash2 className="h-4 w-4" />
          </Button>
        )}
      </td>
    </>
  );
}

// Non-sortable row: no useSortable hook, no provider dependency.
function PlainRow<TForm extends FieldValues>(props: RowCellsProps<TForm>) {
  return (
    <tr className="border-b last:border-b-0 align-top">
      <RowCells {...props} />
    </tr>
  );
}

// Sortable row: opt-in path that calls useSortable. Only mounted when the
// parent renders a DndContext + SortableContext.
function SortableRow<TForm extends FieldValues>(props: RowCellsProps<TForm>) {
  const { rowId, index } = props;
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: rowId,
  });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : undefined,
  };

  return (
    <tr ref={setNodeRef} style={style} className="border-b last:border-b-0 align-top">
      <td className="w-8 px-2 py-2">
        <button
          type="button"
          className="flex h-8 w-6 cursor-grab touch-none items-center justify-center rounded text-muted-foreground hover:bg-muted active:cursor-grabbing"
          aria-label={`Drag to reorder line ${index + 1}`}
          {...attributes}
          {...listeners}
        >
          <GripVertical className="h-4 w-4" />
        </button>
      </td>
      <RowCells {...props} />
    </tr>
  );
}

// Inner table — sortable variant. Renders the grip-handle column and uses
// SortableRow per line. `rows` is the visible slice; each row carries its full
// field-array index so drag/move operate on the underlying array, not the slice.
function SortableTable<TForm extends FieldValues, TName extends ArrayPath<TForm>>({
  rows,
  columns,
  form,
  canRemove,
  remove,
  move,
}: {
  rows: IndexedRow<TForm, TName>[];
  columns: LineColumn<TForm>[];
  form: UseFormReturn<TForm>;
  canRemove?: (index: number) => boolean;
  remove: (index: number) => void;
  move: (from: number, to: number) => void;
}) {
  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
  );

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
    if (!over || active.id === over.id) return;
    // Resolve to full field-array indices via the visible rows (both endpoints
    // are on the current page, so cross-page drag isn't possible by design).
    const from = rows.find((r) => r.field.id === active.id)?.index;
    const to = rows.find((r) => r.field.id === over.id)?.index;
    if (from == null || to == null) return;
    move(from, to);
  };

  return (
    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
      <SortableContext items={rows.map((r) => r.field.id)} strategy={verticalListSortingStrategy}>
        <div className="rounded-md border">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b">
                <th className="w-8 px-2 py-2" aria-hidden />
                {columns.map((col) => (
                  <th
                    key={col.id}
                    className={`px-3 py-2 font-medium ${alignClass(col.align)} ${col.width ?? ""}`}
                  >
                    {col.header}
                  </th>
                ))}
                <th className="w-10 px-3 py-2" />
              </tr>
            </thead>
            <tbody>
              {rows.map(({ field, index }) => (
                <SortableRow<TForm>
                  key={field.id}
                  rowId={field.id}
                  index={index}
                  columns={columns}
                  form={form}
                  removable={canRemove ? canRemove(index) : true}
                  onRemove={() => remove(index)}
                />
              ))}
            </tbody>
          </table>
        </div>
      </SortableContext>
    </DndContext>
  );
}

// Inner table — plain variant. No dnd-kit imports reach the rendered tree.
function PlainTable<TForm extends FieldValues, TName extends ArrayPath<TForm>>({
  rows,
  columns,
  form,
  canRemove,
  remove,
}: {
  rows: IndexedRow<TForm, TName>[];
  columns: LineColumn<TForm>[];
  form: UseFormReturn<TForm>;
  canRemove?: (index: number) => boolean;
  remove: (index: number) => void;
}) {
  return (
    <div className="rounded-md border">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b">
            {columns.map((col) => (
              <th
                key={col.id}
                className={`px-3 py-2 font-medium ${alignClass(col.align)} ${col.width ?? ""}`}
              >
                {col.header}
              </th>
            ))}
            <th className="w-10 px-3 py-2" />
          </tr>
        </thead>
        <tbody>
          {rows.map(({ field, index }) => (
            <PlainRow<TForm>
              key={field.id}
              rowId={field.id}
              index={index}
              columns={columns}
              form={form}
              removable={canRemove ? canRemove(index) : true}
              onRemove={() => remove(index)}
            />
          ))}
        </tbody>
      </table>
    </div>
  );
}

export function LineItemsTable<TForm extends FieldValues, TName extends ArrayPath<TForm>>({
  form,
  fieldArray,
  columns,
  label,
  newRow,
  addLabel = "Add Line",
  canRemove,
  emptyMessage,
  arrayErrorMessage,
  sortable = false,
  pageSize,
  pageSizeOptions = [10, 25, 50, 100],
}: LineItemsTableProps<TForm, TName>) {
  const { fields, append, remove, move } = fieldArray;

  const paginated = pageSize != null;
  // Hook is called unconditionally (rules of hooks); its result is only used
  // when `pageSize` is set. All rows stay in the field array; only the slice
  // rendered changes, so the diff / drag still see every row.
  const pager = useClientPagination(fields.length, pageSize ?? 100);

  // The full field-array index is the slice offset plus the position within the
  // slice — computed directly (O(n)) rather than via fields.indexOf (O(n²), and
  // wrong if two rows ever share object identity).
  const offset = paginated ? pager.start : 0;
  const visibleRows: IndexedRow<TForm, TName>[] = (
    paginated ? fields.slice(pager.start, pager.end) : fields
  ).map((field, i) => ({ field, index: offset + i }));

  return (
    <div className="space-y-2">
      {label && <Label>{label}</Label>}

      {fields.length > 0 ? (
        <>
          {sortable ? (
            <SortableTable<TForm, TName>
              rows={visibleRows}
              columns={columns}
              form={form}
              canRemove={canRemove}
              remove={remove}
              move={move}
            />
          ) : (
            <PlainTable<TForm, TName>
              rows={visibleRows}
              columns={columns}
              form={form}
              canRemove={canRemove}
              remove={remove}
            />
          )}
          {paginated ? (
            <LinesFooter
              total={fields.length}
              page={pager.page}
              pageSize={pager.pageSize}
              pageSizeOptions={pageSizeOptions}
              onPageChange={pager.setPage}
              onPageSizeChange={pager.setPageSize}
            />
          ) : null}
        </>
      ) : (
        emptyMessage && <p className="text-sm text-muted-foreground">{emptyMessage}</p>
      )}

      {newRow && (
        <Button type="button" variant="outline" size="sm" onClick={() => append(newRow())}>
          <Plus className="mr-1 h-4 w-4" />
          {addLabel}
        </Button>
      )}

      {arrayErrorMessage && <p className="text-sm text-destructive">{arrayErrorMessage}</p>}
    </div>
  );
}