"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
import { LocalModeBanner } from "@/components/local-mode-banner";
import { PageTransition } from "@/components/page-transition";
import { useCurrentUser, useLogout, useSystemStatus } from "@/hooks/use-auth";
import { isLocalConvenience } from "@/lib/auth";

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const { data: systemStatus } = useSystemStatus();
  const { data: user, isLoading, isError } = useCurrentUser();
  const logout = useLogout();

  const requiresLogin = systemStatus ? !isLocalConvenience(systemStatus) : false;

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

  if (requiresLogin && (isLoading || isError)) {
    return (
      <div className="flex min-h-screen items-center justify-center text-sm text-slate-500">
        Loading…
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-slate-50">
      <LocalModeBanner />
      <header className="border-b border-slate-200 bg-white">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-3">
          <Link href="/dashboard" className="text-lg font-semibold tracking-tight text-slate-900">
            CI&nbsp;Agent
          </Link>
          <nav className="flex items-center gap-4 text-sm">
            <Link href="/dashboard" className="text-slate-600 hover:text-slate-900">
              Dashboard
            </Link>
            <Link href="/companies" className="text-slate-600 hover:text-slate-900">
              Companies
            </Link>
            <Link href="/alerts" className="text-slate-600 hover:text-slate-900">
              Alerts
            </Link>
            <Link href="/settings" className="text-slate-600 hover:text-slate-900">
              Settings
            </Link>
            {user && (
              <span className="ml-2 flex items-center gap-3 border-l border-slate-200 pl-4">
                <span className="text-slate-500">{user.display_name}</span>
                {requiresLogin && (
                  <button
                    onClick={() => logout.mutate()}
                    className="focus-ring rounded-md px-2 py-1 font-medium text-slate-600 hover:bg-slate-100"
                  >
                    Sign out
                  </button>
                )}
              </span>
            )}
          </nav>
        </div>
      </header>
      <div className="mx-auto max-w-6xl px-6 py-8">
        <PageTransition>{children}</PageTransition>
      </div>
    </div>
  );
}