"use client";

import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useSession } from "../lib/session";

interface SamShellProps {
  title: string;
  subtitle?: string;
  icon?: string;
  activeHref?: string;
  children: React.ReactNode;
}

// Plantilla estilo sam-portal: sidebar colapsable 78px <-> 250px,
// iconos boxicons, hero con degradado y perfil con salida.
export default function SamShell({ title, subtitle, icon = "bx-layer", activeHref, children }: SamShellProps) {
  const [open, setOpen] = useState(true);
  const { user, loading, logout } = useSession();
  const router = useRouter();

  const menu = [
    { href: "/", label: "Mis cursos", icon: "bx-home" },
    { href: "/rendir", label: "Rendir", icon: "bx-pencil" },
    { href: "/resultados", label: "Mis resultados", icon: "bx-bar-chart-alt-2" }
  ];

  const salir = async () => {
    await logout();
    router.push("/login");
  };

  return (
    <div className={`sam-shell${open ? " open" : ""}`}>
      <div className="sam-sidebar">
        <div className="logo-details">
          <span className="logo_name">
            <Image src="/favicon.png" alt="SAM" width={28} height={28} />
            <span className="brand-text">Pruebas</span>
          </span>
          <i
            className={`bx ${open ? "bx-menu-alt-right" : "bx-menu"}`}
            id="btn"
            onClick={() => setOpen(!open)}
            role="button"
            aria-label="Alternar menú"
          />
        </div>
        <ul className="nav-list">
          {menu.map((item) => (
            <li key={item.href}>
              <Link href={item.href} className={activeHref === item.href ? "active" : ""}>
                <i className={`bx ${item.icon}`} />
                <span className="links_name">{item.label}</span>
              </Link>
              <span className="tooltip">{item.label}</span>
            </li>
          ))}
        </ul>
        <div className="profile">
          <div className="profile-details">
            <i className="bx bx-user-circle" />
            <div className="name_job">
              <div className="name">{loading ? "…" : user ? `${user.nombres} ${user.apPaterno}` : "Invitado"}</div>
              <div className="job">{user ? user.email : "SAM Pruebas"}</div>
            </div>
            {user && (
              <i
                className="bx bx-log-out ms-auto"
                role="button"
                title="Cerrar sesión"
                onClick={salir}
                style={{ fontSize: "1.4rem", cursor: "pointer" }}
              />
            )}
          </div>
        </div>
      </div>

      <section className="home-section">
        <div className="container-fluid">
          <div className="row sam-toolbar sam-hero align-items-center mb-3">
            <div className="col-md-7">
              <div className="sam-hero-main">
                <span className="sam-hero-icon">
                  <i className={`bx ${icon}`} />
                </span>
                <div className="min-w-0">
                  <span className="sam-eyebrow">SAM Pruebas · ICHN</span>
                  <h5 className="mb-0 fw-bold">{title}</h5>
                  {subtitle && <small className="sam-hero-sub">{subtitle}</small>}
                </div>
              </div>
            </div>
            <div className="col-md-5 text-end">
              {user && (
                <div className="sam-hero-side">
                  <span>
                    <i className="bx bx-user me-1" />
                    {user.nombres} {user.apPaterno}
                  </span>
                </div>
              )}
            </div>
          </div>
          {children}
        </div>
      </section>
    </div>
  );
}