import Link from 'next/link';
import Layout from '../components/Layout';
import DecksPageView from '../components/DecksPageView';
import { useAuth } from '../lib/use-auth';
import { useDecksPage } from '../lib/use-decks-page.js';

export default function Decks() {
  const { user, loading: authLoading } = useAuth();
  const decksPage = useDecksPage({ user, authLoading });

  if (decksPage.showLoggedOut || !user) {
    return (
      <Layout user={user}>
        <div className="flex items-center justify-center min-h-screen">
          <div className="text-center">
            <h1 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
              Please log in to view your decks
            </h1>
            <Link href="/login" style={{ color: 'var(--accent-ember)' }} className="hover:underline">
              Go to Login
            </Link>
          </div>
        </div>
      </Layout>
    );
  }

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

  return (
    <Layout user={user}>
      <DecksPageView {...decksPage} />
    </Layout>
  );
}