'use client';

import { useMemo, useState } from 'react';
import {
  ColumnDef,
  getCoreRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  PaginationState,
  Row,
  SortingState,
  useReactTable,
} from '@tanstack/react-table';
import { EllipsisVertical, Plus, Search, Settings2, X } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { toAbsoluteUrl } from '@/lib/helpers';
import { useLanguage } from '@/providers/i18n-provider';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardFooter,
  CardHeader,
  CardHeading,
  CardTable,
  CardToolbar,
} from '@/components/ui/card';
import { DataGrid, useDataGrid } from '@/components/ui/data-grid';
import { DataGridColumnHeader } from '@/components/ui/data-grid-column-header';
import { DataGridColumnVisibility } from '@/components/ui/data-grid-column-visibility';
import { DataGridPagination } from '@/components/ui/data-grid-pagination';
import { DataGridTable } from '@/components/ui/data-grid-table';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Input } from '@/components/ui/input';
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
import { AddUserModal } from './add-user-modal';

interface IUser {
  id: string;
  employeeName: string;
  email: string;
  phone: string;
  roles: string[];
  avatar?: string;
}

// Sample data
const sampleUsers: IUser[] = [
  {
    id: '1',
    employeeName: 'أحمد محمد',
    email: 'ahmed@mokhtabar.com',
    phone: '+966501234567',
    roles: ['admin', 'manager'],
    avatar: '300-1.png',
  },
  {
    id: '2',
    employeeName: 'فاطمة علي',
    email: 'fatima@mokhtabar.com',
    phone: '+966502345678',
    roles: ['accountant'],
    avatar: '300-2.png',
  },
  {
    id: '3',
    employeeName: 'محمد خالد',
    email: 'mohammed@mokhtabar.com',
    phone: '+966503456789',
    roles: ['manager', 'engineer'],
    avatar: '300-3.png',
  },
  {
    id: '4',
    employeeName: 'نورة سعد',
    email: 'noura@mokhtabar.com',
    phone: '+966504567890',
    roles: ['engineer'],
    avatar: '300-4.png',
  },
  {
    id: '5',
    employeeName: 'عبدالله حسن',
    email: 'abdullah@mokhtabar.com',
    phone: '+966505678901',
    roles: ['admin'],
    avatar: '300-5.png',
  },
];

