import Link from 'next/link';
import Layout from '../../components/Layout';
import CollectionPageView from '../../components/CollectionPageView';
import { useAuth } from '../../lib/use-auth';
import { useCollectionView } from '../../lib/use-collection-view.js';

export default function CollectionView() {
  const { user, loading: authLoading } = useAuth();
  const collectionPage = useCollectionView({ user, authLoading });

  if (collectionPage.showInitialLoading) {
    return (
      <Layout user={user}>
        <div className="flex items-center justify-center min-h-screen">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2" style={{ borderColor: 'var(--accent-ember)' }} />
        </div>
      </Layout>
    );
  }

  if (!collectionPage.collection) {
    return (
      <Layout user={user}>
        <div className="flex items-center justify-center min-h-screen">
          <div className="text-center">
            <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
              List not found
            </h2>
            <Link href="/collections">
              <button type="button" className="px-4 py-2 rounded-lg text-white" style={{ backgroundColor: 'var(--accent-ember)' }}>
                Back to Lists
              </button>
            </Link>
          </div>
        </div>
      </Layout>
    );
  }

  return (
    <Layout user={user}>
      <CollectionPageView {...collectionPage} user={user} />
    </Layout>
  );
}