'use client';

import { useMemo, useState } from 'react';
import Link from 'next/link';
import { useQuery } from '@tanstack/react-query';
import {
  ColumnDef,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  PaginationState,
  SortingState,
  useReactTable,
} from '@tanstack/react-table';
import { Filter, Search, Settings2, X } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { apiClient } from '@/lib/api';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardFooter,
  CardHeader,
  CardHeading,
  CardTable,
  CardToolbar,
} from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { DataGrid, useDataGrid } from '@/components/ui/data-grid';
import { DataGridColumnHeader } from '@/components/ui/data-grid-column-header';
import { DataGridColumnVisibility } from '@/components/ui/data-grid-column-visibility';
import { DataGridPagination } from '@/components/ui/data-grid-pagination';
import { DataGridTable } from '@/components/ui/data-grid-table';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover';
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';

interface RequestBackend {
  id: number;
  request_number: string;
  created_at: string;
  project_name: string;
  sample_category: string;
  sample_sub_categories: string[];
  sample_location: string;
  status: string;
  date_time: string;
  is_urgent: boolean;
}

interface StatusOption {
  id: number;
  name: string;
}

interface BackendPaginationLinks {
  first: string;
  last: string;
  prev: string | null;
  next: string | null;
}

interface BackendPaginationMeta {
  current_page: number;
  from: number;
  last_page: number;
  path: string;
  per_page: number;
  to: number;
  total: number;
}

interface BackendResponse<T> {
  success: boolean;
  data: T;
  links: BackendPaginationLinks;
  meta: BackendPaginationMeta;
  message: string;
}

