'use client';

import React, { useState, useMemo, useEffect } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { MoreHorizontal, UserCog, KeyRound, Search, FileText } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Label } from '../ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
import { Badge } from '../ui/badge';
import { cn } from '@/lib/utils';
import { useToast } from '@/hooks/use-toast';
import { Input } from '../ui/input';
import { apiClient } from '@/servicios/api-client';

type User = {
    id: string;
    correo: string;
    rol: 'cliente' | 'admin' | 'superadmin';
    nombre?: string;
    apellido?: string;
    foto_perfil?: string;
};

export function UsersAdminTab() {
    const { toast } = useToast();
    const [allUsers, setAllUsers] = useState<User[]>([]);
    const [isLoading, setIsLoading] = useState(false);
    const [isRoleDialogOpen, setIsRoleDialogOpen] = useState(false);
    const [selectedUser, setSelectedUser] = useState<User | null>(null);
    const [selectedRole, setSelectedRole] = useState<User['rol']>('cliente');
    const [searchTerm, setSearchTerm] = useState('');

    useEffect(() => {
        loadUsers();
    }, []);

    const loadUsers = async () => {
        try {
            setIsLoading(true);
            // TODO: Implementar endpoint para obtener usuarios
            // const users = await apiClient.get('/usuarios');
            // setAllUsers(users);
        } catch (error) {
            console.error('Error cargando usuarios:', error);
            toast({
                title: 'Error',
                description: 'No se pudieron cargar los usuarios',
                variant: 'destructive'
            });
        } finally {
            setIsLoading(false);
        }
    };

    const filteredUsers = useMemo(() => {
        if (!allUsers) return [];
        if (!searchTerm) return allUsers;
        return allUsers.filter(user => 
            user.correo.toLowerCase().includes(searchTerm.toLowerCase()) ||
            (user.nombre && user.nombre.toLowerCase().includes(searchTerm.toLowerCase()))
        );
    }, [allUsers, searchTerm]);

    const handleEditRoleClick = (user: User) => {
        setSelectedUser(user);
        setSelectedRole(user.rol);
        setIsRoleDialogOpen(true);
    };

    const handleSaveChanges = async () => {
        if (selectedUser) {
            try {
                // TODO: Implementar endpoint para actualizar rol de usuario
                // await apiClient.put(`/usuarios/${selectedUser.id}`, { rol: selectedRole });
                
                toast({
                    title: 'Rol Actualizado',
                    description: `El rol de ${selectedUser.correo} ha sido cambiado a ${getRoleLabel(selectedRole)}.`,
                });
                setIsRoleDialogOpen(false);
                setSelectedUser(null);
                loadUsers();
            } catch (error) {
                toast({
                    title: 'Error',
                    description: 'No se pudo actualizar el rol',
                    variant: 'destructive'
                });
            }
        }
    };

    const getRoleBadgeVariant = (role: User['role']) => {
        switch(role) {
            case 'superadmin': return 'destructive';
            case 'admin': return 'default';
            default: return 'secondary';
        }
    };
    
    const getRoleLabel = (role: string) => {
        switch(role) {
          case 'superadmin': return 'Super Admin';
          case 'admin': return 'Admin';
          default: return 'Cliente';
        }
    }
    
    return (
        <>
            <Card>
                <CardHeader>
                    <CardTitle>Gestionar Usuarios</CardTitle>
                    <CardDescription>Visualiza y gestiona los roles de los usuarios.</CardDescription>
                </CardHeader>
                <CardContent>
                    <div className="mb-4">
                        <div className="relative">
                            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                            <Input
                                type="search"
                                placeholder="Buscar por nombre o email..."
                                className="w-full pl-8"
                                value={searchTerm}
                                onChange={(e) => setSearchTerm(e.target.value)}
                            />
                        </div>
                    </div>
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>Email</TableHead>
                                <TableHead>Nombre</TableHead>
                                <TableHead>Rol</TableHead>
                                <TableHead className="text-right">Acciones</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {isLoading && (
                                <TableRow>
                                    <TableCell colSpan={4} className="h-24 text-center">Cargando usuarios...</TableCell>
                                </TableRow>
                            )}
                            {filteredUsers && filteredUsers.map(user => (
                                <TableRow key={user.id}>
                                    <TableCell className="font-medium">{user.email}</TableCell>
                                    <TableCell>{user.displayName || '-'}</TableCell>
                                    <TableCell>
                                        <Badge variant={getRoleBadgeVariant(user.role)} className={cn(
                                            user.role === 'superadmin' && 'bg-accent text-accent-foreground',
                                            user.role === 'admin' && 'bg-primary/80',
                                        )}>
                                            {getRoleLabel(user.role)}
                                        </Badge>
                                    </TableCell>
                                    <TableCell className="text-right">
                                        <DropdownMenu>
                                            <DropdownMenuTrigger asChild>
                                                <Button variant="ghost" size="icon"><MoreHorizontal /></Button>
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent align="end">
                                                <DropdownMenuItem onClick={() => handleEditRoleClick(user)} disabled={user.role === 'superadmin'}>
                                                    <UserCog className="mr-2 h-4 w-4" />
                                                    Editar Rol
                                                </DropdownMenuItem>
                                                <DropdownMenuItem disabled>
                                                    <KeyRound className="mr-2 h-4 w-4" />
                                                    Cambiar Contraseña
                                                </DropdownMenuItem>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                    </TableCell>
                                </TableRow>
                            ))}
                             {!isLoading && filteredUsers && filteredUsers.length === 0 && (
                                <TableRow>
                                    <TableCell colSpan={4} className="h-24 text-center">No se encontraron usuarios.</TableCell>
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </CardContent>
            </Card>

            <Dialog open={isRoleDialogOpen} onOpenChange={setIsRoleDialogOpen}>
                <DialogContent className="sm:max-w-md">
                    <DialogHeader>
                        <DialogTitle>Cambiar Rol de Usuario</DialogTitle>
                        <DialogDescription>
                            Cambia el rol para <span className="font-semibold">{selectedUser?.email}</span>. Ten en cuenta que esto cambiará sus permisos.
                        </DialogDescription>
                    </DialogHeader>
                    <div className="py-4">
                        <Label htmlFor="role-select">Rol</Label>
                        <Select value={selectedRole} onValueChange={(value: User['role']) => setSelectedRole(value)}>
                            <SelectTrigger id="role-select" className="mt-2">
                                <SelectValue placeholder="Selecciona un rol" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="client">Cliente</SelectItem>
                                <SelectItem value="admin">Admin</SelectItem>
                            </SelectContent>
                        </Select>
                    </div>
                    <DialogFooter>
                        <Button type="button" variant="secondary" onClick={() => setIsRoleDialogOpen(false)}>Cancelar</Button>
                        <Button type="button" onClick={handleSaveChanges}>Guardar Cambios</Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </>
    );
}