import Link from 'next/link';
import Layout from '../../components/Layout';
import DeckDetailView from '../../components/DeckDetailView';
import { useAuth } from '../../lib/use-auth';
import { useDeckDetail } from '../../lib/use-deck-detail.js';

export default function DeckDetail() {
  const { user, loading: authLoading } = useAuth();
  const detail = useDeckDetail({ user, authLoading });

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

  return (
    <Layout user={user}>
      <DeckDetailView {...detail} />
    </Layout>
  );
}