'use client';

import { useEffect, useMemo, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Pagination, UserModel } from '@/utils/types/User';
import { RiCheckboxCircleFill, RiErrorWarningFill } from '@remixicon/react';
import { useMutation } from '@tanstack/react-query';
import { toast } from 'sonner';
import { Alert, AlertIcon, AlertTitle } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Spinner } from '@/components/ui/spinners';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import PaginationComponent from '../paginationComponent/paginationComponent';
import axios from '@/network/axios';
import { SuccessResponse } from '@/utils/types/Responses';
import { apis } from '@/utils/apis/apis';
import { SearchUsers } from '../SearchUsers/SearchUsers';

type TableCellData = {
  value: string | number | null;
  color?: 'warning' | 'success';
};

const UsersList = ({
  users: initialUsers,
  pagination,
}: {
  users: UserModel[] | null;
  pagination: Pagination;
}) => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [users, setUsers] = useState<UserModel[] | null>(initialUsers);

  const currentPage = useMemo(() => {
    const fromUrl = Number(searchParams?.get('page') || '');
    if (!Number.isNaN(fromUrl) && fromUrl > 0) return fromUrl;
    return pagination?.current_page ?? 1;
  }, [searchParams, pagination]);

  const totalPages = useMemo(() => {
    if (pagination?.last_page) return pagination.last_page;
    if (pagination?.total && pagination?.per_page) {
      return Math.max(1, Math.ceil(pagination.total / pagination.per_page));
    }
    return 1;
  }, [pagination]);

  const tableHead = [
    { column: 'Name' },
    { column: 'Email' },
    { column: 'Phone' },
    { column: 'Brand' },
    { column: 'Country' },
    { column: 'Account Type' },
    { column: 'Status' },
    { column: 'Credit' },
    { column: 'Reports Balance' },
    { column: 'Search Balance' },
    { column: 'Paid Subscription' },
    { column: 'Reports' },
    { column: 'Created At' },
    { column: 'Created By' },
    { column: 'Actions' },
  ];

  const [tableData, setTableData] = useState<TableCellData[][]>([]);
  const [processingUserId, setProcessingUserId] = useState<number | null>(null);

  // Sync local state when initial users prop changes (e.g., pagination, refresh)
  useEffect(() => {
    setUsers(initialUsers);
  }, [initialUsers]);

  const toggleActivationMutation = useMutation({
    mutationFn: async ({
      userId,
      currentStatus,
    }: {
      userId: number;
      currentStatus: boolean;
    }) => {
      const response = await axios.post<SuccessResponse<UserModel>>(
        apis.DASHBOARD.USER_MANAGEMENT.UPDATE_USER(userId.toString()),
        {
          is_activated: currentStatus ? '0' : '1',
        },
      );
      return response.data?.data;
    },
    onSuccess: (_, variables) => {
      const action = variables.currentStatus ? 'deactivated' : 'activated'
      toast.custom(
        () => (
          <Alert variant="mono" icon="success" close={false}>
            <AlertIcon>
              <RiCheckboxCircleFill />
            </AlertIcon>
            <AlertTitle>User {action} successfully</AlertTitle>
          </Alert>
        ),
        { position: 'top-center' },
      );
      router.refresh();
      setProcessingUserId(null);
    },
    onError: (error: Error) => {
      toast.custom(
        () => (
          <Alert variant="mono" icon="destructive" close={false}>
            <AlertIcon>
              <RiErrorWarningFill />
            </AlertIcon>
            <AlertTitle>{error.message || 'Failed to update user status'}</AlertTitle>
          </Alert>
        ),
        { position: 'top-center' },
      );
      setProcessingUserId(null);
    },
  });

  const handleToggleActivation = (
    e: React.MouseEvent,
    user: UserModel,
  ) => {
    e.stopPropagation();
    setProcessingUserId(user.id);
    toggleActivationMutation.mutate({
      userId: user.id,
      currentStatus: user.is_activated,
    });
  };

  useEffect(() => {
    const data =
      users?.map((ele) => {
        const fullName =
          `${ele?.first_name ?? ''} ${ele?.last_name ?? ''}`.trim();

        const formatDate = (dateString: string | null) => {
          if (!dateString) return '-';
          return new Date(dateString).toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
          });
        };

        // Handle created_by which might be an object with {id, name}
        const createdBy = typeof ele?.created_by === 'object' && ele?.created_by !== null
          ? (ele.created_by as { name?: string }).name ?? '-'
          : ele?.created_by ?? '-';

        // Handle reports which might be an object or array
        const reports = typeof ele?.reports === 'object'
          ? JSON.stringify(ele?.reports)
          : ele?.reports ?? '-';

        return [
          { value: fullName || '-' },
          { value: ele?.email ?? '-' },
          { value: ele?.phone ?? '-' },
          { value: ele?.brand_name ?? '-' },
          { value: ele?.country?.name ?? '-' },
          { value: ele?.account_type ?? '-' },
          {
            value: ele?.is_activated ? 'Active' : 'Inactive',
            color: ele?.is_activated
              ? ('success' as const)
              : ('warning' as const),
          },
          { value: ele?.credit ?? 0 },
          { value: ele?.requests_balance ?? 0 },
          { value: ele?.search_balance ?? 0 },
          {
            value: ele?.is_paid_subscription ? 'Yes' : 'No',
            color: ele?.is_paid_subscription
              ? ('success' as const)
              : ('warning' as const),
          },
          { value: reports },
          { value: formatDate(ele?.created_at) },
          { value: createdBy },
        ];
      }) ?? [];
    setTableData(data);
  }, [users]);

  const handlePageChange = (page: number) => {
    const params = new URLSearchParams(searchParams?.toString());
    params.set('page', page.toString());
    // Preserve name and email search params
    const name = searchParams?.get('name');
    const email = searchParams?.get('email');
    if (name) params.set('name', name);
    if (email) params.set('email', email);
    router.push(`?${params.toString()}`);
  };

  const renderItem = (row: TableCellData[], index: number) => {
    const user = users?.[index];
    const userId = user?.id;
    const isProcessing = processingUserId === userId;

    return (
      <TableRow
        key={index}
        className="cursor-pointer"
        onClick={() => userId && router.push(`/users/${userId}`)}
      >
        {row.map((ele, i) =>
          ele.color && ele.value ? (
            <TableCell key={i} className="text-start">
              <Badge variant={ele.color} appearance="outline">
                {ele.value}
              </Badge>
            </TableCell>
          ) : (
            <TableCell key={i} className="text-sm text-foreground">
              {ele.value || '-'}
            </TableCell>
          ),
        )}
        <TableCell className="text-start">
          {user && (
            <Button
              variant={user.is_activated ? 'secondary' : 'primary'}
              size="sm"
              onClick={(e) => handleToggleActivation(e, user)}
              disabled={isProcessing}
            >
              {isProcessing && <Spinner className="size-4 animate-spin" />}
              {user.is_activated ? 'Deactivate' : 'Activate'}
            </Button>
          )}
        </TableCell>
      </TableRow>
    );
  };

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between w-full">
          <CardTitle>Users Management</CardTitle>
          <div className="flex items-center gap-2">
            <SearchUsers />
            <Button
              variant="outline"
              onClick={() => router.push('/users/add')}
              className="shrink-0"
            >
              Create User
            </Button>
          </div>
        </div>
      </CardHeader>

      <CardContent className="kt-scrollable-x-auto p-0">
        <Table>
          <TableHeader>
            <TableRow className="bg-accent/60">
              {tableHead.map((ele) => (
                <TableHead key={ele.column} className="min-w-50 h-10">
                  {ele.column}
                </TableHead>
              ))}
            </TableRow>
          </TableHeader>

          <TableBody>
            {tableData.length > 0 ? (
              tableData.map((table, index) => renderItem(table, index))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={tableHead.length}
                  className="text-center py-8 text-muted-foreground"
                >
                  No users found
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </CardContent>

      <CardFooter className="justify-center">
        <PaginationComponent
          currentPage={currentPage}
          totalPages={totalPages}
          onPageChange={handlePageChange}
        />
      </CardFooter>
    </Card>
  );
};

export { UsersList };