llink/js/src/features/network-selector.tsx

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Check, Plus, Settings, Users } from "lucide-react";
import { toast } from "sonner";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Small } from "@/components/ui/typography";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { useNetworks } from "@/hooks/use-networks";
import { useMyInvitations, useAcceptInvitation } from "@/hooks/use-invitations";
import { apiClient } from "@/api/client";
import { Progress } from "@/components/ui/progress";
import type { Network, Invitation } from "@/api/types";

function NetworkRow({
  network,
  onClick,
  onSettingsClick,
}: {
  network: Network;
  onClick: () => void;
  onSettingsClick: () => void;
}) {
  const initials = network.name.slice(0, 2).toUpperCase();
  const memberCount = network.humans.length;

  return (
    <button
      type="button"
      onClick={onClick}
      className="group flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-accent"
    >
      <Avatar>
        <AvatarFallback className="bg-primary/10 text-primary font-medium">
          {initials}
        </AvatarFallback>
      </Avatar>
      <div className="min-w-0 flex-1">
        <p className="truncate text-sm font-medium">{network.name}</p>
        <div className="text-muted-foreground flex items-center gap-1">
          <Users className="size-3" />
          <Small className="text-muted-foreground">
            {memberCount} {memberCount === 1 ? "member" : "members"}
          </Small>
        </div>
      </div>
      <span
        role="button"
        tabIndex={0}
        className="text-muted-foreground hover:text-foreground opacity-0 transition-opacity group-hover:opacity-100"
        onClick={(e) => {
          e.stopPropagation();
          onSettingsClick();
        }}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            e.stopPropagation();
            onSettingsClick();
          }
        }}
      >
        <Settings className="size-4" />
      </span>
    </button>
  );
}

function InvitationRow({ invitation }: { invitation: Invitation }) {
  const acceptInvitation = useAcceptInvitation();
  const initials = invitation.network_name.slice(0, 2).toUpperCase();

  const handleAccept = () => {
    acceptInvitation.mutate(invitation.network_id, {
      onSuccess: () => {
        toast.success(`Joined ${invitation.network_name}`);
      },
      onError: (err) => {
        toast.error(err.message || "Failed to accept invitation");
      },
    });
  };

  return (
    <div className="flex w-full items-center gap-3 px-4 py-3">
      <Avatar>
        <AvatarFallback className="bg-primary/10 text-primary font-medium">
          {initials}
        </AvatarFallback>
      </Avatar>
      <div className="min-w-0 flex-1">
        <p className="truncate text-sm font-medium">
          {invitation.network_name}
        </p>
        <Small className="text-muted-foreground">You've been invited</Small>
      </div>
      <Button
        size="sm"
        onClick={handleAccept}
        disabled={acceptInvitation.isPending}
      >
        <Check className="mr-1 size-3.5" />
        {acceptInvitation.isPending ? "Joining..." : "Accept"}
      </Button>
    </div>
  );
}

function CreateNetworkDialog({
  open,
  onOpenChange,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}) {
  const [name, setName] = useState("");
  const navigate = useNavigate();
  const queryClient = useQueryClient();

  const createNetwork = useMutation({
    mutationFn: (networkName: string) =>
      apiClient.createNetwork({ name: networkName }),
    onSuccess: (network) => {
      queryClient.invalidateQueries({ queryKey: ["networks"] });
      toast.success(`Created ${network.name}`);
      onOpenChange(false);
      setName("");
      navigate(`/${network.id}/settings`);
    },
    onError: (err) => {
      toast.error(err.message || "Failed to create network");
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const trimmed = name.trim();
    if (!trimmed) return;
    createNetwork.mutate(trimmed);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Create a Network</DialogTitle>
          <DialogDescription>Caution: creating a network will create a new billing account. If your team already has a network, ask them for an invite.</DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit}>
          <div className="py-4">
            <Input
              placeholder="Network name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              autoFocus
            />
          </div>
          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              onClick={() => onOpenChange(false)}
            >
              Cancel
            </Button>
            <Button
              type="submit"
              disabled={!name.trim() || createNetwork.isPending}
            >
              {createNetwork.isPending ? "Creating..." : "Create"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}

export default function NetworkSelector() {
  const navigate = useNavigate();
  const [createDialogOpen, setCreateDialogOpen] = useState(false);

  const { data: networks, isPending, error, refetch } = useNetworks();
  const { data: invitations } = useMyInvitations();

  if (isPending) {
    return <Progress />;
  }

  if (error) {
    return (
      <div className="flex h-full items-center justify-center">
        <p className="text-destructive text-sm">Failed to load networks</p>
        <p>{error.message}</p>
      </div>
    );
  }

  const hasInvitations = invitations && invitations.length > 0;
  const hasNetworks = networks && networks.length > 0;

  if (!hasNetworks && !hasInvitations) {
    return (
      <div className="mx-auto flex h-full max-w-sm flex-col items-center justify-center gap-4 px-4 text-center">
        <p className="text-muted-foreground">
          You don't have access to any networks yet. Create one or ask your admin for an invite.
        </p>
        <div className="flex flex-row gap-1">
          <Button variant="outline" onClick={() => refetch()}>Refresh</Button>
          <Button onClick={() => setCreateDialogOpen(true)}>
            <Plus className="mr-1 size-3.5" />
            Create Network
          </Button>
        </div>
        <CreateNetworkDialog
          open={createDialogOpen}
          onOpenChange={setCreateDialogOpen}
        />
      </div>
    );
  }

  return (
    <>
      <ScrollArea className="h-full">
        <div className="py-1">
          {hasInvitations && (
            <>
              <div className="flex items-center gap-2 px-4 pb-1 pt-4">
                <p className="text-muted-foreground text-xs font-medium uppercase tracking-wider">
                  Pending Invitations
                </p>
                <Badge variant="secondary" className="text-xs">
                  {invitations.length}
                </Badge>
              </div>
              {invitations.map((inv, index) => (
                <div key={`${inv.network_id}-${inv.email}`}>
                  <InvitationRow invitation={inv} />
                  {index < invitations.length - 1 && (
                    <Separator className="mx-4" />
                  )}
                </div>
              ))}
              <Separator className="mx-4 mt-2" />
            </>
          )}

          {hasNetworks && (
            <>
              {hasInvitations && (
                <p className="text-muted-foreground px-4 pb-1 pt-4 text-xs font-medium uppercase tracking-wider">
                  Your Networks
                </p>
              )}
              {networks.map((network, index) => (
                <div key={network.id}>
                  <NetworkRow
                    network={network}
                    onClick={() => navigate(`/${network.id}`)}
                    onSettingsClick={() =>
                      navigate(`/${network.id}/settings`)
                    }
                  />
                  {index < networks.length - 1 && (
                    <Separator className="mx-4" />
                  )}
                </div>
              ))}
            </>
          )}

          <Separator className="mx-4 mt-2" />
          <div className="px-4 py-3">
            <Button
              variant="outline"
              size="sm"
              onClick={() => setCreateDialogOpen(true)}
            >
              <Plus className="mr-1 size-3.5" />
              New Network
            </Button>
          </div>
        </div>
      </ScrollArea>

      <CreateNetworkDialog
        open={createDialogOpen}
        onOpenChange={setCreateDialogOpen}
      />
    </>
  );
}