'use client';

import { useRouter, usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function NotFound() {
  const router = useRouter();
  const pathname = usePathname();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const validRoutes = ['/', '/demo', '/gallery', '/img2img', '/inpainting', '/settings', '/text2img', '/upscaler'];
    if (validRoutes.includes(pathname)) {
      router.push(pathname);
    } else {
      setLoading(false);
    }
  }, [pathname, router]);

  if (loading) {
    return <div>Loading...</div>;
  }

  return <div>404 - Page not found</div>;
}