"use client";

import { Separator } from "@/components/ui/separator";
import { SidebarTrigger } from "@/components/ui/sidebar";
import useAxios from "@/hooks/useAxios";
import { Academy } from "@/types/types";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";


interface AcademyResponse {
  academy: Academy;
}

export function SiteHeader() {
  const { request, loading, error } = useAxios();
  const [academy, setAcademy] = useState<Academy | null>(null);
  const router = useRouter()

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await request("GET", `/academy`) as AcademyResponse;
        setAcademy(response?.academy);
        console.log(response);
      } catch (error) {
        console.error("خطا در دریافت اطلاعات:", error);
      }
    };
  
    fetchData();
  }, []);
  
  // بعد از لود شدن کامل و موجود بودن academy
  useEffect(() => {
    // اگه دیتا هنوز لود نشده، کاری نکن
    if (!academy) return;
  
    // چک کن که آیا فیلدهای ضروری پر نشده‌اند
    const isProfileIncomplete = 
      !academy.academy_name || 
      !academy.academy_image || 
      !academy.sheba;
  
    if (isProfileIncomplete) {
      router.push("/settings/academy/storeProfile");
    }
  }, [academy, router]);

  return (
    <header
      className="sticky top-0 flex h-20 shrink-0 items-center  gap-2 
      border-b transition-[width,height] ease-linear 
      backdrop-blur-3xl bg-white/50 z-[49] dark:bg-neutral-950/50"
    >
      <div className="flex w-full items-center justify-between gap-1 px-4 lg:gap-2 lg:px-6">
        <div className="flex items-center">
          <SidebarTrigger className="-ml-1" />
          <Separator
            orientation="vertical"
            className="mx-2 data-[orientation=vertical]:h-4"
          />
          <h1 className="text-base font-medium text-foreground">
            {academy?.academy_name || "پنل آکادمی"}
          </h1>
        </div>
      </div>
    </header>
  );
}
