import Link from "next/link";
import { isAdminIdentity } from "@/lib/auth/admin";
import { KontiaMark } from "@/components/app/kontia-mark";
import { getCurrentUser } from "@/lib/auth/user";
import { cn } from "@/lib/utils";

type PageShellProps = {
  children: React.ReactNode;
  title: string;
  description?: string;
  action?: React.ReactNode;
  className?: string;
};

const navLinks = [
  { href: "/dashboard", label: "Dashboard" },
  { href: "/diagnostic", label: "Diagnostico" },
  { href: "/dashboard#modulos", label: "Modulos" },
  { href: "/talleres-desarrollo", label: "Talleres" },
  { href: "/licitations", label: "Licitaciones" },
  { href: "/results", label: "Results" },
  { href: "/recommendations", label: "Recommendations" },
  { href: "/manual", label: "Manual" },
];

export async function PageShell({ children, title, description, action, className }: PageShellProps) {
  const currentUser = await getCurrentUser();
  const isAdmin = currentUser ? isAdminIdentity(currentUser.email, currentUser.role) : false;

  return (
    <div className="min-h-screen bg-[#eff2f7]">
      <header className="border-b border-[#d8dde7] bg-[#eff2f7]">
        <div className="mx-auto flex w-full max-w-[1200px] items-center justify-between gap-3 px-4 py-3 sm:px-6 lg:px-8">
          <Link href="/">
            <KontiaMark />
          </Link>

          <nav className="hidden items-center gap-5 md:flex">
            {currentUser ? (
              navLinks.map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  className="text-sm font-medium text-[#516180] transition-colors hover:text-[#223f7c]"
                >
                  {link.label}
                </Link>
              ))
            ) : (
              <>
                <Link href="/#metodologia" className="text-sm font-medium text-[#516180] transition-colors hover:text-[#223f7c]">
                  Metodologia
                </Link>
                <Link href="/#modulos" className="text-sm font-medium text-[#516180] transition-colors hover:text-[#223f7c]">
                  Modulos
                </Link>
                <Link href="/#beneficios" className="text-sm font-medium text-[#516180] transition-colors hover:text-[#223f7c]">
                  Beneficios
                </Link>
              </>
            )}
            {isAdmin && currentUser ? (
              <Link href="/admin" className="text-sm font-semibold text-[#1f3f82] transition-colors hover:text-[#17336c]">
                Admin
              </Link>
            ) : null}
          </nav>

          {currentUser ? (
            <div className="flex items-center gap-2">
              <p className="hidden text-xs font-semibold text-[#5f6c84] sm:block">{currentUser.email}</p>
              <form action="/api/auth/logout" method="post">
                <button
                  type="submit"
                  className="rounded-xl border border-[#ccd6e5] px-3 py-1.5 text-xs font-semibold text-[#334a73] transition-colors hover:bg-white"
                >
                  Logout
                </button>
              </form>
            </div>
          ) : (
            <div className="flex items-center gap-2 text-xs font-semibold text-[#5f6c84]">
              <Link href="/login" className="rounded-xl px-3 py-2 text-sm font-semibold text-[#13254a] transition-colors hover:text-[#214485]">
                Iniciar Sesion
              </Link>
              <Link
                href="/register"
                className="rounded-2xl bg-[#1f3f84] px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-[#17356f]"
              >
                Comenzar Gratis
              </Link>
            </div>
          )}
        </div>
      </header>

      <main className="mx-auto w-full max-w-[1200px] px-4 py-8 sm:px-6 lg:px-8">
        <section className="mb-6 flex flex-wrap items-end justify-between gap-3">
          <div>
            <h1 className="text-4xl font-semibold text-[#142447] [font-family:var(--font-display)] md:text-5xl">{title}</h1>
            {description ? <p className="mt-1 text-sm text-[#60718f]">{description}</p> : null}
          </div>
          {action ? <div>{action}</div> : null}
        </section>

        <section className={cn("space-y-4", className)}>{children}</section>
      </main>
    </div>
  );
}