const PendingRequestTable = () => {
  const { t } = useTranslation();
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  });
  const [sorting, setSorting] = useState<SortingState>([
    { id: 'request_number', desc: true },
  ]);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedStatuses, setSelectedStatuses] = useState<number[]>([]);

  // Fetch Status Options
  const { data: statusesResponse } = useQuery({
    queryKey: ['request-statuses'],
    queryFn: async () => {
      const res = await apiClient.get<{ data: StatusOption[] }>(
        '/contractor/select-options/statuses',
        { requireAuth: true },
      );
      return res.data;
    },
  });

  const statuses = statusesResponse?.data || [];

  // Fetch Pending Requests
  const { data: response, isLoading } = useQuery({
    queryKey: [
      'pending-requests',
      pagination.pageIndex,
      pagination.pageSize,
      searchQuery,
      selectedStatuses,
    ],
    queryFn: async () => {
      const params: Record<string, any> = {
        page: pagination.pageIndex + 1,
        per_page: pagination.pageSize,
        search: searchQuery || undefined,
      };

      selectedStatuses.forEach((id, index) => {
        params[`status_id[${index}]`] = id;
      });

      const res = await apiClient.get<BackendResponse<RequestBackend[]>>(
        '/contractor/test-requests/in-progress',
        {
          requireAuth: true,
          params,
        },
      );
      return res.data;
    },
  });

  const requestsData = response?.data || [];
  const totalCount = response?.meta?.total || 0;
  const pageCount = response?.meta?.last_page || 0;

  const handleStatusChange = (checked: boolean, id: number) => {
    setSelectedStatuses((prev) =>
      checked ? [...prev, id] : prev.filter((v) => v !== id),
    );
  };

  const columns = useMemo<ColumnDef<RequestBackend>[]>(
    () => [
      {
        id: 'request_number',
        accessorKey: 'request_number',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('requests.request_number')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <Link
            href="#"
            className="text-sm font-medium text-mono hover:text-primary-active underline decoration-dotted"
          >
            {row.original.request_number}
          </Link>
        ),
        enableSorting: true,
        size: 180,
        meta: { headerTitle: t('requests.request_number') },
      },
      {
        id: 'project_name',
        accessorKey: 'project_name',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('requests.labels.project_name')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <span className="font-normal text-foreground">
            {row.original.project_name}
          </span>
        ),
        enableSorting: true,
        size: 220,
        meta: { headerTitle: t('requests.labels.project_name') },
      },
      {
        id: 'sample_sub_categories',
        accessorFn: (row) => row.sample_sub_categories.join(' - '),
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('requests.labels.sample_subcategory')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <span className="text-foreground font-normal line-clamp-2">
            {row.original.sample_sub_categories.join(' - ')}
          </span>
        ),
        enableSorting: true,
        size: 250,
        meta: { headerTitle: t('requests.labels.sample_subcategory') },
      },
      {
        id: 'sample_location',
        accessorKey: 'sample_location',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('requests.labels.sample_location')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <span className="text-foreground font-normal">
            {row.original.sample_location}
          </span>
        ),
        enableSorting: true,
        size: 200,
        meta: { headerTitle: t('requests.labels.sample_location') },
      },
      {
        id: 'status',
        accessorKey: 'status',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('requests.labels.request_status')}
            column={column}
          />
        ),
        cell: ({ row }) => {
          const status = row.original.status;
          let variant: 'success' | 'info' | 'warning' | 'outline' = 'outline';

          if (status === 'تمت الموافقة') variant = 'success';
          else if (status === 'قيد التنفيذ') variant = 'info';
          else if (status === 'في انتظار المراجعة') variant = 'warning';

          return <Badge variant={variant}>{status}</Badge>;
        },
        enableSorting: true,
        size: 150,
        meta: { headerTitle: t('requests.labels.request_status') },
      },
      {
        id: 'created_at',
        accessorKey: 'created_at',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('requests.labels.submit_time')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <span className="text-foreground font-normal">
            {row.original.created_at}
          </span>
        ),
        enableSorting: true,
        size: 180,
        meta: { headerTitle: t('requests.labels.submit_time') },
      },
      {
        id: 'date_time',
        accessorKey: 'date_time',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('requests.labels.date_&_time')}
            column={column}
          />
        ),
        cell: ({ row }) => {
          if (row.original.status === 'تمت الموافقة') {
            return (
              <span className="text-foreground font-normal">
                {row.original.date_time}
              </span>
            );
          }
          return <span className="text-muted-foreground">—</span>;
        },
        enableSorting: true,
        size: 180,
        meta: { headerTitle: t('requests.labels.date_&_time') },
      },
    ],
    [t],
  );

  const table = useReactTable({
    columns,
    data: requestsData,
    pageCount: pageCount,
    manualPagination: true,
    getRowId: (row: RequestBackend) => String(row.id),
    state: {
      pagination,
      sorting,
    },
    columnResizeMode: 'onChange',
    onPaginationChange: setPagination,
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });

  const Toolbar = () => {
    const { table } = useDataGrid();

    return (
      <CardToolbar>
        <DataGridColumnVisibility
          table={table}
          trigger={
            <Button variant="outline">
              <Settings2 /> {t('requests.buttons.table_columns')}
            </Button>
          }
        />
      </CardToolbar>
    );
  };

  return (
    <DataGrid
      emptyMessage={
        isLoading ? t('requests.loading') : t('requests.empty_table')
      }
      table={table}
      recordCount={totalCount}
      tableLayout={{
        columnsPinnable: true,
        columnsMovable: true,
        columnsVisibility: true,
        cellBorder: true,
      }}
    >
      <Card>
        <CardHeader>
          <CardHeading>
            <div className="flex items-center gap-2.5">
              <div className="relative">
                <Search className="size-4 text-muted-foreground absolute start-3 top-1/2 -translate-y-1/2" />
                <Input
                  placeholder={t('requests.placeholders.request_search')}
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="ps-9 w-60"
                />
                {searchQuery.length > 0 && (
                  <Button
                    mode="icon"
                    variant="ghost"
                    className="absolute end-1.5 top-1/2 -translate-y-1/2 h-6 w-6"
                    onClick={() => setSearchQuery('')}
                  >
                    <X />
                  </Button>
                )}
              </div>

              {/* Status Filter */}
              <Popover>
                <PopoverTrigger asChild>
                  <Button variant="outline">
                    <Filter className="size-4" />
                    {t('requests.buttons.status')}
                    {selectedStatuses.length > 0 && (
                      <Badge size="sm" variant="outline" className="ms-1">
                        {selectedStatuses.length}
                      </Badge>
                    )}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-48 p-3" align="start">
                  <div className="space-y-3">
                    <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                      {t('requests.filters.title') ?? 'Filter by Status'}
                    </div>
                    <div className="space-y-2">
                      {statuses.map((status) => (
                        <div
                          key={status.id}
                          className="flex items-center gap-2.5 py-1"
                        >
                          <Checkbox
                            id={`status-${status.id}`}
                            checked={selectedStatuses.includes(status.id)}
                            onCheckedChange={(checked) =>
                              handleStatusChange(checked === true, status.id)
                            }
                          />
                          <Label
                            htmlFor={`status-${status.id}`}
                            className="grow cursor-pointer font-medium text-sm"
                          >
                            {status.name}
                          </Label>
                        </div>
                      ))}
                    </div>
                    {selectedStatuses.length > 0 && (
                      <Button
                        variant="outline"
                        size="sm"
                        className="w-full mt-2 text-xs h-8"
                        onClick={() => setSelectedStatuses([])}
                      >
                        {t('requests.buttons.clear_filters') ?? 'Clear Filters'}
                      </Button>
                    )}
                  </div>
                </PopoverContent>
              </Popover>
            </div>
          </CardHeading>
          <Toolbar />
        </CardHeader>
        <CardTable>
          <ScrollArea>
            <DataGridTable />
            <ScrollBar orientation="horizontal" />
          </ScrollArea>
        </CardTable>
        <CardFooter>
          <DataGridPagination />
        </CardFooter>
      </Card>
    </DataGrid>
  );
};

export { PendingRequestTable };