import type { ComponentType, ReactNode } from "react";
import { cn } from "../utils/cn.js";

export interface AppShellNavItem {
  key: string;
  label: string;
  href: string;
  icon?: ReactNode;
  active?: boolean;
}

interface NavLinkRenderProps {
  href: string;
  className?: string;
  children: ReactNode;
}

export interface AppShellProps {
  /** e.g. "EDEN Core" — shown next to the logo and used as the img alt text. */
  appName: string;
  logoSrc?: string;
  navItems: AppShellNavItem[];
  userName?: string;
  userRole?: string;
  onLogout?: () => void;
  children: ReactNode;
  /**
   * Router-agnostic navigation: packages/ui doesn't depend on react-router.
   * Defaults to a plain `<a>` (full page reload); pass e.g.
   * `({ href, className, children }) => <Link to={href} className={className}>{children}</Link>`
   * from the consuming app to get client-side routing.
   */
  LinkComponent?: ComponentType<NavLinkRenderProps>;
}

function DefaultLink({ href, className, children }: NavLinkRenderProps) {
  return (
    <a href={href} className={className}>
      {children}
    </a>
  );
}

/**
 * Visually inspired by the DreamsERP theme's sidebar/topbar
 * (react/src/components/common-sidebar, common-header) — sidebar with
 * logo + dark active nav item, white topbar with a bordered bottom edge —
 * without importing any of the theme's Redux/routing code.
 */
export function AppShell({
  appName,
  logoSrc,
  navItems,
  userName,
  userRole,
  onLogout,
  children,
  LinkComponent = DefaultLink,
}: AppShellProps) {
  return (
    <div className="flex min-h-screen bg-light">
      <aside className="hidden w-sidebar shrink-0 flex-col border-r border-border-color bg-white lg:flex">
        <div className="flex h-topbar items-center gap-2 border-b border-border-color px-4">
          {logoSrc ? <img src={logoSrc} alt={appName} className="h-7 w-auto" /> : null}
          <span className="text-sm font-bold text-title">{appName}</span>
        </div>
        <nav className="flex flex-1 flex-col gap-1 overflow-y-auto p-3" aria-label="Navegação principal">
          {navItems.map((item) => (
            <LinkComponent
              key={item.key}
              href={item.href}
              className={cn(
                "flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150",
                item.active
                  ? "bg-dark text-white"
                  : "text-gray-900 hover:bg-light-700 hover:text-primary",
              )}
            >
              {item.icon}
              <span>{item.label}</span>
            </LinkComponent>
          ))}
        </nav>
      </aside>

      <div className="flex min-w-0 flex-1 flex-col">
        <header className="flex h-topbar items-center justify-between gap-3 border-b border-border-color bg-white px-4">
          <div className="flex items-center gap-2 lg:hidden">
            {logoSrc ? <img src={logoSrc} alt={appName} className="h-6 w-auto" /> : null}
            <span className="text-sm font-bold text-title">{appName}</span>
          </div>
          <div className="ms-auto flex items-center gap-3">
            {userName ? (
              <div className="flex items-center gap-2 rounded-md border border-border-color px-2 py-1">
                <span className="flex size-7 items-center justify-center rounded-full bg-dark text-xs font-semibold text-white">
                  {userName.charAt(0).toUpperCase()}
                </span>
                <div className="hidden text-left leading-tight sm:block">
                  <p className="text-xs font-semibold text-title">{userName}</p>
                  {userRole ? <p className="text-[11px] text-default">{userRole}</p> : null}
                </div>
              </div>
            ) : null}
            {onLogout ? (
              <button
                type="button"
                onClick={onLogout}
                className="rounded-md border border-border-color px-3 py-1.5 text-xs font-semibold text-default hover:bg-light hover:text-danger"
              >
                Sair
              </button>
            ) : null}
          </div>
        </header>

        <main className="flex-1 p-6">{children}</main>
      </div>
    </div>
  );
}