import Link from 'next/link';
import Layout from '../components/Layout';
import DeckBuilderView from '../components/DeckBuilderView';
import { useAuth } from '../lib/use-auth';
import { useDeckBuilder } from '../lib/use-deck-builder.js';

export default function DeckBuilder() {
  const { user, loading: authLoading } = useAuth();
  const builder = useDeckBuilder({ user, authLoading });

  if (builder.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">Please log in to use the deck builder</h1>
            <Link href="/login" className="text-accent-ember hover:underline">
              Go to Login
            </Link>
          </div>
        </div>
      </Layout>
    );
  }

  if (builder.showDeckLoading) {
    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>
    );
  }

  if (builder.showDeckNotFound) {
    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">Deck not found</h1>
            <Link href="/decks" className="text-accent-ember hover:underline">
              Back to My Decks
            </Link>
          </div>
        </div>
      </Layout>
    );
  }

  return (
    <Layout user={user}>
      <DeckBuilderView {...builder} />
    </Layout>
  );
}