"use client";

import { Info } from "lucide-react";

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";

import type { AssetClassFilterOption } from "../lib/asset-class-filter-catalog";

/** Info icon listing modules (and type refine) for a Macro/Bridge group. */
export function AssetClassGroupHover({
  option,
  side = "top",
}: {
  option: AssetClassFilterOption;
  side?: "top" | "right" | "bottom" | "left";
}) {
  const showUnderliers =
    option.underliers.length > 0 &&
    !(option.underliers.length === 1 && option.underliers[0] === option.label);
  const refine = [...option.assetTypes, ...option.productTypes];
  if (!showUnderliers && refine.length === 0) return null;

  return (
    <HoverCard openDelay={120} closeDelay={80}>
      <HoverCardTrigger asChild>
        <span
          role="button"
          tabIndex={0}
          className="inline-flex size-5 shrink-0 cursor-default items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          aria-label={`${option.label} includes ${[...option.underliers, ...refine].join(", ")}`}
          onClick={(event) => {
            event.preventDefault();
            event.stopPropagation();
          }}
          onPointerDown={(event) => event.stopPropagation()}
        >
          <Info className="size-3.5" aria-hidden />
        </span>
      </HoverCardTrigger>
      <HoverCardContent side={side} className="w-52 p-3">
        <p className="mb-1.5 font-semibold text-xs">{option.label}</p>
        {showUnderliers ? (
          <ul className="space-y-0.5 text-muted-foreground text-xs">
            {option.underliers.map((underlier) => (
              <li key={underlier}>{underlier}</li>
            ))}
          </ul>
        ) : null}
        {refine.length > 0 ? (
          <>
            <p className={`${showUnderliers ? "mt-2" : ""} mb-1 font-semibold text-xs`}>
              Refined by type
            </p>
            <ul className="space-y-0.5 text-muted-foreground text-xs">
              {refine.map((type) => (
                <li key={type}>{type}</li>
              ))}
            </ul>
          </>
        ) : null}
      </HoverCardContent>
    </HoverCard>
  );
}