import { useState } from "react";
import { Eye } from "lucide-react";
import { Button } from "@/shared/common/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/shared/common/ui/dialog";
import { OrganizationAdminList } from "./OrganizationAdminList";

export const StatusCell = ({
  id,
  adminsCount,
}: {
  id: string;
  adminsCount: number;
}) => {
  const [isDialogOpen, setIsDialogOpen] = useState(false);

  return (
    <div className="flex items-center gap-2">
      <div className="font-medium">
        {adminsCount > 0 
          ? 
          `${adminsCount} Admin${adminsCount !== 1 ? "s" : ""}`
          : "No Admin"}
      </div>

      {adminsCount > 0 && (
        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
          <DialogTrigger asChild>
            <Button variant="ghost" className="p-1 h-auto w-auto">
              <Eye className="h-4 w-4 text-gray-500 dark:text-gray-400 hover:text-primary" />
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-md max-h-[80vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>Assigned Admins</DialogTitle>
            </DialogHeader>
            <div className="max-h-[60vh] overflow-y-auto pr-2">
              <OrganizationAdminList organizationId={id} />
            </div>
          </DialogContent>
        </Dialog>
      )}
    </div>
  );
};
