"use client";

import { useEffect, useState, type ReactNode } from "react";
import { usePathname, useRouter } from "next/navigation";
import Link from "next/link";
import { logout, me } from "@/lib/api";
import type { AuthUser } from "@/lib/types";

/**
 * Authenticated shell: gates on /auth/me, redirects to /login when the
 * session is missing, renders the brand header + logout, and wraps page
 * content. Used by every authenticated page.
 */
const NAV = [
  { href: "/clientes", label: "Clientes" },
  { href: "/servicios", label: "Propiedades" },
  { href: "/polizas", label: "Pólizas" },
  { href: "/estado-cuenta", label: "Estado de cuenta" },
];

export function AppShell({ children }: { children: ReactNode }) {
  const router = useRouter();
  const pathname = usePathname();
  const [user, setUser] = useState<AuthUser | null>(null);
  const [checking, setChecking] = useState(true);
  const [loggingOut, setLoggingOut] = useState(false);

  useEffect(() => {
    let alive = true;
    me()
      .then((u) => {
        if (alive) {
          setUser(u);
          setChecking(false);
        }
      })
      .catch(() => {
        router.replace("/login");
      });
    return () => {
      alive = false;
    };
  }, [router]);

  async function handleLogout() {
    setLoggingOut(true);
    try {
      await logout();
    } catch {
      /* ignore — we redirect regardless */
    }
    router.replace("/login");
  }

  if (checking) {
    return (
      <div
        style={{
          minHeight: "100vh",
          display: "grid",
          placeItems: "center",
          color: "var(--brand-700)",
        }}
      >
        <span className="spinner" aria-label="Cargando" />
      </div>
    );
  }

  return (
    <>
      <header className="appbar">
        <div className="appbar-inner">
          <Link href="/clientes" className="brand">
            <span className="brand-mark" aria-hidden>
              JC
            </span>
            <span className="brand-text">
              <span className="brand-name">Jorge Cuadros</span>
              <span className="brand-sub">& Asociados</span>
            </span>
          </Link>
          <nav className="appbar-nav" aria-label="Principal">
            {NAV.map((item) => {
              const active = pathname?.startsWith(item.href) ?? false;
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={`appbar-link${active ? " active" : ""}`}
                  aria-current={active ? "page" : undefined}
                >
                  {item.label}
                </Link>
              );
            })}
          </nav>
          <span className="appbar-spacer" />
          <div className="appbar-user">
            {user && (
              <span className="appbar-user-name">{user.name}</span>
            )}
            <button
              type="button"
              className="btn btn-ghost"
              onClick={handleLogout}
              disabled={loggingOut}
            >
              {loggingOut ? "Saliendo…" : "Cerrar sesión"}
            </button>
          </div>
        </div>
      </header>
      <main className="shell-main">{children}</main>
    </>
  );
}