'use client';

import { Suspense, useEffect } from 'react';
import { useParams, useSearchParams, useRouter } from 'next/navigation';
import { api } from '@/lib/api';

function QRRedirectContent() {
  const { slug } = useParams<{ slug: string }>();
  const searchParams = useSearchParams();
  const router = useRouter();
  const source = searchParams.get('source') || 'direct';

  useEffect(() => {
    if (!slug) return;

    api('/analytics/qr-scan', {
      method: 'POST',
      body: JSON.stringify({ slug, source }),
    }).catch(console.error);

    router.replace(`/category/${slug}?source=${source}`);
  }, [slug, source, router]);

  return (
    <div className="text-center">
      <div className="animate-spin h-8 w-8 border-4 border-blue-600 border-t-transparent rounded-full mx-auto mb-4" />
      <p className="text-gray-500">Redirecting to {slug}...</p>
    </div>
  );
}

export default function QRRedirectPage() {
  return (
    <div className="flex items-center justify-center min-h-[50vh]">
      <Suspense fallback={<div className="text-gray-500">Loading...</div>}>
        <QRRedirectContent />
      </Suspense>
    </div>
  );
}