'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import OnboardingWizard from '@/components/onboarding/OnboardingWizard';
import { Loader2 } from 'lucide-react';

// TODO: Re-enable API integration once backend is ready
// import { redirect } from 'next/navigation';

export default function OnboardingPage() {
  const router = useRouter();
  const [checking, setChecking] = useState(true);

  useEffect(() => {
    // TODO: Re-enable auth check once backend is ready
    // For now, just show onboarding after a brief check
    const checkDemoMode = () => {
      // Check if user has demo mode cookie
      const cookies = document.cookie.split(';');
      const demoModeCookie = cookies.find(c => c.trim().startsWith('gridpilot_demo_mode='));
      
      if (!demoModeCookie) {
        // Not logged in, redirect to auth
        router.push('/auth/login?returnTo=/onboarding');
        return;
      }
      
      // For demo, skip onboarding and go to dashboard
      // In production, this would check if onboarding is complete
      router.push('/dashboard');
    };

    // Brief delay to prevent flash
    const timer = setTimeout(() => {
      checkDemoMode();
    }, 500);

    return () => clearTimeout(timer);
  }, [router]);

  // Show loading while checking
  if (checking) {
    return (
      <main className="min-h-screen bg-deep-graphite flex items-center justify-center">
        <Loader2 className="w-8 h-8 text-primary-blue animate-spin" />
      </main>
    );
  }

  return (
    <main className="min-h-screen bg-deep-graphite">
      <OnboardingWizard />
    </main>
  );
}