'use client';

import Link from 'next/link';
import { toast } from 'sonner';
import { format } from 'date-fns';
import { client } from '@/lib/auth/auth-client';
import { useEffect, useState, useCallback } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import {
  MoreHorizontal,
  Plus,
  Search,
  Ban,
  Shield,
  User,
  Eye
} from 'lucide-react';

import PageContainer from '@/components/layout/page-container';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import {
  Avatar,
  AvatarFallback,
  AvatarImage
} from '@/components/ui/avatar';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow
} from '@/components/ui/table';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle
} from '@/components/ui/alert-dialog';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from '@/components/ui/card';

interface User {
  id: string;
  email: string;
  name: string;
  role?: string;
  banned?: boolean | null;
  banReason?: string | null;
  banExpires?: Date | string | null;
  emailVerified: boolean;
  image?: string | null;
  createdAt: Date | string;
  updatedAt: Date | string;
}

interface PaginationInfo {
  total: number;
  limit: number;
  offset: number;
}

export default function UsersManagement() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [users, setUsers] = useState<User[]>([]);
  const [pagination, setPagination] = useState<PaginationInfo>({
    total: 0,
    limit: 25,
    offset: 0
  });
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [filterStatus, setFilterStatus] = useState<'all' | 'active' | 'banned'>(
    'all'
  );
  // const [selectedUser, setSelectedUser] = useState<User | null>(null); // Not currently used
  const [actionDialog, setActionDialog] = useState<{
    type: 'ban' | 'unban' | 'delete' | 'impersonate' | null;
    user: User | null;
  }>({ type: null, user: null });

  const fetchUsers = useCallback(
    async (page = 0, search = searchTerm, filter = filterStatus) => {
      try {
        setLoading(true);
        const limit = pagination.limit;
        const offset = page * limit;

        const query: Record<string, unknown> = { limit, offset };

        if (search) {
          query.searchValue = search;
          query.searchField = 'email';
          query.searchOperator = 'contains';
        }

        if (filter === 'banned') {
          query.filterField = 'banned';
          query.filterValue = true;
          query.filterOperator = 'eq';
        } else if (filter === 'active') {
          query.filterField = 'banned';
          query.filterValue = false;
          query.filterOperator = 'eq';
        }

        const response = await client.admin.listUsers({ query });

        if (response.data) {
          setUsers(response.data.users);
          setPagination({
            total: response.data.total,
            limit,
            offset
          });
        }
      } catch {
        toast.error('Fejl ved hentning af brugere');
      } finally {
        setLoading(false);
      }
    },
    [searchTerm, filterStatus, pagination.limit]
  );

  useEffect(() => {
    const filter = searchParams.get('filter');
    if (filter === 'banned') {
      setFilterStatus('banned');
    }
    fetchUsers();
  }, [searchParams, fetchUsers]);

  const handleSearch = (value: string) => {
    setSearchTerm(value);
    fetchUsers(0, value, filterStatus);
  };

  const handleFilterChange = (filter: 'all' | 'active' | 'banned') => {
    setFilterStatus(filter);
    fetchUsers(0, searchTerm, filter);
  };

  const handlePageChange = (page: number) => {
    fetchUsers(page, searchTerm, filterStatus);
  };

  const handleBanUser = async (user: User, banReason?: string) => {
    try {
      await client.admin.banUser({
        userId: user.id,
        banReason: banReason || 'Bannet af administrator',
        banExpiresIn: undefined // Permanent ban
      });
      toast.success(`Bruger ${user.email} er blevet bannet`);
      fetchUsers();
    } catch {
      toast.error('Fejl ved bannelse af bruger');
    }
  };

  const handleUnbanUser = async (user: User) => {
    try {
      await client.admin.unbanUser({ userId: user.id });
      toast.success(`Bruger ${user.email} er blevet fjernet fra ban`);
      fetchUsers();
    } catch {
      toast.error('Fejl ved fjernelse af ban fra bruger');
    }
  };

  const handleSetRole = async (user: User, role: 'user' | 'admin') => {
    try {
      await client.admin.setRole({
        userId: user.id,
        role
      });
      toast.success(`Brugerrolle opdateret til ${role}`);
      fetchUsers();
    } catch {
      toast.error('Fejl ved opdatering af brugerrolle');
    }
  };

  const handleImpersonateUser = async (user: User) => {
    try {
      const response = await client.admin.impersonateUser({ userId: user.id });
      if (response.data) {
        toast.success(`Udgiver sig nu for ${user.email}`);
        router.push('/dashboard');
      }
    } catch {
      toast.error('Fejl ved udgivelse for bruger');
    }
  };

  const confirmAction = async () => {
    if (!actionDialog.user || !actionDialog.type) return;

    const user = actionDialog.user;
    setActionDialog({ type: null, user: null });

    switch (actionDialog.type) {
      case 'ban':
        await handleBanUser(user);
        break;
      case 'unban':
        await handleUnbanUser(user);
        break;
      case 'impersonate':
        await handleImpersonateUser(user);
        break;
    }
  };

  const currentPage = Math.floor(pagination.offset / pagination.limit);
  const totalPages = Math.ceil(pagination.total / pagination.limit);

  return (
    <PageContainer scrollable={true}>
      <div className='w-full flex-1 space-y-6'>
        <div className='flex items-center justify-between'>
          <div>
            <h1 className='text-3xl font-bold'>{'Brugeradministration'}</h1>
            <p className='text-muted-foreground'>
              {'Administrer alle brugere, roller og tilladelser'}
            </p>
          </div>
          <Link href='/dashboard/admin/users/create'>
            <Button>
              <Plus className='mr-2 h-4 w-4' />
              {'Opret bruger'}
            </Button>
          </Link>
        </div>

        {/* Filters and Search */}
        <Card>
          <CardHeader>
            <CardTitle>{'Filtre'}</CardTitle>
          </CardHeader>
          <CardContent>
            <div className='flex flex-col space-y-4 md:flex-row md:space-y-0 md:space-x-4'>
              <div className='flex-1'>
                <div className='relative'>
                  <Search className='text-muted-foreground absolute top-2.5 left-2 h-4 w-4' />
                  <Input
                    placeholder={'Søg brugere efter e-mail...'}
                    value={searchTerm}
                    onChange={(e) => handleSearch(e.target.value)}
                    className='pl-8'
                  />
                </div>
              </div>
              <div className='flex space-x-2'>
                <Button
                  variant={filterStatus === 'all' ? 'default' : 'outline'}
                  onClick={() => handleFilterChange('all')}
                  size='sm'
                >
                  {'Alle brugere'}
                </Button>
                <Button
                  variant={filterStatus === 'active' ? 'default' : 'outline'}
                  onClick={() => handleFilterChange('active')}
                  size='sm'
                >
                  {'Aktiv'}
                </Button>
                <Button
                  variant={filterStatus === 'banned' ? 'default' : 'outline'}
                  onClick={() => handleFilterChange('banned')}
                  size='sm'
                >
                  {'Bannet'}
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Users Table */}
        <Card>
          <CardHeader>
            <CardTitle>
              {'Brugere'} ({pagination.total})
            </CardTitle>
            <CardDescription>
              {`Viser ${pagination.offset + 1} til ${Math.min(
                pagination.offset + pagination.limit,
                pagination.total
              )} af ${pagination.total} brugere`}
            </CardDescription>
          </CardHeader>
          <CardContent>
            {loading ? (
              <div className='flex items-center justify-center p-8'>
                <div>{'Indlæser brugere...'}</div>
              </div>
            ) : (
              <div className='space-y-4'>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>{'Bruger'}</TableHead>
                      <TableHead>{'Rolle'}</TableHead>
                      <TableHead>{'Status'}</TableHead>
                      <TableHead>{'Oprettet'}</TableHead>
                      <TableHead>{'Handlinger'}</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {users.map((user) => (
                      <TableRow key={user.id}>
                        <TableCell>
                          <div className='flex items-center space-x-3'>
                            <Avatar className='h-8 w-8'>
                              <AvatarImage src={user.image || undefined} />
                              <AvatarFallback>
                                {user.name?.charAt(0)?.toUpperCase() ||
                                  user.email.charAt(0).toUpperCase()}
                              </AvatarFallback>
                            </Avatar>
                            <div>
                              <div className='font-medium'>
                                {user.name || 'Unavngivet'}
                              </div>
                              <div className='text-muted-foreground text-sm'>
                                {user.email}
                              </div>
                            </div>
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge
                            variant={
                              user.role === 'admin' ? 'default' : 'secondary'
                            }
                          >
                            {user.role || 'user'}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          {user.banned ? (
                            <div className='space-y-1'>
                              <Badge variant='destructive'>{'Bannet'}</Badge>
                              {user.banReason && (
                                <div className='text-muted-foreground text-xs'>
                                  {user.banReason}
                                </div>
                              )}
                            </div>
                          ) : (
                            <Badge variant='outline' className='text-green-600'>
                              {'Aktiv'}
                            </Badge>
                          )}
                        </TableCell>
                        <TableCell>
                          {format(new Date(user.createdAt), 'MMM dd, yyyy')}
                        </TableCell>
                        <TableCell>
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button variant='ghost' className='h-8 w-8 p-0'>
                                <MoreHorizontal className='h-4 w-4' />
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align='end'>
                              <DropdownMenuLabel>
                                {'Handlinger'}
                              </DropdownMenuLabel>
                              <DropdownMenuSeparator />

                              <DropdownMenuItem
                                onClick={() =>
                                  setActionDialog({ type: 'impersonate', user })
                                }
                              >
                                <Eye className='mr-2 h-4 w-4' />
                                {'Udgiv sig for'}
                              </DropdownMenuItem>

                              <DropdownMenuItem
                                onClick={() =>
                                  handleSetRole(
                                    user,
                                    user.role === 'admin' ? 'user' : 'admin'
                                  )
                                }
                              >
                                <Shield className='mr-2 h-4 w-4' />
                                {user.role === 'admin'
                                  ? 'Fjern admin'
                                  : 'Gør til admin'}
                              </DropdownMenuItem>

                              <DropdownMenuSeparator />

                              {user.banned ? (
                                <DropdownMenuItem
                                  onClick={() =>
                                    setActionDialog({ type: 'unban', user })
                                  }
                                  className='text-green-600'
                                >
                                  <User className='mr-2 h-4 w-4' />
                                  {'Fjern ban fra bruger'}
                                </DropdownMenuItem>
                              ) : (
                                <DropdownMenuItem
                                  onClick={() =>
                                    setActionDialog({ type: 'ban', user })
                                  }
                                  className='text-red-600'
                                >
                                  <Ban className='mr-2 h-4 w-4' />
                                  {'Ban bruger'}
                                </DropdownMenuItem>
                              )}
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>

                {/* Pagination */}
                {totalPages > 1 && (
                  <div className='flex items-center justify-between'>
                    <div className='text-muted-foreground text-sm'>
                      {'Side'} {currentPage + 1} {'af'} {totalPages}
                    </div>
                    <div className='flex space-x-2'>
                      <Button
                        variant='outline'
                        size='sm'
                        onClick={() => handlePageChange(currentPage - 1)}
                        disabled={currentPage === 0}
                      >
                        {'Forrige'}
                      </Button>
                      <Button
                        variant='outline'
                        size='sm'
                        onClick={() => handlePageChange(currentPage + 1)}
                        disabled={currentPage >= totalPages - 1}
                      >
                        {'Næste'}
                      </Button>
                    </div>
                  </div>
                )}
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Confirmation Dialog */}
      <AlertDialog
        open={actionDialog.type !== null}
        onOpenChange={() => setActionDialog({ type: null, user: null })}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>
              {actionDialog.type === 'ban' && 'Ban bruger'}
              {actionDialog.type === 'unban' && 'Fjern ban fra bruger'}
              {actionDialog.type === 'impersonate' && 'Udgiv dig for bruger'}
            </AlertDialogTitle>
            <AlertDialogDescription>
              {actionDialog.type === 'ban' &&
                `Er du sikker på, at du vil banne ${actionDialog.user?.email || ''}? Dette vil forhindre dem i at logge ind.`}
              {actionDialog.type === 'unban' &&
                `Er du sikker på, at du vil fjerne ban fra ${actionDialog.user?.email || ''}? De vil kunne logge ind igen.`}
              {actionDialog.type === 'impersonate' &&
                `Er du sikker på, at du vil udgive dig for ${actionDialog.user?.email || ''}? Du vil blive logget ind som denne bruger.`}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>{'Annuller'}</AlertDialogCancel>
            <AlertDialogAction
              onClick={confirmAction}
              className={
                actionDialog.type === 'ban' ? 'bg-red-600 hover:bg-red-700' : ''
              }
            >
              {actionDialog.type === 'ban' && 'Ban bruger'}
              {actionDialog.type === 'unban' && 'Fjern ban fra bruger'}
              {actionDialog.type === 'impersonate' && 'Udgiv sig for'}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </PageContainer>
  );
}