"use client";

import { memo, useCallback } from "react";
import { motion, useReducedMotion } from "motion/react";

import { cn } from "@turbostarter/ui";
import { Icons } from "@turbostarter/ui-web/icons";

import { useGraphStore } from "~/modules/diagram/stores/useGraphStore";

interface BadgeChipProps {
  nodeId: string;
  label: string;
  nodeType: string;
  onDismiss: (nodeId: string) => void;
}

export const BadgeChip = memo<BadgeChipProps>(
  ({ nodeId, label, nodeType, onDismiss }) => {
    const prefersReducedMotion = useReducedMotion();

    const handleClick = useCallback(() => {
      // Highlight the node on canvas via Zustand store
      useGraphStore.getState().setHighlightedNodeId(nodeId);
    }, [nodeId]);

    const handleDismiss = useCallback(
      (e: React.MouseEvent) => {
        e.stopPropagation();
        onDismiss(nodeId);
      },
      [nodeId, onDismiss],
    );

    const handleKeyDown = useCallback(
      (e: React.KeyboardEvent) => {
        if (e.key === "Backspace" || e.key === "Delete") {
          e.preventDefault();
          onDismiss(nodeId);
        }
      },
      [nodeId, onDismiss],
    );

    return (
      <motion.button
        layout
        initial={prefersReducedMotion ? false : { opacity: 0, x: -8, scale: 0.95 }}
        animate={{ opacity: 1, x: 0, scale: 1 }}
        exit={{ opacity: 0, scale: prefersReducedMotion ? 1 : 0.9 }}
        transition={{ duration: prefersReducedMotion ? 0 : 0.2, ease: "easeOut" }}
        type="button"
        role="listitem"
        aria-label={`Selected element: ${label}`}
        onClick={handleClick}
        onKeyDown={handleKeyDown}
        className={cn(
          "inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium",
          "border transition-colors duration-150",
          "bg-[var(--badge-chip-bg)] border-[var(--badge-chip-border)] text-[var(--badge-chip-text)]",
          "hover:bg-[var(--badge-chip-border)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
          "max-w-[160px] cursor-pointer",
        )}
      >
        <NodeTypeIcon nodeType={nodeType} />
        <span className="truncate">{label}</span>
        <span
          role="button"
          tabIndex={0}
          aria-label={`Remove ${label}`}
          onClick={handleDismiss}
          className="ml-0.5 shrink-0 rounded-sm p-0.5 hover:bg-[var(--badge-chip-border)] transition-colors"
        >
          <Icons.X className="size-2.5" />
        </span>
      </motion.button>
    );
  },
);
BadgeChip.displayName = "BadgeChip";

/** Diagram-type-aware node icon */
function NodeTypeIcon({ nodeType }: { nodeType: string }) {
  // Map common node types to icons
  if (nodeType.includes("gateway") || nodeType.includes("decision")) {
    return <Icons.GitBranch className="size-3 shrink-0" />;
  }
  if (nodeType.includes("database") || nodeType.includes("entity")) {
    return <Icons.Database className="size-3 shrink-0" />;
  }
  if (nodeType.includes("person") || nodeType.includes("participant") || nodeType.includes("actor")) {
    return <Icons.User2 className="size-3 shrink-0" />;
  }
  if (nodeType.includes("service") || nodeType.includes("process") || nodeType.includes("activity")) {
    return <Icons.Server className="size-3 shrink-0" />;
  }
  if (nodeType.includes("queue")) {
    return <Icons.Package className="size-3 shrink-0" />;
  }
  if (nodeType.includes("external") || nodeType.includes("loadbalancer")) {
    return <Icons.Globe className="size-3 shrink-0" />;
  }
  // Default
  return <Icons.Circle className="size-3 shrink-0" />;
}
