'use client';

import { ChevronLeft, FolderOpen } from 'lucide-react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import { toast } from 'sonner';

interface Collection {
  id: string;
  title: string;
  category?: string;
  description?: string;
}

const Page = () => {
  const params = useParams();
  const id = params?.id as string;
  const [collection, setCollection] = useState<Collection | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!id) return;
    const fetchCollection = async () => {
      try {
        const res = await fetch(`/api/v1/collections/${id}`);
        if (!res.ok) {
          if (res.status === 404) setCollection(null);
          else throw new Error('Failed to fetch');
          return;
        }
        const data = await res.json();
        setCollection(data);
      } catch {
        toast.error('Failed to load collection');
      } finally {
        setLoading(false);
      }
    };
    fetchCollection();
  }, [id]);

  return (
    <div className="flex flex-col pt-10 pb-28 lg:pb-8 px-4 max-w-4xl mx-auto w-full">
      <Link
        href="/spaces"
        className="inline-flex items-center gap-1 text-sm text-black/60 dark:text-white/60 hover:text-black dark:hover:text-white mb-4"
      >
        <ChevronLeft size={16} />
        Back to Spaces
      </Link>

      {loading ? (
        <div className="h-48 rounded-2xl bg-light-secondary dark:bg-dark-secondary animate-pulse" />
      ) : collection ? (
        <>
          <div className="flex items-center gap-3 border-b border-light-200/20 dark:border-dark-200/20 pb-6">
            <FolderOpen size={40} className="text-[#7C3AED]" />
            <h1 className="text-3xl font-normal">{collection.title}</h1>
          </div>
          {collection.category && (
            <span className="inline-block mt-4 text-sm px-2 py-1 rounded bg-light-200 dark:bg-dark-200">
              {collection.category}
            </span>
          )}
          {collection.description && (
            <p className="mt-4 text-black/70 dark:text-white/70">{collection.description}</p>
          )}
          <div className="mt-8 p-6 rounded-2xl bg-light-secondary dark:bg-dark-secondary text-center text-black/60 dark:text-white/60">
            <p>Read-only collection. Full content integration coming soon.</p>
          </div>
        </>
      ) : (
        <p className="mt-6 text-black/60 dark:text-white/60">Collection not found.</p>
      )}
    </div>
  );
};

export default Page;
