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/DataTable';
import { Checkbox } from '@/components/ui/checkbox';
import { DataTableColumnHeader } from '@/components/DataTable/DataTableColumnHeader';
import Error from '@/pages/Errors';
import DataTableShimmer from '@/components/DataTable/DataTableShimmer';
import { Settings2, Trash2 } from 'lucide-react';
import AlertDialogDemo from '@/components/AlertDialogDemo';
import {
  useBulkDeleteTeachersMutation,
  useDeleteTeacherMutation,
  useGetTachersBySchoolQuery,
} from '@/app/backend/endpoints/accounts';
import { useNavigate } from 'react-router-dom';
import useTitle from '@/hooks/useTitle';
import useUser from '@/hooks/useUser';

dayjs.extend(relativeTime);

export default function Teachers() {
  useTitle('Teachers');
  const navigate = useNavigate();
  const {user} = useUser();
  const {school_id} = user as SchoolI;
  useTitle('Teachers');
  const {
    data: dataWrap,
    isLoading,
    isError,
    isFetching,
  } = useGetTachersBySchoolQuery(school_id);
  const data = dataWrap?.data;

  const [deleteUser, { isLoading: isDeleting }] = useDeleteTeacherMutation();
  const [deleteUsers, { isLoading: isBulkDeleting }] =
    useBulkDeleteTeachersMutation();
  const bulkDeleteMutation = (ids: number[]) => {
    deleteUsers({ teacherIds: ids })
      .unwrap()
      .then(() => {
        toast.success('Teachers deleted successfully');
      })
      .catch(() => {
        toast.error('Error deleting teachers');
      });
  };

  const columns: ColumnDef<TeacherI>[] = 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: 'fullName',
        header: ({ column }) => (
          <DataTableColumnHeader
            column={column}
            title="Full Name"
            // sorting={false}
          />
        ),
        cell: ({ row }) => (
          <span className="font-medium">
            {row.original.firstName} {row.original.lastName}
          </span>
        ),
      },
      {
        accessorKey: 'email',
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Email" />
        ),
        cell: ({ row }) => (
          <span className="font-medium">{row.original.email}</span>
        ),
      },
      {
        accessorKey: 'phone',
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Phone" />
        ),
        cell: ({ row }) => (
          <span className="font-medium">{row.original.phone}</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(`edit/${row.original.teacher_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={() => {
                deleteUser({ teacherId: row.original.teacher_id })
                  .unwrap()
                  .then(() => {
                    toast.success('Teacher deleted successfully');
                  })
                  .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"
                onClick={() => {
                  // console.log(row.original.user_id);
                }}
              />
            </AlertDialogDemo>
          </div>
        ),
      },
    ],
    []
  );

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

  return (
    <DataTable<TeacherI, string>
      columns={columns}
      data={data ?? []}
      totalEntries={data?.length ?? 0}
      isFetching={isFetching}
      bulkDeleteHandler={(ids) => {
        bulkDeleteMutation(ids);
      }}
      bulkDeleteIsLoading={isBulkDeleting}
      selectRows
      name="A New Teacher Account"
      title="Teachers"
      isTeachersTable
    />
  );
}