'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/lib/hooks';
import Link from 'next/link';

export default function AuthLayout({ children }: { children: React.ReactNode }) {
    const router = useRouter();
    const { isAuthenticated, isLoading } = useAuth();

    useEffect(() => {
        if (!isLoading && isAuthenticated) {
            router.push('/admin/dashboard');
        }
    }, [isAuthenticated, isLoading, router]);

    if (isLoading) {
        return (
            <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-orange-50 to-orange-100">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand"></div>
            </div>
        );
    }

    if (isAuthenticated) {
        return null;
    }

    return (
        <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-orange-50 to-orange-100 py-12 px-4 sm:px-6 lg:px-8">
            <div className="max-w-md w-full space-y-8">
                <div className="text-center">
                    <div className="flex justify-center mb-6">
                        <div className="bg-white p-4 rounded-full shadow-lg">
                            <div className="w-20 h-20 bg-brand rounded-full flex items-center justify-center">
                                <span className="text-white text-3xl font-bold">A</span>
                            </div>
                        </div>
                    </div>
                    <h2 className="text-3xl font-bold text-main">Admin Login</h2>
                    <p className="mt-2 text-sec">Sign in to access your dashboard</p>
                </div>

                <div className="bg-white rounded-2xl shadow-xl p-8">
                    {children}

                    <div className="mt-6 text-center">
                        <Link href="/" className="text-sm text-sec hover:text-brand transition-colors">
                            ← Back to Home
                        </Link>
                    </div>
                </div>

                <p className="text-center text-sm text-sec">© 2024 All rights reserved</p>
            </div>
        </div>
    );
}