Citation

"use client";

import * as React from "react";
import { ArrowTopRightOnSquareIcon } from "@heroicons-animated/react";

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

export type Source = {
  id: string;
  title: string;
  url: string;
  snippet?: string;
  /** Publisher or site name; derived from the URL when omitted. */
  site?: string;
  date?: string;
};

export function sourceSite(source: Pick<Source, "url" | "site">) {
  if (source.site) return source.site;
  try {
    return new URL(source.url).hostname.replace(/^www\./, "");
  } catch {
    return source.url;
  }
}

type CitationProps = Omit<React.ComponentProps<"a">, "href"> & {
  /** 1-based display number. */
  index: number;
  source?: Source;
  /** Highlights the chip; useful when the matching source card is hovered. */
  active?: boolean;
};

/** Inline numbered chip that links to a source and previews it on hover. */
function Citation({ index, source, active, className, ...props }: CitationProps) {
  const chip = (
    <a
      data-slot="citation"
      data-active={active || undefined}
      href={source?.url ?? "#"}
      target={source ? "_blank" : undefined}
      rel={source ? "noreferrer" : undefined}
      className={cn(
        "mx-0.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-md border bg-muted px-1 align-text-top font-mono text-[10px] font-medium leading-none text-muted-foreground no-underline transition-colors hover:border-brand/50 hover:bg-brand-soft hover:text-brand data-[active]:border-brand/50 data-[active]:bg-brand-soft data-[active]:text-brand",
        className,
      )}
      {...props}
    >
      {index}
    </a>
  );
  if (!source) return chip;
  return (
    <TooltipProvider delayDuration={150}>
      <Tooltip>
        <TooltipTrigger asChild>{chip}</TooltipTrigger>
        <TooltipContent side="top" className="max-w-72 bg-popover p-3 text-popover-foreground shadow-modal">
          <div className="flex flex-col gap-1">
            <span className="text-[11px] text-muted-foreground">{sourceSite(source)}</span>
            <span className="text-xs font-medium leading-4">{source.title}</span>
            {source.snippet ? (
              <span className="line-clamp-3 text-[11px] leading-4 text-muted-foreground">{source.snippet}</span>
            ) : null}
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

type SourceListProps = React.ComponentProps<"ol">;

function SourceList({ className, ...props }: SourceListProps) {
  return (
    <ol
      data-slot="source-list"
      className={cn("grid gap-2 sm:grid-cols-2", className)}
      {...props}
    />
  );
}

type SourceCardProps = Omit<React.ComponentProps<"a">, "href"> & {
  index: number;
  source: Source;
  active?: boolean;
  compact?: boolean;
};

function SourceCard({ index, source, active, compact, className, ...props }: SourceCardProps) {
  const site = sourceSite(source);
  return (
    <li className="list-none">
      <a
        data-slot="source-card"
        data-active={active || undefined}
        href={source.url}
        target="_blank"
        rel="noreferrer"
        className={cn(
          "group/source flex h-full flex-col gap-1.5 rounded-xl border bg-card p-3 text-left no-underline transition-colors hover:border-brand/50 hover:bg-accent/40 data-[active]:border-brand/50 data-[active]:bg-brand-soft/40",
          className,
        )}
        {...props}
      >
        <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
          <span className="flex size-4 items-center justify-center rounded-full bg-muted font-mono text-[10px] font-medium text-foreground">
            {index}
          </span>
          <span className="flex size-4 items-center justify-center rounded-sm bg-brand-soft text-[9px] font-semibold uppercase text-brand">
            {site.charAt(0)}
          </span>
          <span className="truncate">{site}</span>
          {source.date ? <span className="ml-auto shrink-0">{source.date}</span> : null}
          <ArrowTopRightOnSquareIcon size={12} className="flex shrink-0 opacity-0 transition-opacity group-hover/source:opacity-100" />
        </div>
        <span className="line-clamp-2 text-xs font-medium leading-4 text-foreground">{source.title}</span>
        {!compact && source.snippet ? (
          <span className="line-clamp-2 text-[11px] leading-4 text-muted-foreground">{source.snippet}</span>
        ) : null}
      </a>
    </li>
  );
}

/**
 * Render markdown-ish text that contains `[n]` markers, replacing each with a
 * <Citation>. Use for plain paragraphs; for full markdown keep the markers
 * and post-process the rendered output instead.
 */
function CitedText({
  text,
  sources,
  activeId,
  onHover,
  className,
  ...props
}: React.ComponentProps<"p"> & {
  text: string;
  sources: Source[];
  activeId?: string | null;
  onHover?: (id: string | null) => void;
}) {
  const parts = text.split(/(\[\d+\])/g);
  return (
    <p data-slot="cited-text" className={cn("text-sm leading-6.5", className)} {...props}>
      {parts.map((part, i) => {
        const m = /^\[(\d+)\]$/.exec(part);
        if (!m) return <React.Fragment key={i}>{part}</React.Fragment>;
        const index = Number(m[1]);
        const source = sources[index - 1];
        return (
          <Citation
            key={i}
            index={index}
            source={source}
            active={!!source && activeId === source.id}
            onMouseEnter={() => onHover?.(source?.id ?? null)}
            onMouseLeave={() => onHover?.(null)}
          />
        );
      })}
    </p>
  );
}

export { Citation, SourceList, SourceCard, CitedText };