Epicure/apps/web/components/meal-plan/share-meal-plan-button.tsx

"use client";

import { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
import { UserPlus, X, Link2, Copy, Check } from "lucide-react";
import { toast } from "sonner";
import QRCode from "qrcode";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";

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 {
  weekStart: string;
  mealPlanId?: string;
  initialIsPublic?: boolean;
}

export function ShareMealPlanButton({ weekStart, mealPlanId, initialIsPublic = false }: Props) {
  const t = useTranslations("mealPlan");
  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);
  const [isPublic, setIsPublic] = useState(initialIsPublic);
  const [planId, setPlanId] = useState(mealPlanId);
  const [savingPublic, setSavingPublic] = useState(false);
  const [copied, setCopied] = useState(false);
  const [qrDataUrl, setQrDataUrl] = useState<string | null>(null);

  function shareUrl(id: string): string {
    return `${window.location.origin}/m/${id}`;
  }

  useEffect(() => {
    if (initialIsPublic && mealPlanId) {
      QRCode.toDataURL(shareUrl(mealPlanId), { margin: 1, width: 160 }).then(setQrDataUrl).catch(() => {});
    }
    // Only needs to run once per mount with the plan's already-saved state —
    // subsequent changes are handled by togglePublic itself.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  async function togglePublic(checked: boolean) {
    setSavingPublic(true);
    const previous = isPublic;
    setIsPublic(checked);
    try {
      const res = await fetch(`/api/v1/meal-plans/${weekStart}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ isPublic: checked }),
      });
      if (!res.ok) throw new Error();
      const data = (await res.json()) as { id: string; isPublic: boolean };
      setPlanId(data.id);
      if (checked) {
        setQrDataUrl(await QRCode.toDataURL(shareUrl(data.id), { margin: 1, width: 160 }));
      } else {
        setQrDataUrl(null);
      }
    } catch {
      setIsPublic(previous);
      toast.error(ts("publicLinkToggleFailed"));
    } finally {
      setSavingPublic(false);
    }
  }

  async function copyLink() {
    if (!planId) return;
    try {
      await navigator.clipboard.writeText(shareUrl(planId));
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      toast.error(ts("copyLinkFailed"));
    }
  }

  async function fetchMembers() {
    setLoading(true);
    try {
      const res = await fetch(`/api/v1/meal-plans/${weekStart}/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/meal-plans/${weekStart}/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/meal-plans/${weekStart}/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 (
    <>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger render={
            <Button variant="ghost" size="icon" onClick={() => handleOpenChange(true)} aria-label={tCommon("share")}>
              <UserPlus className="h-4 w-4" />
            </Button>
          } />
          <TooltipContent>{tCommon("share")}</TooltipContent>
        </Tooltip>
      </TooltipProvider>

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

          <div className="flex items-center justify-between gap-3 rounded-lg border p-3">
            <div className="flex items-center gap-2 min-w-0">
              <Link2 className="h-4 w-4 text-muted-foreground shrink-0" />
              <div className="min-w-0">
                <p className="text-sm font-medium">{ts("publicLinkTitle")}</p>
                <p className="text-xs text-muted-foreground">{t("publicLinkReadOnlyDescription")}</p>
              </div>
            </div>
            <Switch checked={isPublic} disabled={savingPublic} onCheckedChange={(v) => { void togglePublic(v); }} />
          </div>
          {isPublic && planId && (
            <div className="flex items-center gap-3 rounded-lg border p-3">
              {qrDataUrl && (
                // eslint-disable-next-line @next/next/no-img-element -- a data: URL generated client-side, not an optimizable remote image
                <img src={qrDataUrl} alt={t("qrCodeAlt")} className="h-16 w-16 shrink-0" />
              )}
              <Button type="button" variant="outline" size="sm" className="flex-1" onClick={() => void copyLink()}>
                {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
                {copied ? ts("linkCopied") : ts("copyLink")}
              </Button>
            </div>
          )}

          <Separator />

          <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>
    </>
  );
}