spsays-training/app/u/me/collections/page.tsx

"use client";

import { useEffect, useState } from "react";
import { Plus } from "lucide-react";
import { collections, SocialError, type Collection } from "@/lib/social";
import { useAuth } from "@/components/auth/auth-provider";
import { CollectionViews } from "@/components/social/collection-views";

export default function MyCollectionsPage() {
  const { user } = useAuth();
  const [list, setList] = useState<Collection[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Inline create form
  const [showCreate, setShowCreate] = useState(false);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [isPublic, setIsPublic] = useState(true);
  const [creating, setCreating] = useState(false);

  useEffect(() => {
    setLoading(true);
    collections
      .mine()
      .then((r) => setList(r ?? []))
      .catch((err) =>
        setError(
          err instanceof SocialError ? err.message : "Could not load collections.",
        ),
      )
      .finally(() => setLoading(false));
  }, []);

  async function createOne(e: React.SyntheticEvent) {
    e.preventDefault();
    if (!title.trim()) return;
    setCreating(true);
    setError(null);
    try {
      const c = await collections.create({
        title,
        description: description || undefined,
        is_public: isPublic,
      });
      setList((rows) => [c, ...rows]);
      setTitle("");
      setDescription("");
      setShowCreate(false);
    } catch (err) {
      setError(err instanceof SocialError ? err.message : "Could not create.");
    } finally {
      setCreating(false);
    }
  }

  const isPremium = user?.plan === "premium";
  const publicCount = list.filter((c) => c.is_public).length;
  const privateCount = list.filter((c) => !c.is_public).length;

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between">
        <p className="text-sm text-muted-foreground">
          {isPremium ? (
            <>Premium — unlimited collections.</>
          ) : (
            <>
              <span className="tabular-nums">{publicCount}</span> / 5 public ·{" "}
              <span className="tabular-nums">{privateCount}</span> / 5 private
            </>
          )}
        </p>
        {!showCreate ? (
          <button
            onClick={() => setShowCreate(true)}
            className="inline-flex items-center gap-1.5 rounded-lg bg-primary text-primary-foreground px-3 h-10 text-sm font-medium"
          >
            <Plus className="size-4" />
            New
          </button>
        ) : null}
      </div>

      {showCreate ? (
        <form
          onSubmit={createOne}
          className="rounded-xl bg-card ring-1 ring-foreground/10 p-4 space-y-3"
        >
          <input
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Collection title"
            maxLength={120}
            required
            className="w-full bg-background text-foreground text-base rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
          />
          <textarea
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            placeholder="Description (optional)"
            rows={2}
            className="w-full bg-background text-foreground text-sm rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40 resize-none"
          />
          <div className="flex items-center justify-between text-sm">
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={isPublic}
                onChange={(e) => setIsPublic(e.target.checked)}
              />
              <span className="text-foreground">Public</span>
            </label>
            <div className="flex items-center gap-2">
              <button
                type="button"
                onClick={() => {
                  setShowCreate(false);
                  setTitle("");
                }}
                className="px-3 h-9 rounded-md text-muted-foreground hover:bg-muted"
              >
                Cancel
              </button>
              <button
                type="submit"
                disabled={creating || !title.trim()}
                className="px-3 h-9 rounded-md bg-primary text-primary-foreground disabled:opacity-60"
              >
                {creating ? "Creating…" : "Create"}
              </button>
            </div>
          </div>
        </form>
      ) : null}

      {error ? <p className="text-sm text-destructive">{error}</p> : null}

      {loading ? (
        <p className="text-sm text-muted-foreground">Loading…</p>
      ) : (
        <CollectionViews
          collections={list}
          hrefFor={(c) => `/u/me/collections/${c.id}`}
          emptyMessage="No collections yet — create one above, or save a quote into a new collection from the selection toolbar."
        />
      )}
    </div>
  );
}