'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 { 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 { IRole } from '../schemas/role-form-schema';
import { AddRoleModal } from './add-role-modal';

// Sample data
const sampleRoles: IRole[] = [
  {
    id: '1',
    name: 'Administrator',
    permissions: {
      users: { view: true, show: true, add: true, update: true, delete: true },
      roles: { view: true, show: true, add: true, update: true, delete: true },
    },
  },
  {
    id: '2',
    name: 'Manager',
    permissions: {
      users: {
        view: true,
        show: true,
        add: false,
        update: true,
        delete: false,
      },
      requests: {
        view: true,
        show: true,
        add: true,
        update: true,
        delete: false,
      },
    },
  },
];

function ActionsCell({
  row,
  onEdit,
  onDelete,
}: {
  row: Row<IRole>;
  onEdit: (role: IRole) => void;
  onDelete: (roleId: 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.rolesManagement.updateRole')}
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem
          variant="destructive"
          onClick={() => onDelete(row.original.id)}
        >
          {t('admin.rolesManagement.deleteRole')}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

export function RolesTable() {
  const { t } = useTranslation();
  const { dir } = useLanguage();
  const [data, setData] = useState<IRole[]>(sampleRoles);
  const [pagination, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  });
  const [sorting, setSorting] = useState<SortingState>([
    { id: 'name', desc: false },
  ]);
  const [searchQuery, setSearchQuery] = useState('');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingRole, setEditingRole] = useState<IRole | null>(null);
  const [deleteRoleId, setDeleteRoleId] = useState<string | null>(null);

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

    if (searchQuery) {
      const searchLower = searchQuery.toLowerCase();
      filtered = filtered.filter((item) =>
        item.name.toLowerCase().includes(searchLower),
      );
    }

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

  const handleAddRole = () => {
    setEditingRole(null);
    setIsModalOpen(true);
  };

  const handleEditRole = (role: IRole) => {
    setEditingRole(role);
    setIsModalOpen(true);
  };

  const handleDeleteRole = (roleId: string) => {
    setDeleteRoleId(roleId);
  };

  const handleConfirmDelete = () => {
    if (!deleteRoleId) return;
    setData((prev) => prev.filter((role) => role.id !== deleteRoleId));
    setDeleteRoleId(null);
  };

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

  const handleSaveRole = (roleData: IRole) => {
    if (editingRole) {
      setData((prev) =>
        prev.map((role) => (role.id === editingRole.id ? roleData : role)),
      );
    } else {
      const newRole = {
        ...roleData,
        id: String(Date.now()),
      };
      setData((prev) => [...prev, newRole]);
    }
    setIsModalOpen(false);
    setEditingRole(null);
  };

  const columns = useMemo<ColumnDef<IRole>[]>(
    () => [
      {
        id: 'name',
        accessorFn: (row) => row.name,
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('admin.rolesManagement.columns.roleName')}
            column={column}
          />
        ),
        cell: ({ row }) => (
          <span className="font-medium text-foreground">
            {row.original.name}
          </span>
        ),
        enableSorting: true,
        size: 250,
        meta: { headerTitle: t('admin.rolesManagement.columns.roleName') },
      },
      {
        id: 'permissions',
        header: ({ column }) => (
          <DataGridColumnHeader
            title={t('admin.rolesManagement.columns.permissions')}
            column={column}
          />
        ),
        cell: ({ row }) => {
          const modules = Object.keys(row.original.permissions).filter((m) =>
            Object.values(row.original.permissions[m]).some((v) => v === true),
          );
          return (
            <div className="flex flex-wrap gap-1">
              {modules.slice(0, 3).map((m) => (
                <Badge key={m} variant="outline" size="sm">
                  {t(`admin.rolesManagement.modules.${m}`)}
                </Badge>
              ))}
              {modules.length > 3 && (
                <Badge variant="outline" size="sm">
                  +{modules.length - 3}
                </Badge>
              )}
            </div>
          );
        },
        enableSorting: false,
        size: 300,
        meta: { headerTitle: t('admin.rolesManagement.columns.permissions') },
      },
      {
        id: 'actions',
        header: '',
        cell: ({ row }) => (
          <ActionsCell
            row={row}
            onEdit={handleEditRole}
            onDelete={handleDeleteRole}
          />
        ),
        enableSorting: false,
        size: 60,
      },
    ],
    [t],
  );

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

  return (
    <>
      <DataGrid
        emptyMessage={t('admin.rolesManagement.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.rolesManagement.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>
            <CardToolbar className="py-2">
              <Button onClick={handleAddRole}>
                <Plus />
                {t('admin.rolesManagement.addRole')}
              </Button>
              <DataGridColumnVisibility
                table={table}
                trigger={
                  <Button variant="outline">
                    <Settings2 /> {t('requests.buttons.table_columns')}
                  </Button>
                }
              />
            </CardToolbar>
          </CardHeader>

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

      <AddRoleModal
        open={isModalOpen}
        onOpenChange={setIsModalOpen}
        role={editingRole}
        onSave={handleSaveRole}
      />

      <AlertDialog
        open={!!deleteRoleId}
        onOpenChange={(open) => !open && handleCancelDelete()}
      >
        <AlertDialogContent dir={dir}>
          <AlertDialogHeader>
            <AlertDialogTitle className="rtl:text-right">
              {t('admin.rolesManagement.confirm.title')}
            </AlertDialogTitle>
            <AlertDialogDescription className="rtl:text-right">
              {t('admin.rolesManagement.confirm.description')}
            </AlertDialogDescription>
          </AlertDialogHeader>

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

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