'use client';

import { useMemo, useState } from 'react';
import Link from 'next/link';
import { useQuery } from '@tanstack/react-query';
import {
  ColumnDef,
  getCoreRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  PaginationState,
  SortingState,
  useReactTable,
} from '@tanstack/react-table';
import { Search, 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,
} from '@/components/ui/card';
import { DataGrid } from '@/components/ui/data-grid';
import { DataGridColumnHeader } from '@/components/ui/data-grid-column-header';
import { DataGridPagination } from '@/components/ui/data-grid-pagination';
import { DataGridTable } from '@/components/ui/data-grid-table';
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;
  completed_at: string | null;
  is_paid: boolean;
}

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_PDF_URL =
  'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf';

export default function RequestResultTable() {
  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 { data: response, isLoading } = useQuery({
    queryKey: [
      'completed-requests',
      pagination.pageIndex,
      pagination.pageSize,
      searchQuery,
    ],
    queryFn: async () => {
      const res = await apiClient.get<BackendResponse<RequestBackend[]>>(
        '/contractor/test-requests/completed',
        {
          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;

  function handleDownload(item: RequestBackend) {
    const link = document.createElement('a');
    link.href = STATIC_PDF_URL;
    link.download = `${item.request_number}_result.pdf`;
    link.target = '_blank';
    link.click();
  }

  const columns = useMemo<ColumnDef<RequestBackend>[]>(
    () => [
      {
        id: 'request_number',
        accessorKey: 'request_number',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('requestResults.columns.request_number')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <span className="text-sm font-medium text-mono">
            {row.original.request_number}
          </span>
        ),
        size: 180,
      },
      {
        id: 'project_name',
        accessorKey: 'project_name',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('requestResults.columns.project_name')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <span className="text-sm">{row.original.project_name}</span>
        ),
        size: 220,
      },
      {
        id: 'sample_sub_categories',
        accessorFn: (row) => row.sample_sub_categories.join(' - '),
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('requestResults.columns.sample_subcategory')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <span className="text-sm line-clamp-2">
            {row.original.sample_sub_categories.join(' - ')}
          </span>
        ),
        size: 250,
      },
      {
        id: 'status',
        accessorKey: 'status',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('requestResults.columns.result_status')}
            column={column}
          />
        ),
        cell: ({ row }) => {
          const status = row.original.status;
          let variant: 'success' | 'warning' | 'destructive' | 'outline' =
            'outline';
          let label = status;

          if (status === 'مكتمل') {
            variant = 'success';
            label = t('requestResults.badges.success');
          } else if (status === 'معاد') {
            variant = 'warning';
            label = t('requestResults.badges.repeated');
          } else if (status === 'فشل') {
            variant = 'destructive';
            label = t('requestResults.badges.failed');
          }

          return <Badge variant={variant}>{label}</Badge>;
        },
        size: 150,
      },
      {
        id: 'is_paid',
        accessorKey: 'is_paid',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('requestResults.columns.payment_status')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <Badge variant={row.original.is_paid ? 'success' : 'warning'}>
            {row.original.is_paid
              ? t('requestResults.badges.paid')
              : t('requestResults.badges.unpaid')}
          </Badge>
        ),
        size: 150,
      },
      {
        id: 'action',
        header: t('requestResults.columns.actions'),
        cell: ({ row }) => {
          const item = row.original;
          return (
            <div className="flex justify-center items-center">
              <Button
                variant="outline"
                size="sm"
                onClick={() => handleDownload(item)}
              >
                {t('requestResults.buttons.download_result')}
              </Button>
            </div>
          );
        },
        size: 150,
      },
    ],
    [t],
  );

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

  return (
    <DataGrid
      emptyMessage={
        isLoading ? t('common.messages.loading') : t('requestResults.empty')
      }
      table={table}
      recordCount={totalCount}
      tableLayout={{
        cellBorder: true,
      }}
    >
      <Card>
        <CardHeader>
          <CardHeading>
            <div className="flex items-center gap-2.5">
              <span className="hidden sm:inline">
                {t('requestResults.title')}
              </span>
              <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>
        </CardHeader>

        <CardTable>
          <ScrollArea>
            <DataGridTable />
            <ScrollBar orientation="horizontal" />
          </ScrollArea>
        </CardTable>

        <CardFooter>
          <DataGridPagination />
        </CardFooter>
      </Card>
    </DataGrid>
  );
}