"use client";

import {
  ColumnDef,
  SortingState,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";
import {
  ArrowUpDown,
  Check,
  ChevronDown,
  ChevronUp,
  MoreHorizontal,
  Pencil,
  Trash2,
} from "lucide-react";
import Link from "next/link";
import * as React from "react";

import { deleteCommissionRequest } from "@/actions/commissions/deleteCommissionRequest";
import { getCommissionRequestsTablePage } from "@/actions/commissions/getCommissionRequestsTablePage";
import { setCommissionRequestStatus } from "@/actions/commissions/setCommissionRequestStatus";
import type {
  CommissionRequestTableRow,
  CommissionStatus,
} from "@/schemas/commissions/tableSchema";

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

type TriState = "any" | "true" | "false";

function useDebouncedValue<T>(value: T, delayMs: number) {
  const [debounced, setDebounced] = React.useState(value);
  React.useEffect(() => {
    const t = setTimeout(() => setDebounced(value), delayMs);
    return () => clearTimeout(t);
  }, [value, delayMs]);
  return debounced;
}

function SortHeader(props: { title: string; column: any }) {
  const sorted = props.column.getIsSorted() as false | "asc" | "desc";

  return (
    <button
      type="button"
      onClick={() => props.column.toggleSorting(sorted === "asc")}
      className="group inline-flex items-center gap-2 font-semibold text-foreground/90 hover:text-foreground"
    >
      <span>{props.title}</span>
      {sorted === "asc" ? (
        <ChevronUp className="h-4 w-4" />
      ) : sorted === "desc" ? (
        <ChevronDown className="h-4 w-4" />
      ) : (
        <ArrowUpDown className="h-4 w-4 opacity-60 group-hover:opacity-100" />
      )}
    </button>
  );
}

function StatusBadge({ status }: { status: CommissionStatus }) {
  const variant =
    status === "COMPLETED"
      ? "default"
      : status === "REJECTED" || status === "SPAM"
        ? "destructive"
        : "secondary";

  return (
    <Badge variant={variant as any} className="px-2 py-0.5">
      {status}
    </Badge>
  );
}

function TriSelectInline(props: { value: TriState; onChange: (v: TriState) => void }) {
  return (
    <Select value={props.value} onValueChange={(v) => props.onChange(v as TriState)}>
      <SelectTrigger className="h-9">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="any">Any</SelectItem>
        <SelectItem value="true">Yes</SelectItem>
        <SelectItem value="false">No</SelectItem>
      </SelectContent>
    </Select>
  );
}

const STATUS_OPTIONS: CommissionStatus[] = [
  "NEW",
  "REVIEWING",
  "ACCEPTED",
  "REJECTED",
  "COMPLETED",
  "SPAM",
];

type Filters = {
  q: string;
  email: string;
  status: "any" | CommissionStatus;
  hasFiles: TriState;
};

export function CommissionRequestsTable() {
  const [sorting, setSorting] = React.useState<SortingState>([
    { id: "createdAt", desc: true },
  ]);
  const [pageIndex, setPageIndex] = React.useState(0);
  const [pageSize, setPageSize] = React.useState(25);

  const [filters, setFilters] = React.useState<Filters>({
    q: "",
    email: "",
    status: "any",
    hasFiles: "any",
  });

  const debouncedQ = useDebouncedValue(filters.q, 300);
  const debouncedEmail = useDebouncedValue(filters.email, 300);

  const [rows, setRows] = React.useState<CommissionRequestTableRow[]>([]);
  const [total, setTotal] = React.useState(0);

  const [isPending, startTransition] = React.useTransition();

  // Delete dialog
  const [deleteOpen, setDeleteOpen] = React.useState(false);
  const [deleteTarget, setDeleteTarget] = React.useState<{
    id: string;
    label: string;
  } | null>(null);

  const pageCount = Math.max(1, Math.ceil(total / pageSize));

  const refresh = React.useCallback(() => {
    startTransition(async () => {
      const res = await getCommissionRequestsTablePage({
        pagination: { pageIndex, pageSize },
        sorting,
        filters: {
          q: debouncedQ || undefined,
          email: debouncedEmail || undefined,
          status: filters.status,
          hasFiles: filters.hasFiles,
        },
      });

      setRows(res.rows);
      setTotal(res.total);
    });
  }, [
    pageIndex,
    pageSize,
    sorting,
    debouncedQ,
    debouncedEmail,
    filters.status,
    filters.hasFiles,
  ]);

  React.useEffect(() => {
    refresh();
  }, [refresh]);

  const columns = React.useMemo<ColumnDef<CommissionRequestTableRow>[]>(
    () => [
      {
        accessorKey: "createdAt",
        header: ({ column }) => <SortHeader title="Submitted" column={column} />,
        cell: ({ row }) => (
          <span className="text-sm text-foreground/80">
            {new Date(row.original.createdAt).toLocaleString()}
          </span>
        ),
      },
      {
        accessorKey: "filesCount",
        header: ({ column }) => <SortHeader title="Files" column={column} />,
        cell: ({ row }) => (
          <span className="text-sm font-medium tabular-nums">{row.original.filesCount}</span>
        ),
      },
      {
        id: "requestor",
        header: "Requestor",
        enableSorting: false,
        cell: ({ row }) => {
          const r = row.original;
          return (
            <div className="min-w-0 max-w-[420px]">
              <div className="truncate text-sm font-medium">{r.customerName}</div>
              <div className="truncate text-[11px] leading-4 text-muted-foreground">
                {r.customerEmail}
                {r.customerSocials ? ` · ${r.customerSocials}` : ""}
              </div>
            </div>
          );
        },
      },
      {
        accessorKey: "status",
        header: ({ column }) => <SortHeader title="Status" column={column} />,
        cell: ({ row }) => <StatusBadge status={row.original.status} />,
      },
      {
        id: "complete",
        header: "",
        enableSorting: false,
        cell: ({ row }) => {
          const r = row.original;
          const isCompleted = r.status === "COMPLETED";

          return (
            <div className="flex justify-center">
              <Button
                variant={isCompleted ? "secondary" : "outline"}
                size="icon"
                className="h-9 w-9"
                disabled={isPending || isCompleted}
                title={isCompleted ? "Completed" : "Mark as completed"}
                onClick={() => {
                  if (isCompleted) return;
                  startTransition(async () => {
                    await setCommissionRequestStatus({ id: r.id, status: "COMPLETED" });
                    refresh();
                  });
                }}
              >
                <Check className="h-4 w-4" />
                <span className="sr-only">Mark complete</span>
              </Button>
            </div>
          );
        },
      },
      {
        id: "actions",
        header: "",
        enableSorting: false,
        cell: ({ row }) => {
          const r = row.original;

          return (
            <div className="flex justify-end">
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon" className="h-9 w-9">
                    <MoreHorizontal className="h-4 w-4" />
                    <span className="sr-only">Open row actions</span>
                  </Button>
                </DropdownMenuTrigger>

                <DropdownMenuContent align="end" className="w-56">
                  {/* status changes */}
                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
                    Set status
                  </div>
                  {STATUS_OPTIONS.filter((s) => s !== "COMPLETED").map((s) => (
                    <DropdownMenuItem
                      key={s}
                      className="cursor-pointer"
                      onSelect={(e) => {
                        e.preventDefault();
                        startTransition(async () => {
                          await setCommissionRequestStatus({ id: r.id, status: s });
                          refresh();
                        });
                      }}
                    >
                      {s}
                    </DropdownMenuItem>
                  ))}

                  <DropdownMenuSeparator />

                  <DropdownMenuItem asChild>
                    <Link href={`/commissions/requests/${r.id}`} className="cursor-pointer">
                      <Pencil className="mr-2 h-4 w-4" />
                      Edit
                    </Link>
                  </DropdownMenuItem>

                  <DropdownMenuSeparator />

                  <DropdownMenuItem
                    className="cursor-pointer text-destructive focus:text-destructive"
                    onSelect={(e) => {
                      e.preventDefault();
                      setDeleteTarget({
                        id: r.id,
                        label: `${r.customerName} (${r.customerEmail})`,
                      });
                      setDeleteOpen(true);
                    }}
                  >
                    <Trash2 className="mr-2 h-4 w-4" />
                    Delete
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          );
        },
      },
    ],
    [isPending, refresh],
  );

  const table = useReactTable({
    data: rows,
    columns,
    state: { sorting },
    manualPagination: true,
    manualSorting: true,
    pageCount,
    onSortingChange: (updater) => {
      setSorting((prev) => (typeof updater === "function" ? updater(prev) : updater));
      setPageIndex(0);
    },
    getCoreRowModel: getCoreRowModel(),
  });

  const headerGroup = table.getHeaderGroups()[0];

  return (
    <div className="space-y-4">
      <div className="overflow-hidden rounded-2xl border border-border/60 bg-card shadow-sm ring-1 ring-border/40">
        <div className="relative">
          <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-6 bg-gradient-to-b from-background/60 to-transparent" />
          <Table>
            <TableHeader className="sticky top-0 z-20 bg-card">
              <TableRow className="hover:bg-transparent">
                {headerGroup.headers.map((header) => (
                  <TableHead
                    key={header.id}
                    className="whitespace-nowrap border-b border-border/70 bg-muted/40 py-3 text-xs font-semibold uppercase tracking-wide text-foreground/80"
                  >
                    {header.isPlaceholder
                      ? null
                      : flexRender(header.column.columnDef.header, header.getContext())}
                  </TableHead>
                ))}
              </TableRow>

              {/* filter row */}
              <TableRow className="hover:bg-transparent">
                {headerGroup.headers.map((header) => {
                  const colId = header.column.id;

                  return (
                    <TableHead key={header.id} className="border-b border-border/70 bg-muted/30 py-2">
                      {colId === "createdAt" ? (
                        <div className="h-9" />
                      ) : colId === "filesCount" ? (
                        <TriSelectInline
                          value={filters.hasFiles}
                          onChange={(v) => {
                            setFilters((f) => ({ ...f, hasFiles: v }));
                            setPageIndex(0);
                          }}
                        />
                      ) : colId === "requestor" ? (
                        <div className="flex gap-2">
                          <Input
                            className="h-9"
                            placeholder="Search name/message…"
                            value={filters.q}
                            onChange={(e) => {
                              setFilters((f) => ({ ...f, q: e.target.value }));
                              setPageIndex(0);
                            }}
                          />
                          <Input
                            className="h-9"
                            placeholder="Email…"
                            value={filters.email}
                            onChange={(e) => {
                              setFilters((f) => ({ ...f, email: e.target.value }));
                              setPageIndex(0);
                            }}
                          />
                        </div>
                      ) : colId === "status" ? (
                        <Select
                          value={filters.status}
                          onValueChange={(v) => {
                            setFilters((f) => ({ ...f, status: v as any }));
                            setPageIndex(0);
                          }}
                        >
                          <SelectTrigger className="h-9">
                            <SelectValue placeholder="Any" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="any">Any</SelectItem>
                            {STATUS_OPTIONS.map((s) => (
                              <SelectItem key={s} value={s}>
                                {s}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      ) : (
                        <div className="h-9" />
                      )}
                    </TableHead>
                  );
                })}
              </TableRow>
            </TableHeader>

            <TableBody>
              {rows.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={columns.length} className="py-14 text-center">
                    <div className="text-sm font-medium">
                      {isPending ? "Loading…" : "No results."}
                    </div>
                    <div className="mt-1 text-xs text-muted-foreground">
                      Adjust filters or change page size.
                    </div>
                  </TableCell>
                </TableRow>
              ) : (
                table.getRowModel().rows.map((r, idx) => (
                  <TableRow
                    key={r.id}
                    className={[
                      "transition-colors",
                      "hover:bg-muted/50",
                      idx % 2 === 0 ? "bg-background" : "bg-muted/10",
                    ].join(" ")}
                  >
                    {r.getVisibleCells().map((cell) => (
                      <TableCell key={cell.id} className="py-3 align-top border-b border-border/40">
                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                      </TableCell>
                    ))}
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>
      </div>

      {/* pagination */}
      <div className="flex items-center justify-between gap-3">
        <div className="text-sm text-muted-foreground">
          {isPending ? "Updating…" : null} Total: {total}
        </div>

        <div className="flex items-center gap-2">
          <Select
            value={String(pageSize)}
            onValueChange={(v) => {
              setPageSize(Number(v));
              setPageIndex(0);
            }}
          >
            <SelectTrigger className="h-9 w-[120px]">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {[10, 25, 50, 100].map((n) => (
                <SelectItem key={n} value={String(n)}>
                  {n} / page
                </SelectItem>
              ))}
            </SelectContent>
          </Select>

          <Button
            variant="outline"
            className="h-9"
            onClick={() => setPageIndex(0)}
            disabled={pageIndex === 0 || isPending}
          >
            First
          </Button>
          <Button
            variant="outline"
            className="h-9"
            onClick={() => setPageIndex((p) => Math.max(0, p - 1))}
            disabled={pageIndex === 0 || isPending}
          >
            Prev
          </Button>

          <div className="min-w-[120px] text-center text-sm tabular-nums">
            Page {pageIndex + 1} / {pageCount}
          </div>

          <Button
            variant="outline"
            className="h-9"
            onClick={() => setPageIndex((p) => Math.min(pageCount - 1, p + 1))}
            disabled={pageIndex >= pageCount - 1 || isPending}
          >
            Next
          </Button>
          <Button
            variant="outline"
            className="h-9"
            onClick={() => setPageIndex(Math.max(0, pageCount - 1))}
            disabled={pageIndex >= pageCount - 1 || isPending}
          >
            Last
          </Button>
        </div>
      </div>

      {/* delete confirmation */}
      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete request?</AlertDialogTitle>
            <AlertDialogDescription>
              This will delete{" "}
              <span className="font-medium">{deleteTarget?.label}</span>. This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
            <AlertDialogAction
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
              disabled={isPending || !deleteTarget}
              onClick={() => {
                const target = deleteTarget;
                if (!target) return;

                startTransition(async () => {
                  await deleteCommissionRequest(target.id);
                  setDeleteOpen(false);
                  setDeleteTarget(null);

                  // If current page becomes empty after delete, clamp page index.
                  setPageIndex((p) => (p > 0 && rows.length === 1 ? p - 1 : p));
                  refresh();
                });
              }}
            >
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}