"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { Sidebar } from "@/components/layout/Sidebar";
import { Header } from "@/components/layout/Header";
import { useAuthStore } from "@/store/authStore";
import { tokenManager } from "@/lib/api";

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const { isAuthenticated, fetchMe } = useAuthStore();

  useEffect(() => {
    const token = tokenManager.getAccess();
    if (!token) {
      router.replace("/giris");
      return;
    }
    if (!isAuthenticated) {
      fetchMe().catch(() => router.replace("/giris"));
    }
  }, [isAuthenticated, fetchMe, router]);

  if (!isAuthenticated) {
    return (
      <div className="h-screen flex items-center justify-center bg-[#0f0f10]">
        <div className="flex flex-col items-center gap-4">
          <div className="text-3xl">🐯</div>
          <div className="w-6 h-6 border-2 border-brand-500 border-t-transparent rounded-full animate-spin" />
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-screen overflow-hidden bg-[#0f0f10]">
      <Sidebar />
      <div className="flex flex-col flex-1 min-w-0 overflow-hidden">
        <Header />
        <main className="flex-1 overflow-y-auto px-6 py-6">
          {children}
        </main>
      </div>
    </div>
  );
}