import { Pencil, Trash2 } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ConfirmDialog } from "@/components/ui/confirm-dialog";
import type { User } from "@/lib/models";

const ROLE_LABELS: Record<User["role"], string> = {
  ADMIN: "Amministratore",
  MANAGER: "Gestore",
  CLIENT: "Associazione",
};

export function UserAccountsCard({
  users,
  actions,
  onEdit,
  onDelete,
}: {
  users: User[];
  actions?: React.ReactNode;
  onEdit?: (index: number) => void;
  onDelete?: (index: number) => Promise<void> | void;
}) {
  const editable = Boolean(onEdit || onDelete);

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle>Account di accesso ({users.length})</CardTitle>
        {actions}
      </CardHeader>
      <CardContent>
        {users.length === 0 ? (
          <p className="py-4 text-center text-sm text-muted-foreground">
            Nessun account configurato
          </p>
        ) : (
          <ul className="divide-y">
            {users.map((user, index) => (
              <li key={user.id ?? index} className="flex items-center justify-between py-3">
                <div className="flex items-center gap-2.5">
                  <span className="text-sm font-medium">{user.email}</span>
                  <Badge variant="secondary">{ROLE_LABELS[user.role] ?? user.role}</Badge>
                </div>
                {editable && (
                  <div className="flex items-center gap-1">
                    {onEdit && (
                      <Button variant="ghost" size="icon-sm" onClick={() => onEdit(index)}>
                        <Pencil className="size-4" />
                      </Button>
                    )}
                    {onDelete && (
                      <ConfirmDialog
                        trigger={
                          <Button variant="ghost" size="icon-sm">
                            <Trash2 className="size-4 text-destructive" />
                          </Button>
                        }
                        title="Rimuovere l'account?"
                        description={`${user.email} non potrà più accedere al portale.`}
                        confirmLabel="Rimuovi"
                        onConfirm={() => onDelete(index)}
                      />
                    )}
                  </div>
                )}
              </li>
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}