"use client"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { useState, useTransition } from "react"; import { Loader2, Lock, Pencil, Plus, Trash2, X } from "lucide-react"; import { useTranslations } from "next-intl"; type ApprovedPet = { slug: string; displayName: string; spritesheetUrl: string; }; export type OwnerCollection = { id: string; slug: string; title: string; description: string; externalUrl: string | null; coverPetSlug: string | null; petSlugs: string[]; petCount: number; featured: boolean; }; type Props = { collections: OwnerCollection[]; approvedPets: ApprovedPet[]; maxCollections: number; publicHandle: string; }; export function OwnerCollectionsManager({ collections, approvedPets, maxCollections, publicHandle: _publicHandle, }: Props) { const t = useTranslations("ownerCollections"); const [creating, setCreating] = useState(false); const [editingId, setEditingId] = useState(null); const personalCount = collections.filter((c) => !c.featured).length; const atCap = personalCount >= maxCollections; return (

{t("title")}

{t("description")} {personalCount}/{maxCollections} used.

{approvedPets.length === 0 ? (
You need at least one approved pet to create a collection.
) : null} {creating ? ( setCreating(false)} onSaved={() => setCreating(false)} /> ) : null}
{collections.length === 0 && !creating ? (
No collections yet. Group your pets into themed sets that show up on your profile.
) : null} {collections.map((c) => { if (editingId === c.id) { return ( setEditingId(null)} onSaved={() => setEditingId(null)} /> ); } return ( setEditingId(c.id)} /> ); })}
); } function CollectionCard({ collection, onEdit, }: { collection: OwnerCollection; onEdit: () => void; }) { const t = useTranslations("ownerCollections"); const router = useRouter(); const [deleting, setDeleting] = useState(false); const [, startTransition] = useTransition(); async function handleDelete() { if (collection.featured) return; if ( !confirm( `Delete "${collection.title}"? Your pets stay on your profile, only the collection card is removed.`, ) ) { return; } setDeleting(true); try { const res = await fetch(`/api/profile/collections/${collection.id}`, { method: "DELETE", }); if (!res.ok) { const j = (await res.json().catch(() => ({}))) as { error?: string }; alert(`Could not delete: ${j.error ?? res.statusText}`); return; } startTransition(() => router.refresh()); } finally { setDeleting(false); } } return (
{collection.featured ? ( Curated ) : ( Personal )} {collection.petCount} pets

{collection.title}

{collection.description ? (

{collection.description}

) : null}
{!collection.featured ? (
) : null}
); } function CollectionForm({ mode, collection, approvedPets, onCancel, onSaved, }: { mode: "create" | "edit"; collection?: OwnerCollection; approvedPets: ApprovedPet[]; onCancel: () => void; onSaved: () => void; }) { const t = useTranslations("ownerCollections"); const router = useRouter(); const [title, setTitle] = useState(collection?.title ?? ""); const [description, setDescription] = useState(collection?.description ?? ""); const [selected, setSelected] = useState>( () => new Set(collection?.petSlugs ?? []), ); const [coverSlug, _setCoverSlug] = useState( collection?.coverPetSlug ?? null, ); const [saving, setSaving] = useState(false); const [error, setError] = useState(null); const [, startTransition] = useTransition(); function togglePet(slug: string) { setSelected((prev) => { const next = new Set(prev); if (next.has(slug)) next.delete(slug); else next.add(slug); return next; }); } async function handleSubmit(e: React.FormEvent) { e.preventDefault(); setSaving(true); setError(null); try { const petSlugs = approvedPets .map((p) => p.slug) .filter((s) => selected.has(s)); const body = { title: title.trim(), description: description.trim(), petSlugs, coverPetSlug: coverSlug && petSlugs.includes(coverSlug) ? coverSlug : (petSlugs[0] ?? null), }; const url = mode === "create" ? "/api/profile/collections" : `/api/profile/collections/${collection?.id}`; const method = mode === "create" ? "POST" : "PATCH"; const res = await fetch(url, { method, headers: { "Content-Type": "application/json" }, body: JSON.stringify(body), }); if (!res.ok) { const j = (await res.json().catch(() => ({}))) as { error?: string }; setError(j.error ?? `Save failed (${res.status})`); return; } onSaved(); startTransition(() => router.refresh()); } finally { setSaving(false); } } return (

{mode === "create" ? "New collection" : "Edit collection"}