'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 { Eye, 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 { 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 {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
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;
  rejection_reason: 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 STATIC_SITE_IMAGE =
  'https://t4.ftcdn.net/jpg/00/68/63/23/360_F_68632352_kmHLwFc2rQLmnKqn6gM0bhOPqxRTx8sY.jpg';

const RejectedRequestTable = () => {
  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 [selectedRequest, setSelectedRequest] = useState<RequestBackend | null>(
    null,
  );

  const { data: response, isLoading } = useQuery({
    queryKey: [
      'rejected-requests',
      pagination.pageIndex,
      pagination.pageSize,
      searchQuery,
    ],
    queryFn: async () => {
      const res = await apiClient.get<BackendResponse<RequestBackend[]>>(
        '/contractor/test-requests/rejected',
        {
          requireAuth: true,
          params: {
            page: pagination.pageIndex + 1,
            per_page: pagination.pageSize,
            search: searchQuery || undefined,
          },
        },
      );
      return res.data;
    },
  });

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

  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 }) => (
          <Badge variant="destructive">{row.original.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: 'actions',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('requests.labels.actions')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <Button
            size="sm"
            variant="outline"
            onClick={() => setSelectedRequest(row.original)}
            className="flex items-center gap-1.5"
          >
            <Eye className="size-3.5" />
            {t('requests.buttons.view_reason')}
          </Button>
        ),
        enableSorting: false,
        size: 150,
        meta: { headerTitle: t('requests.labels.actions') },
      },
    ],
    [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>
              </div>
            </CardHeading>
            <Toolbar />
          </CardHeader>
          <CardTable>
            <ScrollArea>
              <DataGridTable />
              <ScrollBar orientation="horizontal" />
            </ScrollArea>
          </CardTable>
          <CardFooter>
            <DataGridPagination />
          </CardFooter>
        </Card>
      </DataGrid>

      <Dialog
        open={!!selectedRequest}
        onOpenChange={() => setSelectedRequest(null)}
      >
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>{t('requests.rejected_reason_title')}</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 pt-4">
            <p className="text-muted-foreground">صورة الموقع</p>

            <div className="relative aspect-video w-full overflow-hidden rounded-lg border bg-muted">
              <img
                src={STATIC_SITE_IMAGE}
                alt="Site Image"
                className="h-full w-full object-cover"
              />
            </div>

            <DialogDescription className="text-base leading-relaxed text-foreground bg-muted/30 p-4 rounded-lg border">
              <span className="block font-semibold mb-1 text-sm text-destructive uppercase tracking-wide">
                سبب رفض الطلب
              </span>
              {selectedRequest?.rejection_reason}
            </DialogDescription>
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
};

export { RejectedRequestTable };