"use client";
import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";

export default function AppShell({ pages, session, onSignIn, onSignOut, children }) {
  const [open, setOpen] = useState(false);
  const pathname = usePathname();

  return (
    <div className="app">
      <aside className={`side${open ? " open" : ""}`}>
        <div className="side-logo">
          <Image src="/assets/img/logo-alfa-blanco.png" alt="ALFA+" width={100} height={27} />
          <div className="sub">Analítica Comercial</div>
        </div>
        <nav className="nav">
          {pages.map((p) =>
            p.built ? (
              <Link
                key={p.href}
                href={p.href}
                className={`nav-item${pathname === p.href ? " active" : ""}`}
                style={{ textDecoration: "none" }}
                onClick={() => setOpen(false)}
              >
                <span className="ico">{p.ico}</span>
                {p.label}
              </Link>
            ) : (
              <div key={p.href} className="nav-item soon" title="Próximamente">
                <span className="ico">{p.ico}</span>
                {p.label}
                <span className="tag">Pronto</span>
              </div>
            )
          )}
        </nav>
        <div className="side-foot">
          Datos: Dynamics 365
          <br />
          En vivo
        </div>
      </aside>

      <div className={`backdrop${open ? " open" : ""}`} onClick={() => setOpen(false)} />

      <div className="main">
        <div className="topbar">
          <button className="hamburger" aria-label="Menú" onClick={() => setOpen((o) => !o)} type="button">
            ☰
          </button>
          <div className="ctrl" style={{ marginLeft: "auto" }}>
            {session?.email ? (
              <>
                {session.isAdmin && (
                  <Link href="/admin/metas" style={{ marginRight: 12, fontSize: 13, color: "var(--marca)" }}>
                    ⚙ Metas
                  </Link>
                )}
                <span style={{ marginRight: 12 }}>
                  {session.email} {session.isAdmin ? "(admin)" : ""}
                </span>
                <form action={onSignOut}>
                  <button type="submit" className="login-btn">
                    Cerrar sesión
                  </button>
                </form>
              </>
            ) : (
              <form action={onSignIn}>
                <button type="submit" className="login-btn">
                  Iniciar sesión
                </button>
              </form>
            )}
          </div>
        </div>
        <main className="content">{children}</main>
      </div>
    </div>
  );
}