import { MousePointerClick, X } from "lucide-react";

import {
  COMPOSER_INLINE_CHIP_CLASS_NAME,
  COMPOSER_INLINE_CHIP_DISMISS_BUTTON_CLASS_NAME,
  COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
  COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME,
} from "../composerInlineChip";
import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
import { cn } from "~/lib/utils";
import {
  type ElementContextDraft,
  formatElementContextLabel,
  formatElementContextSourceLabel,
} from "~/lib/elementContext";

interface ComposerPendingElementContextsProps {
  contexts: ReadonlyArray<ElementContextDraft>;
  onRemove: (contextId: string) => void;
  className?: string;
}

interface ComposerPendingElementContextChipProps {
  context: ElementContextDraft;
  onRemove: (contextId: string) => void;
}

function buildTooltipContent(context: ElementContextDraft): string {
  const lines: string[] = [];
  lines.push(formatElementContextLabel(context));
  const source = formatElementContextSourceLabel(context);
  if (source) lines.push(source);
  if (context.pageUrl) lines.push(context.pageUrl);
  if (context.selector) lines.push(context.selector);
  if (context.htmlPreview.trim().length > 0) {
    lines.push("");
    lines.push(context.htmlPreview.trim().slice(0, 600));
  }
  return lines.join("\n");
}

export function ComposerPendingElementContextChip({
  context,
  onRemove,
}: ComposerPendingElementContextChipProps) {
  const label = formatElementContextLabel(context);
  const sourceLabel = formatElementContextSourceLabel(context);
  return (
    <Tooltip>
      <TooltipTrigger
        render={
          <span className={cn(COMPOSER_INLINE_CHIP_CLASS_NAME, "pr-1")}>
            <MousePointerClick className={cn(COMPOSER_INLINE_CHIP_ICON_CLASS_NAME, "size-3.5")} />
            <span className={COMPOSER_INLINE_CHIP_LABEL_CLASS_NAME}>{label}</span>
            {sourceLabel ? (
              <span className="select-none text-[10px] font-normal leading-tight text-muted-foreground/85">
                {sourceLabel}
              </span>
            ) : null}
            <button
              type="button"
              aria-label={`Remove ${label}`}
              className={COMPOSER_INLINE_CHIP_DISMISS_BUTTON_CLASS_NAME}
              onClick={(event) => {
                event.preventDefault();
                event.stopPropagation();
                onRemove(context.id);
              }}
            >
              <X className="size-3" aria-hidden />
            </button>
          </span>
        }
      />
      <TooltipPopup side="top" className="max-w-96 whitespace-pre-wrap leading-tight">
        {buildTooltipContent(context)}
      </TooltipPopup>
    </Tooltip>
  );
}

export function ComposerPendingElementContexts({
  contexts,
  onRemove,
  className,
}: ComposerPendingElementContextsProps) {
  if (contexts.length === 0) return null;
  return (
    <div className={cn("flex flex-wrap gap-1.5", className)}>
      {contexts.map((context) => (
        <ComposerPendingElementContextChip key={context.id} context={context} onRemove={onRemove} />
      ))}
    </div>
  );
}