import { AppSidebar } from "./sidebar";
import { Github } from "lucide-react";
import { useEffect, useState } from "react";
import { APP_INFO_EVENT, getAppInfo, type AppInfo } from "@/lib/app-info";

export function AppLayout({ children }: { children: React.ReactNode }) {
  const [info, setInfo] = useState<AppInfo>(() => getAppInfo());

  useEffect(() => {
    const handleUpdate = () => setInfo(getAppInfo());
    window.addEventListener(APP_INFO_EVENT, handleUpdate);
    return () => window.removeEventListener(APP_INFO_EVENT, handleUpdate);
  }, []);

  return (
    <div className="flex h-screen w-full bg-background overflow-hidden">
      <AppSidebar />
      <main className="flex-1 flex flex-col min-w-0 overflow-y-auto">
        <div className="flex-1 p-8 container mx-auto max-w-7xl">
          {children}
        </div>
        <footer className="shrink-0 border-t px-8 py-3 flex items-center justify-between text-xs text-muted-foreground">
          <a
            href={info.repoUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-1.5 hover:text-foreground transition-colors"
          >
            <Github className="h-3.5 w-3.5" />
            Repo GitHub
          </a>
          <span>Déployé le {info.deployDate}</span>
        </footer>
      </main>
    </div>
  );
}