import { useMemo } from 'react';
import { ColumnDef } from '@tanstack/react-table';
// import { toast } from 'sonner';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { DataTable } from '@/components/DataTable/StatusDataTable';
// import useTitle from '../hooks/useTitle';
import { DataTableColumnHeader } from '@/components/DataTable/DataTableColumnHeader';
import Error from '@/pages/Errors';
import DataTableShimmer from '@/components/DataTable/DataTableShimmer';
import { StatusDropDown } from '@/components/CourseStatusDropDown';
import { toast } from 'sonner';
import useTitle from '@/hooks/useTitle';
import {
  useDeleteCourseMutation,
  useGetAllMarketCoursesQuery,
  useUpdateCourseStatusMutation,
} from '@/app/backend/endpoints/courses';
import { Settings2, Trash2 } from 'lucide-react';
import AlertDialogDemo from '@/components/AlertDialogDemo';
import { useNavigate } from 'react-router-dom';

dayjs.extend(relativeTime);

export default function MarketCourses() {
  useTitle('Market-Courses');
  const {
    data: dataWrap,
    isLoading,
    isError,
    isFetching,
  } = useGetAllMarketCoursesQuery();
  const data = dataWrap?.data;
  const [update, { isLoading: isUpdating }] = useUpdateCourseStatusMutation();
  const navigate = useNavigate();
  const [deleteCourse, { isLoading: isDeleting }] = useDeleteCourseMutation();
  const mutation = ({ id, status }: { id: number; status: string }) => {
    update({
      course_id: id,
      status,
    })
      .unwrap()
      .then(() => {
        toast.success('Status updated successfully');
      })
      .catch(() => {
        toast.error('Error updating status');
      });
  };
  const columns: ColumnDef<CEMarketCourseI>[] = useMemo(
    () => [
      //   {
      //     id: 'select',
      //     header: ({ table }) => (
      //       <div className="flex items-center pl-2">
      //         <Checkbox
      //           checked={table.getIsAllPageRowsSelected()}
      //           onCheckedChange={(value) =>
      //             table.toggleAllPageRowsSelected(!!value)
      //           }
      //           aria-label="Select all"
      //         />
      //       </div>
      //     ),
      //     cell: ({ row }) => (
      //       <div className="flex items-center pl-2">
      //         <Checkbox
      //           checked={row.getIsSelected()}
      //           onCheckedChange={(value) => row.toggleSelected(!!value)}
      //           aria-label="Select row"
      //           onClick={(e) => e.stopPropagation()}
      //         />
      //       </div>
      //     ),
      //     enableSorting: false,
      //     enableHiding: false,
      //   },
      {
        accessorKey: 'status',
        header: ({ column }) => (
          <DataTableColumnHeader
            column={column}
            title="Status"
            className="ml-6"
          />
        ),
        cell: ({ row }) => (
          //   <span className="font-medium">{row.original.status}</span>
          <StatusDropDown
            className="ml-3"
            id={row.original.course_id!}
            currentStatus={row.original.status!}
            setStatus={(id, status) => mutation({ id, status })}
            isLoading={isUpdating}
          />
        ),
      },
      // {
      //   accessorKey: 'isActive',
      //   header: ({ column }) => (
      //     <DataTableColumnHeader column={column} title="Status" />
      //   ),
      //   cell: ({ row }) => (
      //     <Switch
      //       checked={row.original.isActive}
      //       disabled={
      //         isUpdating
      //         // &&
      //         //   mutation.variables?.formId === row.original._id
      //       }
      //       onCheckedChange={(checked) => {
      //         mutation({ formId: row.original.user_id, isActive: checked });
      //       }}
      //       onClick={(e) => e.stopPropagation()}
      //     />
      //   ),
      // },
      {
        accessorKey: 'Instructor',
        header: ({ column }) => (
          <DataTableColumnHeader
            column={column}
            title="Instructor"
            // sorting={false}
          />
        ),
        cell: ({ row }) => (
          <span className="font-medium">
            {row.original.inst_designer_firstName}{' '}
            {row.original.inst_designer_lastName}
          </span>
        ),
      },
      {
        accessorKey: 'course',
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Course" />
        ),
        cell: ({ row }) => (
          <span className="font-medium">{row.original.title}</span>
        ),
      },
      {
        accessorKey: 'price',
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Price" />
        ),
        cell: ({ row }) => (
          <span className="font-medium">{row.original.price}</span>
        ),
      },
      {
        accessorKey: 'buyersCount',
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Sales" />
        ),
        cell: ({ row }) => (
          <span className="font-medium">{row.original.buyersCount}</span>
        ),
      },
      {
        accessorKey: 'createdAt',
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Created At" />
        ),
        cell: ({ row }) => (
          <span>{dayjs(row.original.createdAt).format('MMM D, YYYY')}</span>
        ),
      },
      {
        accessorKey: 'updatedAt',
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Updated At" />
        ),
        cell: ({ row }) => (
          <span>{dayjs(row.original.updatedAt).format('MMM D, YYYY')}</span>
        ),
      },

      {
        id: 'actions',
        header: () => (
          <span className="hover:text-accent-foreground cursor-pointer text-xs">
            Actions
          </span>
        ),
        cell: ({ row }) => (
          <div className="flex space-x-2">
            <Settings2
              className="cursor-pointer h-8 w-8 border border-grey-300 rounded-md p-[5px]"
              onClick={() => {
                navigate('/dashboard/market-courses/edit/' + row.original.course_id);
              }}
            />
            <AlertDialogDemo
              title="Are you absolutely sure?"
              description="This action cannot be undone. This will permanently delete the account and remove the data from our servers."
              action="Delete"
              isDeleting={isDeleting}
              onClick={() => {
                deleteCourse({ course_id: row.original.course_id! })
                  .unwrap()
                  .then((response) => {
                    toast.success(response.message);
                  })
                  .catch((error: any) => {
                    toast.error(
                      error?.data?.message ?? error?.error.toString()
                    );
                  });
              }}
            >
              <Trash2 className="cursor-pointer h-8 w-8 border border-grey-300 rounded-md p-[5px] text-red-500" />
            </AlertDialogDemo>
          </div>
        ),
      },
    ],
    [mutation]
  );

  if (isLoading) return <DataTableShimmer columns={4} />;
  if (isError) return <Error fullScreen={false} />;

  return (
    <DataTable<CEMarketCourseI, string>
      columns={columns}
      data={data ?? []}
      totalEntries={data?.length ?? 0}
      isFetching={isFetching}
      selectRows={false}
      title="Market-Courses"
      createBtn
    />
  );
}