"use client";

/**
 * /u/me/collections/[id] — single-collection view.
 *
 * The whole page is the collection's CollectionScrollCard (carousel of
 * cover + posts) and an Edit button below it. All editing — title,
 * description, cover, member posts, delete — lives in the EditCollectionDrawer
 * so the page itself stays focused on the carousel preview.
 */

import { use, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { ArrowLeft } from "lucide-react";
import {
  collections,
  SocialError,
  type Collection,
  type Post,
} from "@/lib/social";
import { CollectionScrollCard } from "@/components/social/collection-scroll-card";
import { EditCollectionDrawer } from "@/components/social/edit-collection-drawer";

export default function CollectionDetailPage(props: {
  params: Promise<{ id: string }>;
}) {
  const { id } = use(props.params);
  const router = useRouter();

  const [c, setC] = useState<Collection | null>(null);
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [editOpen, setEditOpen] = useState(false);

  useEffect(() => {
    let cancelled = false;
    collections
      .get(id)
      .then(({ collection, posts }) => {
        if (cancelled) return;
        setC(collection);
        setPosts(posts ?? []);
      })
      .catch((err) => {
        setError(
          err instanceof SocialError ? err.message : "Could not load collection.",
        );
      })
      .finally(() => !cancelled && setLoading(false));
    return () => {
      cancelled = true;
    };
  }, [id]);

  if (loading) return <p className="text-sm text-muted-foreground">Loading…</p>;
  if (error && !c) return <p className="text-sm text-destructive">{error}</p>;
  if (!c) return null;

  return (
    <div className="space-y-6">
      <button
        type="button"
        onClick={() => router.push("/u/me/collections")}
        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
      >
        <ArrowLeft className="size-4" /> All collections
      </button>

      <CollectionScrollCard
        collection={c}
        href={`/u/me/collections/${c.id}`}
        initialPosts={posts}
        onEdit={() => setEditOpen(true)}
      />

      <EditCollectionDrawer
        open={editOpen}
        onClose={() => setEditOpen(false)}
        collection={c}
        currentPosts={posts}
        onSaved={({ collection, posts: rows }) => {
          setC(collection);
          setPosts(rows);
        }}
        onDeleted={() => router.push("/u/me/collections")}
      />
    </div>
  );
}