"use client";

import { Bot } from "lucide-react";

export interface AiBadgeProps {
  type: "cited" | "traffic" | "converting" | "opportunity" | "ai-discovered";
  count?: number;
  tooltip?: string;
  size?: "sm" | "md";
  onClick?: () => void;
}

const CONFIG: Record<AiBadgeProps["type"], { bg: string; text: string; label: string }> = {
  cited:          { bg: "bg-emerald-50 border-emerald-200", text: "text-emerald-700", label: "Cited by AI" },
  traffic:        { bg: "bg-blue-50 border-blue-200",      text: "text-blue-700",    label: "AI visits" },
  converting:     { bg: "bg-violet-50 border-violet-200",  text: "text-violet-700",  label: "AI conv." },
  opportunity:    { bg: "bg-orange-50 border-orange-200",  text: "text-orange-700",  label: "AI Opportunity" },
  "ai-discovered": { bg: "bg-teal-50 border-teal-200",     text: "text-teal-700",    label: "AI-Discovered" },
};

export function AiBadge({ type, count, tooltip, size = "sm", onClick }: AiBadgeProps) {
  const c = CONFIG[type];
  const sizeClass = size === "sm" ? "text-[9px] px-1.5 py-0.5 gap-0.5" : "text-[10px] px-2 py-1 gap-1";

  return (
    <span
      className={`inline-flex items-center font-bold uppercase tracking-wider border rounded-full whitespace-nowrap ${c.bg} ${c.text} ${sizeClass} ${onClick ? "cursor-pointer hover:opacity-80" : ""}`}
      title={tooltip ?? c.label}
      onClick={onClick}
      role={onClick ? "button" : undefined}
    >
      <Bot className={size === "sm" ? "w-2.5 h-2.5" : "w-3 h-3"} />
      {count != null ? count : c.label}
    </span>
  );
}

export interface AiIndicatorData {
  cited: boolean;
  citations: number;
  aiVisits: number;
  aiConversions: number;
  opportunity: boolean;
  resonanceScore?: number;
  aiDiscovered?: boolean;
}

export function AiBadgesForItem({
  data,
  size = "sm",
  onNavigate,
}: {
  data: AiIndicatorData | null;
  size?: "sm" | "md";
  onNavigate?: () => void;
}) {
  if (!data) return null;

  return (
    <span className="inline-flex items-center gap-1 flex-wrap">
      {data.aiDiscovered && <AiBadge type="ai-discovered" size={size} onClick={onNavigate} />}
      {data.cited && <AiBadge type="cited" count={data.citations} size={size} onClick={onNavigate} />}
      {data.aiVisits > 0 && !data.cited && <AiBadge type="traffic" count={data.aiVisits} size={size} onClick={onNavigate} />}
      {data.aiConversions > 0 && <AiBadge type="converting" count={data.aiConversions} size={size} onClick={onNavigate} />}
      {data.opportunity && !data.cited && <AiBadge type="opportunity" size={size} onClick={onNavigate} />}
    </span>
  );
}
