office_translator/frontend/src/app/admin/layout.tsx

"use client";

import { useEffect, useState, useCallback } from "react";
import { useRouter, usePathname } from "next/navigation";
import { useTranslationStore } from "@/lib/store";
import { API_BASE } from "@/lib/config";
import { AdminSidebar } from "./AdminSidebar";
import { AdminHeader } from "./AdminHeader";
import { useI18n } from "@/lib/i18n";

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const router = useRouter();
  const pathname = usePathname();
  const { settings, setAdminToken } = useTranslationStore();
  const { t } = useI18n();
  const [isChecking, setIsChecking] = useState(true);
  const [isValid, setIsValid] = useState(false);
  const [persistHydrated, setPersistHydrated] = useState(false);
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
    const unsub = useTranslationStore.persist.onFinishHydration(() => {
      setPersistHydrated(true);
    });
    if (useTranslationStore.persist.hasHydrated()) {
      setPersistHydrated(true);
    }
    return unsub;
  }, []);

  if (!isMounted) {
    return null;
  }

  const verifyToken = useCallback(async (token: string): Promise<boolean> => {
    try {
      const response = await fetch(`${API_BASE}/api/v1/admin/verify`, {
        method: "GET",
        headers: {
          "Authorization": `Bearer ${token}`,
        },
      });
      return response.ok;
    } catch {
      return false;
    }
  }, []);

  useEffect(() => {
    if (pathname === "/admin/login") {
      setIsChecking(false);
      setIsValid(true);
      return;
    }

    if (!persistHydrated) {
      return;
    }

    const adminToken = settings.adminToken;
    if (!adminToken) {
      router.push(`/admin/login?redirect=${encodeURIComponent(pathname)}`);
      return;
    }

    verifyToken(adminToken).then((valid) => {
      if (!valid) {
        setAdminToken(undefined);
        router.push(`/admin/login?redirect=${encodeURIComponent(pathname)}`);
        return;
      }
      setIsValid(true);
      setIsChecking(false);
    });
  }, [settings.adminToken, pathname, router, verifyToken, setAdminToken, persistHydrated]);

  if (isChecking && pathname !== "/admin/login") {
    return (
      <div className="min-h-screen bg-card flex items-center justify-center">
        <div className="text-muted-foreground text-sm">{t('admin.layout.checking')}</div>
      </div>
    );
  }

  if (!isValid && pathname !== "/admin/login") {
    return null;
  }

  if (pathname === "/admin/login") {
    return <>{children}</>;
  }

  return (
    <div className="flex min-h-screen bg-background">
      <AdminSidebar />
      <div className="flex flex-1 flex-col">
        <AdminHeader />
        <main className="flex-1 p-4 lg:p-6">
          {children}
        </main>
      </div>
    </div>
  );
}