import { Crosshair, MousePointer2, Sparkles, type LucideIcon } from 'lucide-react';

interface Props {
  /** The action verb from <morphy_action type="...">, e.g. "spotlight" | "point". */
  actionType: string;
  /** Raw JSON payload inside the tag — parsed here only to surface the screen number. */
  content: string;
}

// Known Mac action verbs → a friendly label + an icon. Unknown/future verbs fall back
// to a title-cased label and a generic icon, so new action types still render cleanly.
const ACTION_PRESENTATION: Record<string, { label: string; icon: LucideIcon }> = {
  spotlight: { label: 'Spotlight', icon: Crosshair },
  point: { label: 'Point', icon: MousePointer2 },
};

function titleCase(value: string): string {
  return value.charAt(0).toUpperCase() + value.slice(1);
}

function parseScreenNumber(rawJson: string): number | null {
  try {
    const data = JSON.parse(rawJson);
    return typeof data?.screen === 'number' ? data.screen : null;
  } catch {
    return null;
  }
}

/**
 * Compact "Agent actions" chip for a <morphy_action> the agent sent to the Mac
 * (spotlight, point, …). We surface only the action and which screen it ran on —
 * never the raw coordinates — so the chat reads as a clean activity line.
 */
export default function MorphyActionCard({ actionType, content }: Props) {
  const presentation = ACTION_PRESENTATION[actionType.toLowerCase()] ?? { label: titleCase(actionType), icon: Sparkles };
  const screenNumber = parseScreenNumber(content);
  const Icon = presentation.icon;

  return (
    <div className="my-2 inline-flex items-center gap-2 rounded-xl border border-[#0069FE]/25 bg-[#0069FE]/10 px-3 py-1.5">
      <Icon className="h-3.5 w-3.5 text-[#4AA8FF] shrink-0" />
      <span className="text-[13px] text-[#9ecbff]">
        <span className="text-[#9ecbff]/55">Agent actions:</span>{' '}
        <span className="font-medium">{presentation.label}</span>
        {screenNumber !== null && <span className="text-[#9ecbff]/80"> at screen {screenNumber}</span>}
      </span>
    </div>
  );
}