"use client";

import { AdminSidebar } from "@/components/AdminSidebar";
import { useEffect, useState } from "react";
import type { ReactNode } from "react";

export default function AdminLayout({ children }: { children: ReactNode }) {
  const [logoUrl, setLogoUrl] = useState("");

  useEffect(() => {
    fetch("/api/settings")
      .then(res => res.json())
      .then(json => {
        if (json.success && json.data.logo_url) {
          setLogoUrl(json.data.logo_url);
        }
      });
  }, []);

  return (
    <div className="flex h-screen bg-slate-50 overflow-hidden font-sans text-[#044f54]">
      <AdminSidebar />
      <div className="flex-1 overflow-auto flex flex-col relative">
        {/* Scanline overlay for main area */}
        <div className="absolute inset-0 pointer-events-none bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(4,79,84,0.01) 2px,rgba(4,79,84,0.01) 4px)] z-[100]"></div>

        <header className="bg-white border-b border-[#044f54]/10 h-16 flex items-center px-8 shrink-0 relative z-10">
          {logoUrl && (
            <img src={logoUrl} alt="Logo" className="h-8 w-auto object-contain" />
          )}
        </header>

        <main className="flex-1 p-8 overflow-auto relative z-10">
          <div className="max-w-7xl mx-auto h-full">
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}