'use client'; 

import AdminSidebar from '@/components/layout/AdminSidebar';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Loader2, ShieldOff } from 'lucide-react';
import { useCurrentLocale, useI18n } from '@/locales/client';
import { Button } from '@/components/ui/button';
import Link from 'next/link';

const ADMIN_EMAIL = 'user@example.com'; // Or 'admin@example.com' if you updated login

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const router = useRouter();
  const locale = useCurrentLocale();
  const t = useI18n();
  const [isAuthenticating, setIsAuthenticating] = useState(true);
  const [isAuthorized, setIsAuthorized] = useState(false);

  useEffect(() => {
    const isAuthenticated = localStorage.getItem('isToyShareAuthenticated') === 'true';
    const userEmail = localStorage.getItem('userEmail');
    
    if (!isAuthenticated) {
      router.replace(`/${locale}/login?redirect=/${locale}/admin`); 
    } else if (userEmail !== ADMIN_EMAIL && userEmail !== 'admin@example.com') { // Allow both for flexibility
      setIsAuthorized(false);
      setIsAuthenticating(false);
    } else {
      setIsAuthorized(true);
      setIsAuthenticating(false);
    }
  }, [router, locale]);

  if (isAuthenticating) {
    return (
      <div className="flex justify-center items-center h-screen bg-background">
        <Loader2 className="h-12 w-12 animate-spin text-primary" />
        <p className="ml-4 text-lg text-muted-foreground">{t('admin.layout.loading')}</p>
      </div>
    );
  }

  if (!isAuthorized) {
    return (
      <div className="flex flex-col justify-center items-center h-screen bg-background text-center p-4">
        <ShieldOff className="h-24 w-24 text-destructive mb-6" />
        <h1 className="text-3xl font-bold text-destructive mb-3">{t('admin.layout.unauthorized_title')}</h1>
        <p className="text-muted-foreground mb-8 max-w-md">{t('admin.layout.unauthorized_description')}</p>
        <Link href={`/${locale}/`} passHref>
          <Button variant="outline" size="lg">
            {t('admin.layout.back_to_home_button')}
          </Button>
        </Link>
      </div>
    );
  }

  return (
    <div className="flex min-h-[calc(100vh-4rem)]"> {/* Assuming header height is 4rem */}
      <AdminSidebar />
      <main className="flex-1 p-6 lg:p-8 bg-muted/30 overflow-auto">
        {children}
      </main>
    </div>
  );
}