import Link from "next/link";
import { Edit3, Mail, UserCheck } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { formatDateTimeCL } from "@/lib/date-format";
import { labelRole, roleBadgeClass, userStateBadgeClass } from "@/lib/user-roles";
import { UserStatusDialog } from "@/components/users/user-status-dialog";
import { toggleUserActiveAction } from "@/server/actions/users";
import type { UsersListResult } from "@/server/queries/users";

export function UsersTable({
  result,
  currentUserId,
  currentUserRole,
}: {
  result: UsersListResult;
  currentUserId: string;
  currentUserRole: string;
}) {
  return (
    <Card className="border-border shadow-sm">
      <CardContent className="p-0">
        <div className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow className="bg-muted">
                <TableHead className="px-4 py-3">Nombre</TableHead>
                <TableHead className="px-4 py-3">Correo</TableHead>
                <TableHead className="px-4 py-3">Rol</TableHead>
                <TableHead className="px-4 py-3">Estado</TableHead>
                <TableHead className="px-4 py-3">Creado</TableHead>
                <TableHead className="px-4 py-3">Último acceso</TableHead>
                <TableHead className="px-4 py-3 text-right">Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {result.items.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={7} className="h-24 text-center text-muted-foreground">
                    No hay usuarios para los filtros seleccionados.
                  </TableCell>
                </TableRow>
              ) : (
                result.items.map((user) => {
                  const isSelf = user.id === currentUserId;
                  return (
                    <TableRow key={user.id}>
                      <TableCell className="px-4 py-3">
                        <div className="flex items-center gap-2">
                          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-muted-foreground">
                            <UserCheck className="h-4 w-4" />
                          </div>
                          <div>
                            <p className="font-medium text-foreground">{user.name}</p>
                            <p className="text-xs text-muted-foreground">ID: {user.id.slice(0, 8)}</p>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell className="px-4 py-3">
                        <span className="inline-flex items-center gap-2 whitespace-nowrap text-foreground">
                          <Mail className="h-3.5 w-3.5 text-muted-foreground" />
                          {user.email}
                        </span>
                      </TableCell>
                      <TableCell className="px-4 py-3">
                        <Badge className={roleBadgeClass(user.role.name)}>
                          {labelRole(user.role.name)}
                        </Badge>
                      </TableCell>
                      <TableCell className="px-4 py-3">
                        <Badge className={userStateBadgeClass(user.isActive)}>
                          {user.isActive ? "Activo" : "Inactivo"}
                        </Badge>
                      </TableCell>
                      <TableCell className="px-4 py-3 text-foreground">{formatDateTimeCL(user.createdAt)}</TableCell>
                      <TableCell className="px-4 py-3 text-foreground">{formatDateTimeCL(user.lastLoginAt)}</TableCell>
                      <TableCell className="px-4 py-3">
                        <div className="flex items-center justify-end gap-2">
                          <Button asChild size="sm" variant="outline">
                            <Link href={`/usuarios/${user.id}`}>
                              <Edit3 className="h-4 w-4" />
                              Editar
                            </Link>
                          </Button>
                          {currentUserRole === "ADMIN" ? (
                            <UserStatusDialog
                              userId={user.id}
                              isActive={user.isActive}
                              disabled={isSelf}
                              action={toggleUserActiveAction}
                            />
                          ) : null}
                        </div>
                      </TableCell>
                    </TableRow>
                  );
                })
              )}
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  );
}