Epicure/apps/web/components/shopping-lists/share-shopping-list-button.tsx

"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { UserPlus, X } from "lucide-react";
import { toast } from "sonner";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";

type Role = "viewer" | "editor";

interface Member {
  id: string;
  userId: string;
  role: Role;
  createdAt: string;
  user: {
    name: string;
    username: string | null;
    avatarUrl: string | null;
  };
}

interface Props {
  listId: string;
}

export function ShareShoppingListButton({ listId }: Props) {
  const t = useTranslations("shoppingLists");
  const ts = useTranslations("shareDialog");
  const tCommon = useTranslations("common");
  const [open, setOpen] = useState(false);
  const [email, setEmail] = useState("");
  const [role, setRole] = useState<Role>("viewer");
  const [members, setMembers] = useState<Member[]>([]);
  const [loading, setLoading] = useState(false);
  const [inviting, setInviting] = useState(false);

  async function fetchMembers() {
    setLoading(true);
    try {
      const res = await fetch(`/api/v1/shopping-lists/${listId}/members`);
      if (!res.ok) throw new Error("Failed to load members");
      const data = await res.json() as Member[];
      setMembers(data);
    } catch {
      toast.error(ts("loadMembersFailed"));
    } finally {
      setLoading(false);
    }
  }

  function handleOpenChange(next: boolean) {
    setOpen(next);
    if (next) {
      void fetchMembers();
    } else {
      setEmail("");
      setRole("viewer");
    }
  }

  async function handleInvite() {
    if (!email.trim()) {
      toast.error(ts("enterEmail"));
      return;
    }
    setInviting(true);
    try {
      const res = await fetch(`/api/v1/shopping-lists/${listId}/members`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: email.trim(), role }),
      });
      if (res.status === 409) { toast.error(ts("alreadyMember")); return; }
      if (res.status === 404) { toast.error(ts("userNotFound")); return; }
      if (!res.ok) { toast.error(ts("inviteFailed")); return; }
      toast.success(ts("invitationSent"));
      setEmail("");
      await fetchMembers();
    } catch {
      toast.error(ts("inviteFailed"));
    } finally {
      setInviting(false);
    }
  }

  async function handleRemove(memberId: string) {
    try {
      const res = await fetch(
        `/api/v1/shopping-lists/${listId}/members?memberId=${memberId}`,
        { method: "DELETE" },
      );
      if (!res.ok) { toast.error(ts("removeMemberFailed")); return; }
      setMembers((prev) => prev.filter((m) => m.id !== memberId));
      toast.success(ts("memberRemoved"));
    } catch {
      toast.error(ts("removeMemberFailed"));
    }
  }

  return (
    <>
      <Button variant="outline" size="sm" onClick={() => handleOpenChange(true)}>
        <UserPlus className="h-4 w-4" />
        {tCommon("share")}
      </Button>

      <Dialog open={open} onOpenChange={handleOpenChange}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>{t("shareTitle")}</DialogTitle>
            <DialogDescription>
              {t("shareDescription")}
            </DialogDescription>
          </DialogHeader>

          <div className="flex gap-2 mt-2">
            <Input
              type="email"
              placeholder={ts("emailPlaceholder")}
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              onKeyDown={(e) => { if (e.key === "Enter") void handleInvite(); }}
              className="flex-1"
            />
            <Select value={role} onValueChange={(v) => setRole(v as Role)}>
              <SelectTrigger className="w-28">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="viewer">{ts("viewer")}</SelectItem>
                <SelectItem value="editor">{ts("editor")}</SelectItem>
              </SelectContent>
            </Select>
            <Button onClick={() => void handleInvite()} disabled={inviting}>
              {ts("invite")}
            </Button>
          </div>

          <div className="mt-4 space-y-2">
            {loading && (
              <p className="text-sm text-muted-foreground">{ts("loadingMembers")}</p>
            )}
            {!loading && members.length === 0 && (
              <p className="text-sm text-muted-foreground">{ts("noMembers")}</p>
            )}
            {members.map((m) => (
              <div
                key={m.id}
                className="flex items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm"
              >
                <div className="flex-1 min-w-0">
                  <span className="font-medium truncate">{m.user.name}</span>
                  {m.user.username && (
                    <span className="text-muted-foreground ml-1">
                      @{m.user.username}
                    </span>
                  )}
                </div>
                <Badge variant={m.role === "editor" ? "default" : "secondary"}>
                  {ts(m.role)}
                </Badge>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-7 w-7 shrink-0"
                  onClick={() => void handleRemove(m.id)}
                  aria-label="Remove member"
                >
                  <X className="h-3.5 w-3.5" />
                </Button>
              </div>
            ))}
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}