import Link from "next/link";
import type { LucideIcon } from "lucide-react";

import { cn } from "@/lib/utils";

/**
 * One tile per main menu the user may use. `href` is the menu's first permitted submenu in sitemap order
 * (menus have no overview pages, so a tile never opens an invented page).
 */
export type LauncherTile = { title: string; description: string; icon: LucideIcon; href: string };

/**
 * Tile home / launcher (spec 03 §4): on the Dashboard above the panels, and the home of the desktop app.
 * Pass only the tiles the role may use; the grid reflows with no gaps. Each tile is one link. Hover changes
 * the border and background, not a shadow. `compact` shows icon and title only.
 */
export function Launcher({ tiles, compact = false, heading = "Go to", className }: { tiles: LauncherTile[]; compact?: boolean; heading?: string | null; className?: string }) {
  if (!tiles.length) return null;
  return (
    <nav aria-label={heading ?? "Main menus"} className={cn("@container space-y-3", className)}>
      {heading && !compact ? <h2 className="text-base font-semibold">{heading}</h2> : null}
      <ul className={cn("grid grid-cols-1 gap-3 @md:grid-cols-2 @3xl:grid-cols-3 @5xl:grid-cols-4", compact && "@xl:grid-cols-3 @3xl:grid-cols-4 @5xl:grid-cols-5")}>
        {tiles.map((t) => {
          const Icon = t.icon;
          return (
            <li key={t.title}>
              <Link
                href={t.href}
                className={cn(
                  "flex h-full min-h-11 rounded-md border border-[var(--color-border-panel)] bg-card outline-none transition-colors",
                  "hover:border-[var(--color-border-strong)] hover:bg-[var(--color-bg-hover)] active:bg-[var(--color-bg-surface-subtle)]",
                  "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                  compact ? "items-center gap-3 px-3 py-2.5" : "flex-col gap-2 p-4",
                )}
              >
                <Icon className={cn("shrink-0 text-primary", compact ? "size-5" : "size-6")} aria-hidden />
                <span className={cn("font-semibold text-foreground", compact ? "text-sm" : "text-base")}>{t.title}</span>
                {!compact ? <span className="line-clamp-2 text-sm text-[var(--color-fg-secondary)]">{t.description}</span> : null}
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}