import { useRouter } from 'next/router';
import Layout from '../../components/Layout';
import CardDetailView from '../../components/CardDetailView';
import { useAuth } from '../../lib/use-auth';
import { useCardDetail } from '../../lib/use-card-detail.js';

export default function CardDetail() {
  const router = useRouter();
  const { user, loading: authLoading } = useAuth();
  const detail = useCardDetail({ user, authLoading });

  if (detail.loading) {
    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(--text-accent-light)' }} />
        </div>
      </Layout>
    );
  }

  if (!detail.card) {
    return (
      <Layout user={user}>
        <div className="flex items-center justify-center min-h-screen">
          <div className="text-center">
            <div className="text-6xl mb-4">🃏</div>
            <h2 className="text-xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
              Card Not Found
            </h2>
            <p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
              The card you&apos;re looking for doesn&apos;t exist.
            </p>
            <button
              type="button"
              onClick={() => router.push('/cards')}
              className="px-6 py-3 rounded-xl font-medium gradient-bg-ember text-white hover:shadow-lg transition-all duration-200"
            >
              Back to Cards
            </button>
          </div>
        </div>
      </Layout>
    );
  }

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