function ActionsCell({
  row,
  onEdit,
  onDelete,
}: {
  row: Row<IUser>;
  onEdit: (user: IUser) => void;
  onDelete: (userId: string) => void;
}) {
  const { t } = useTranslation();

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button className="size-7" mode="icon" variant="ghost">
          <EllipsisVertical />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent side="bottom" align="end">
        <DropdownMenuItem onClick={() => onEdit(row.original)}>
          {t('admin.updateUser')}
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem
          variant="destructive"
          onClick={() => onDelete(row.original.id)}
        >
          {t('admin.deleteUser')}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

export function UsersTable() {
  const { t } = useTranslation();
  const { dir } = useLanguage();
  const [data, setData] = useState<IUser[]>(sampleUsers);
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  });
  const [sorting, setSorting] = useState<SortingState>([
    { id: 'employeeName', desc: false },
  ]);
  const [searchQuery, setSearchQuery] = useState('');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingUser, setEditingUser] = useState<IUser | null>(null);
  const [deleteUserId, setDeleteUserId] = useState<string | null>(null);

  const filteredData = useMemo(() => {
    let filtered = data;

    if (searchQuery) {
      const searchLower = searchQuery.toLowerCase();
      filtered = filtered.filter(
        (item) =>
          item.employeeName.toLowerCase().includes(searchLower) ||
          item.email.toLowerCase().includes(searchLower) ||
          item.phone.toLowerCase().includes(searchLower) ||
          item.roles.some((role) => role.toLowerCase().includes(searchLower)),
      );
    }

    return filtered;
  }, [searchQuery, data]);

  const handleAddUser = () => {
    setEditingUser(null);
    setIsModalOpen(true);
  };

  const handleEditUser = (user: IUser) => {
    setEditingUser(user);
    setIsModalOpen(true);
  };
  const handleDeleteUser = (userId: string) => {
    setDeleteUserId(userId);
  };

  const handleConfirmDelete = () => {
    if (!deleteUserId) return;
    setData((prev) => prev.filter((user) => user.id !== deleteUserId));
    setDeleteUserId(null);
  };

  const handleCancelDelete = () => {
    setDeleteUserId(null);
  };

  const handleSaveUser = (userData: IUser) => {
    if (editingUser) {
      // Update existing user
      setData((prev) =>
        prev.map((user) => (user.id === editingUser.id ? userData : user)),
      );
    } else {
      // Add new user
      const newUser = {
        ...userData,
        id: String(Date.now()),
        avatar: '300-1.png',
      };
      setData((prev) => [...prev, newUser]);
    }
    setIsModalOpen(false);
    setEditingUser(null);
  };

  const getRoleBadgeVariant = (role: string) => {
    switch (role) {
      case 'admin':
        return 'destructive';
      case 'manager':
        return 'warning';
      case 'engineer':
        return 'info';
      case 'accountant':
        return 'outline';
      default:
        return 'outline';
    }
  };

  const columns = useMemo<ColumnDef<IUser>[]>(
    () => [
      {
        id: 'employeeName',
        accessorFn: (row) => row.employeeName,
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('admin.columns.employeeName')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <div className="flex items-center gap-2.5">
            <div className="shrink-0">
              <img
                src={toAbsoluteUrl(
                  `/media/avatars/${row.original.avatar || '300-1.png'}`,
                )}
                className="size-8 rounded-full"
                alt={row.original.employeeName}
              />
            </div>
            <span className="font-medium text-foreground">
              {row.original.employeeName}
            </span>
          </div>
        ),
        enableSorting: true,
        size: 250,
        meta: { headerTitle: t('admin.columns.employeeName') },
      },
      {
        id: 'email',
        accessorFn: (row) => row.email,
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('admin.columns.email')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <span className="text-foreground font-normal">
            {row.original.email}
          </span>
        ),
        enableSorting: true,
        size: 250,
        meta: { headerTitle: t('admin.columns.email') },
      },
      {
        id: 'phone',
        accessorFn: (row) => row.phone,
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('admin.columns.phone')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <span className="text-foreground font-normal" dir="ltr">
            {row.original.phone}
          </span>
        ),
        enableSorting: true,
        size: 200,
        meta: { headerTitle: t('admin.columns.phone') },
      },
      {
        id: 'roles',
        accessorFn: (row) => row.roles,
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('admin.columns.roles')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <div className="flex flex-wrap gap-1.5">
            {row.original.roles.map((role) => (
              <Badge key={role} variant={getRoleBadgeVariant(role)} size="sm">
                {t(`admin.roles.${role}`)}
              </Badge>
            ))}
          </div>
        ),
        enableSorting: false,
        size: 200,
        meta: { headerTitle: t('admin.columns.roles') },
      },
      {
        id: 'actions',
        header: '',
        cell: ({ row }) => (
          <ActionsCell
            row={row}
            onEdit={handleEditUser}
            onDelete={handleDeleteUser}
          />
        ),
        enableSorting: false,
        size: 60,
        meta: { headerClassName: '' },
      },
    ],
    [t],
  );

  const table = useReactTable({
    columns,
    data: filteredData,
    pageCount: Math.ceil((filteredData?.length || 0) / pagination.pageSize),
    getRowId: (row: IUser) => String(row.id),
    state: {
      pagination,
      sorting,
    },
    columnResizeMode: 'onChange',
    onPaginationChange: setPagination,
    onSortingChange: setSorting,
    enableRowSelection: false,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });

  const Toolbar = () => {
    const { table } = useDataGrid();

    return (
      <CardToolbar className="py-2">
        <Button onClick={handleAddUser}>
          <Plus />
          {t('admin.addUser')}
        </Button>
        <DataGridColumnVisibility
          table={table}
          trigger={
            <Button variant="outline">
              <Settings2 /> {t('requests.buttons.table_columns')}
            </Button>
          }
        />
      </CardToolbar>
    );
  };

  return (
    <>
      <DataGrid
        emptyMessage={t('admin.emptyTable')}
        table={table}
        recordCount={filteredData?.length || 0}
        tableLayout={{
          columnsPinnable: true,
          columnsMovable: true,
          columnsVisibility: true,
          cellBorder: true,
        }}
      >
        <Card>
          <CardHeader>
            <CardHeading>
              <div className="flex items-center gap-2.5 py-2">
                <div className="relative">
                  <Search className="size-4 text-muted-foreground absolute start-3 top-1/2 -translate-y-1/2" />
                  <Input
                    placeholder={t('admin.searchPlaceholder')}
                    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>
            <Toolbar />
          </CardHeader>

          <CardTable>
            <ScrollArea>
              <DataGridTable />
              <ScrollBar orientation="horizontal" />
            </ScrollArea>
          </CardTable>
          <CardFooter>
            <DataGridPagination />
          </CardFooter>
        </Card>
      </DataGrid>

      <AddUserModal
        open={isModalOpen}
        onOpenChange={setIsModalOpen}
        user={editingUser}
        onSave={handleSaveUser}
      />
      <AlertDialog
        open={!!deleteUserId}
        onOpenChange={(open) => !open && handleCancelDelete()}
      >
        <AlertDialogContent dir={dir}>
          <AlertDialogHeader>
            <AlertDialogTitle className="rtl:text-right">
              {t('admin.confirm.title')}
            </AlertDialogTitle>
            <AlertDialogDescription className="rtl:text-right">
              {t('admin.confirm.description')}
            </AlertDialogDescription>
          </AlertDialogHeader>

          <AlertDialogFooter>
            <AlertDialogCancel onClick={handleCancelDelete}>
              {t('common.buttons.cancel') ?? 'Cancel'}
            </AlertDialogCancel>

            <AlertDialogAction
              onClick={handleConfirmDelete}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              {t('common.buttons.delete') ?? 'Delete'}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}