import { useMemo } from 'react';
import { ColumnDef } from '@tanstack/react-table';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { DataTable } from '@/components/DataTable/StatusDataTable';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import { DataTableColumnHeader } from '@/components/DataTable/DataTableColumnHeader';
import Error from '@/pages/Errors';
import DataTableShimmer from '@/components/DataTable/DataTableShimmer';
import {
  useGetMeetingsQuery,
  useUpdateMeetingStatusMutation,
} from '@/app/backend/endpoints/meetings';
import { StatusDropDown } from '@/components/MeetingStatusDropDown';
import { toast } from 'sonner';
import useTitle from '@/hooks/useTitle';

dayjs.extend(relativeTime);

export default function Meetings() {
  useTitle('Meetings');
  const {
    data: dataWrap,
    isLoading,
    isError,
    isFetching,
  } = useGetMeetingsQuery();
  const data = dataWrap?.data;
  const [update, { isLoading: isUpdating }] = useUpdateMeetingStatusMutation();

  const mutation = ({ id, status }: { id: number; status: string }) => {
    update({
      meeting_id: id,
      status,
    })
      .unwrap()
      .then(() => {
        toast.success('Status updated successfully');
      })
      .catch(() => {
        toast.error('Error updating status');
      });
  };
  const columns: ColumnDef<MeetingI>[] = useMemo(
    () => [
      {
        accessorKey: 'fullName',
        header: ({ column }) => (
          <DataTableColumnHeader
            column={column}
            title="Client"
            className="ml-2"
          />
        ),
        cell: ({ row }) => (
          <span className="ml-2 font-medium">{row.original.fullName}</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>
        ),
      },
      {
        accessorKey: 'courseName',
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Course" />
        ),
        cell: ({ row }) => (
          // if the length of the courseName is greater than 20, then show the first 20 characters + '...' and on hover show the full courseName
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger>
                <span className="font-medium text-slate-700">
                  {row.original.courseName.length > 25
                    ? row.original.courseName.slice(0, 25) + '...'
                    : row.original.courseName}
                </span>
              </TooltipTrigger>
              <TooltipContent>
                <p>{row.original.courseName}</p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        ),
      },
      {
        accessorKey: 'courseName',
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Pack" />
        ),
        cell: ({ row }) => (
          <span className="font-medium">{row.original.packName}</span>
        ),
      },
      {
        accessorKey: 'createdAt',
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Date" />
        ),
        cell: ({ row }) => (
          <span>{dayjs(row.original.createdAt).format('MMM D, YYYY')}</span>
        ),
      },
      {
        accessorKey: 'status',
        header: ({ column }) => (
          <DataTableColumnHeader column={column} title="Status" />
        ),
        cell: ({ row }) => (
          //   <span className="font-medium">{row.original.status}</span>
          <StatusDropDown
            id={row.original.meeting_id}
            currentStatus={row.original.status}
            setStatus={(id, status) => mutation({ id, status })}
            isLoading={isUpdating}
          />
        ),
      },
    ],
    [mutation]
  );

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

  return (
    <DataTable<MeetingI, string>
      columns={columns}
      data={data ?? []}
      totalEntries={data?.length ?? 0}
      isFetching={isFetching}
      selectRows={false}
      title="Meetings"
    />
  );
}