"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useId, useRef, useState, type ReactNode } from "react";
import { ROL_ETIQUETA, type Rol } from "@/lib/crm/constantes";
import { AVISO_DEMO } from "@/data/empresa";
import { accionCerrarSesion } from "@/lib/crm/acciones";

/**
 * Cascarón del panel: barra lateral fija en escritorio, cajón deslizable en
 * móvil. Es lo único de cliente del layout —necesita `usePathname` para marcar
 * la sección activa y estado para el cajón—; el contenido llega ya renderizado
 * desde el servidor.
 *
 * El panel no monta el widget de WhatsApp del sitio público: aquí adentro el
 * usuario ya es de la casa.
 */

type Enlace = { href: string; label: string; soloAdmin?: boolean };

const ENLACES: Enlace[] = [
  { href: "/admin", label: "Tablero" },
  { href: "/admin/oportunidades", label: "Oportunidades" },
  { href: "/admin/contactos", label: "Contactos" },
  { href: "/admin/pedidos", label: "Pedidos" },
  { href: "/admin/analitica", label: "Analítica" },
  { href: "/admin/equipo", label: "Equipo", soloAdmin: true },
  { href: "/admin/reglas", label: "Reglas", soloAdmin: true },
];

function esActivo(pathname: string, href: string): boolean {
  if (href === "/admin") return pathname === "/admin";
  return pathname === href || pathname.startsWith(`${href}/`);
}

export function Cascaron({
  nombre,
  rol,
  children,
}: {
  nombre: string;
  rol: Rol;
  children: ReactNode;
}) {
  const pathname = usePathname();
  const [abierto, setAbierto] = useState(false);
  const cajonId = useId();
  const botonRef = useRef<HTMLButtonElement>(null);

  const enlaces = ENLACES.filter((e) => !e.soloAdmin || rol === "ADMIN");

  // El cajón se cierra al navegar: en móvil nadie quiere cerrarlo a mano.
  useEffect(() => {
    setAbierto(false);
  }, [pathname]);

  useEffect(() => {
    if (!abierto) return;
    function alTecla(e: KeyboardEvent) {
      if (e.key === "Escape") {
        setAbierto(false);
        botonRef.current?.focus();
      }
    }
    document.addEventListener("keydown", alTecla);
    return () => document.removeEventListener("keydown", alTecla);
  }, [abierto]);

  return (
    <div className="min-h-screen bg-ink text-bright" style={{ minHeight: "100dvh" }}>
      <a href="#panel" className="skip">
        Ir al contenido del panel
      </a>

      {/* ---------- barra lateral, escritorio ---------- */}
      <aside className="fixed inset-y-0 left-0 z-30 hidden w-60 flex-col border-r border-rule bg-ink-2 lg:flex">
        <Marca />
        <Navegacion enlaces={enlaces} pathname={pathname} />
        <PieLateral rol={rol} />
      </aside>

      {/* ---------- cajón, móvil ---------- */}
      <div
        aria-hidden={!abierto}
        className={[
          "fixed inset-0 z-40 lg:hidden",
          abierto ? "pointer-events-auto" : "pointer-events-none",
        ].join(" ")}
      >
        <button
          type="button"
          tabIndex={abierto ? 0 : -1}
          aria-label="Cerrar la navegación"
          onClick={() => setAbierto(false)}
          className={[
            "absolute inset-0 bg-ink/80 transition-opacity duration-200",
            abierto ? "opacity-100" : "opacity-0",
          ].join(" ")}
          style={{
            backdropFilter: "blur(3px)",
            WebkitBackdropFilter: "blur(3px)",
            WebkitTapHighlightColor: "transparent",
            appearance: "none",
          }}
        />
        <nav
          id={cajonId}
          aria-label="Navegación del panel"
          className={[
            "absolute inset-y-0 left-0 flex h-screen w-[17rem] max-w-[85vw] flex-col border-r border-rule bg-ink-2 transition-transform duration-200 ease-out",
            abierto ? "translate-x-0" : "-translate-x-full",
          ].join(" ")}
          style={{ height: "100dvh" }}
        >
          <Marca />
          <Navegacion enlaces={enlaces} pathname={pathname} tabbable={abierto} />
          <PieLateral rol={rol} />
        </nav>
      </div>

      {/* ---------- columna de contenido ---------- */}
      <div className="flex min-w-0 flex-col lg:pl-60">
        <FranjaDemo />

        <header
          className="sticky top-0 z-20 flex min-w-0 items-center gap-3 border-b border-rule bg-ink-2/95 px-4 py-2.5 sm:px-6"
          style={{ backdropFilter: "blur(6px)", WebkitBackdropFilter: "blur(6px)" }}
        >
          <button
            ref={botonRef}
            type="button"
            onClick={() => setAbierto((v) => !v)}
            aria-expanded={abierto}
            aria-controls={cajonId}
            className="btn btn-ghost btn-sm shrink-0 lg:hidden"
            style={{ WebkitTapHighlightColor: "transparent", appearance: "none" }}
          >
            <span aria-hidden="true" className="block">
              <svg width="14" height="12" viewBox="0 0 14 12" fill="none" aria-hidden="true">
                <path d="M0 1h14M0 6h14M0 11h14" stroke="currentColor" strokeWidth="1.5" />
              </svg>
            </span>
            Menú
          </button>

          <p className="min-w-0 truncate font-mono text-[0.6875rem] uppercase tracking-[0.14em] text-faint">
            Panel comercial
          </p>

          <div className="ml-auto flex min-w-0 items-center gap-2 sm:gap-3">
            <span className="hidden min-w-0 truncate text-sm text-bright sm:block">{nombre}</span>
            <span className={rol === "ADMIN" ? "badge badge-signal" : "badge"}>
              {ROL_ETIQUETA[rol]}
            </span>
            <BotonSalir />
          </div>
        </header>

        <main id="panel" className="min-w-0 flex-1 px-4 py-6 sm:px-6 sm:py-8">
          {children}
        </main>
      </div>
    </div>
  );
}

