import { formatDistanceToNow } from "date-fns";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Pencil, Trash2 } from "lucide-react";

interface User {
  id: number;
  username: string;
  email?: string;
  is_admin: boolean;
  is_active: boolean;
  last_login?: string;
}

interface UserListProps {
  users: User[];
  onEdit: (userId: number) => void;
  onDelete: (userId: number) => void;
}

export function UserList({ users, onEdit, onDelete }: UserListProps) {
  console.log("Rendering user list with users:", users);
  
  if (users.length === 0) {
    return (
      <div className="text-center py-8">
        <p className="text-muted-foreground">No users found</p>
      </div>
    );
  }

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Username</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Admin</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Last Login</TableHead>
          <TableHead className="text-right">Actions</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {users.map((user) => (
          <TableRow key={user.id}>
            <TableCell className="font-medium">{user.username}</TableCell>
            <TableCell>{user.email || '-'}</TableCell>
            <TableCell>
              {user.is_admin ? (
                <Badge variant="default">Admin</Badge>
              ) : (
                <Badge variant="outline">No</Badge>
              )}
            </TableCell>
            <TableCell>
              {user.is_active ? (
                <Badge variant="default" className="bg-green-100 text-green-800 hover:bg-green-100">Active</Badge>
              ) : (
                <Badge variant="secondary" className="bg-slate-100">Inactive</Badge>
              )}
            </TableCell>
            <TableCell>
              {user.last_login
                ? formatDistanceToNow(new Date(user.last_login), { addSuffix: true })
                : 'Never'}
            </TableCell>
            <TableCell className="text-right space-x-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => onEdit(user.id)}
                className="h-8 w-8 p-0"
              >
                <span className="sr-only">Edit</span>
                <Pencil className="h-4 w-4" />
              </Button>
              <Button
                variant="outline"
                size="sm"
                onClick={() => onDelete(user.id)}
                className="h-8 w-8 p-0"
              >
                <span className="sr-only">Delete</span>
                <Trash2 className="h-4 w-4" />
              </Button>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
} 