'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/stores/authStore';
import Spinner from '@/components/ui/Spinner';

export default function RootPage() {
  const router = useRouter();
  const { isAuthenticated } = useAuthStore();

  useEffect(() => {
    // Small delay to let hydration settle
    const timer = setTimeout(() => {
      if (isAuthenticated) {
        router.replace('/home');
      } else {
        router.replace('/login');
      }
    }, 300);
    return () => clearTimeout(timer);
  }, [isAuthenticated, router]);

  return (
    <div className="min-h-screen bg-dark flex items-center justify-center">
      <div className="flex flex-col items-center gap-6">
        {/* Logo */}
        <div className="flex items-center gap-3 animate-pulse">
          <div className="w-12 h-12 bg-primary rounded-xl flex items-center justify-center font-black text-xl text-white">
            C
          </div>
          <span className="text-3xl font-bold tracking-tight text-white">
            Cat <span className="text-primary">Tv</span>
          </span>
        </div>
        <Spinner size="lg" color="primary" />
      </div>
    </div>
  );
}