function Marca() {
  return (
    <div className="flex items-center gap-3 border-b border-rule px-4 py-4">
      <Image
        src="/media/marca/fspm-logo-blanco.png"
        alt="Fire Service Plus México"
        width={120}
        height={32}
        priority
        className="h-7 w-auto"
      />
      <span className="font-mono text-[0.5625rem] uppercase tracking-[0.16em] text-faint">
        CRM
      </span>
    </div>
  );
}

function Navegacion({
  enlaces,
  pathname,
  tabbable = true,
}: {
  enlaces: Enlace[];
  pathname: string;
  tabbable?: boolean;
}) {
  return (
    <ul className="flex-1 overflow-y-auto py-3" style={{ WebkitOverflowScrolling: "touch" }}>
      {enlaces.map((e) => {
        const activo = esActivo(pathname, e.href);
        return (
          <li key={e.href}>
            <Link
              href={e.href}
              tabIndex={tabbable ? undefined : -1}
              aria-current={activo ? "page" : undefined}
              className={[
                "flex items-center gap-3 border-l-2 px-4 py-2.5 font-mono text-[0.75rem] uppercase tracking-[0.1em] transition-colors",
                activo
                  ? "border-signal bg-ink-3 text-bright"
                  : "border-transparent text-muted hover:bg-ink-3/60 hover:text-bright",
              ].join(" ")}
              style={{ WebkitTapHighlightColor: "transparent" }}
            >
              {e.label}
            </Link>
          </li>
        );
      })}
    </ul>
  );
}

function PieLateral({ rol }: { rol: Rol }) {
  return (
    <div className="border-t border-rule px-4 py-3">
      <p className="font-mono text-[0.5625rem] uppercase leading-relaxed tracking-[0.12em] text-faint">
        {rol === "ADMIN"
          ? "Alcance: toda la operación"
          : "Alcance: solo lo asignado a ti"}
      </p>
    </div>
  );
}

function FranjaDemo() {
  return (
    <div className="flex items-start gap-2.5 border-b border-rule bg-ink-3 px-4 py-2 sm:px-6">
      <span aria-hidden="true" className="mt-1 block h-2.5 w-2.5 shrink-0 hazard rounded-[1px]" />
      <p className="min-w-0 font-mono text-[0.625rem] uppercase leading-relaxed tracking-[0.1em] text-muted">
        Entorno de demostración · {AVISO_DEMO}
      </p>
    </div>
  );
}

function BotonSalir() {
  const [saliendo, setSaliendo] = useState(false);

  async function salir() {
    setSaliendo(true);
    try {
      await accionCerrarSesion();
    } finally {
      setSaliendo(false);
    }
  }

  return (
    <form action={salir}>
      <button
        type="submit"
        disabled={saliendo}
        className="btn btn-ghost btn-sm"
        style={{ WebkitTapHighlightColor: "transparent", appearance: "none" }}
      >
        {saliendo ? "Saliendo…" : "Salir"}
      </button>
    </form>
  );
}