"use client";

import { ReactNode, useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useAuth } from "@/lib/auth/auth-context";
import { Button } from "@/components/ui/button";

export default function AppLayout({ children }: { children: ReactNode }) {
  const router = useRouter();
  const { user, isLoading, logout } = useAuth();

  useEffect(() => {
    if (!isLoading && !user) {
      router.replace("/login");
    }
  }, [isLoading, user, router]);

  if (isLoading || !user) {
    return null;
  }

  return (
    <div className="flex min-h-screen flex-col">
      <header className="flex items-center justify-between border-b px-4 py-3">
        <nav className="flex items-center gap-4">
          <span className="font-semibold">ApiCore</span>
          <Link className="text-sm text-muted-foreground hover:text-foreground" href="/apiaries">
            Bienenstände
          </Link>
          <Link className="text-sm text-muted-foreground hover:text-foreground" href="/colonies">
            Völker
          </Link>
          <Link className="text-sm text-muted-foreground hover:text-foreground" href="/queens">
            Königinnen
          </Link>
          <Link className="text-sm text-muted-foreground hover:text-foreground" href="/tasks">
            Aufgaben
          </Link>
          <Link
            className="text-sm text-muted-foreground hover:text-foreground"
            href="/honey-batches"
          >
            Honigchargen
          </Link>
          {user.role === "ADMIN" ? (
            <Link
              className="text-sm text-muted-foreground hover:text-foreground"
              href="/settings/users"
            >
              Benutzer
            </Link>
          ) : null}
        </nav>
        <div className="flex items-center gap-3 text-sm">
          <span className="text-muted-foreground">{user.email}</span>
          <Button
            variant="outline"
            size="sm"
            onClick={() => {
              void logout().then(() => router.push("/login"));
            }}
          >
            Abmelden
          </Button>
        </div>
      </header>
      <div className="flex-1">{children}</div>
    </div>
  );
}