import { Button } from '@/components/button';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/tooltip';
import { CheckIcon, CopyIcon } from '@/icons';
import { cn } from '@/lib/utils';
import { useMessages } from '~/i18n';
import { useCopy } from '../hooks/use-copy';

/**
 * Copy-to-clipboard, in the three shapes the showcase needs: a labelled button
 * you can put anywhere, the code line with a button on its right that the
 * component page shows for its import statement, and the multi-line block that
 * shows a generated snippet.
 *
 * All three are the kit's own `Button`, and the hint is the kit's `Tooltip` —
 * chrome uses kit components. The one thing that is not the kit's is the
 * clipboard call itself, which is `./use-copy` — shared with `chrome/ui/share.tsx`
 * and where the doubled feedback is explained.
 */

export function CopyButton({
  text,
  label,
  title,
  iconOnly = false,
  className,
}: {
  /* A thunk defers the work to the click. A 35-cell matrix would otherwise
     serialise every cell on every render just to fill a button nobody pressed. */
  text: string | (() => string);
  /** Defaults to the catalogue's plain "Copy" — most callers want exactly that. */
  label?: string;
  title?: string;
  /**
   * Drop the word and keep the glyph, for the square button a matrix cell has
   * room for. The label still reaches assistive technology as the accessible
   * name, so this is a visual choice rather than a semantic one.
   */
  iconOnly?: boolean;
  className?: string;
}) {
  const [copied, copy] = useCopy();
  const m = useMessages();
  const word = label ?? m.common.copy;

  const button = (
    <Button
      type="button"
      variant="outline"
      colorPalette="black"
      size={iconOnly ? 'icon-xs' : 'sm'}
      aria-label={iconOnly ? word : undefined}
      onClick={() => copy(typeof text === 'function' ? text() : text)}
      /* `cn` rather than a join: a caller that overrides the height or the
         padding (the matrix puts a small button inside a cell) needs its
         utility to actually win, which is conflict resolution, not order. */
      className={cn('shrink-0 text-xs font-medium', className)}
    >
      {copied ? <CheckIcon /> : <CopyIcon />}
      {iconOnly ? null : copied ? m.common.copied : word}
    </Button>
  );

  if (!title) return button;

  return (
    <Tooltip>
      <TooltipTrigger asChild>{button}</TooltipTrigger>
      <TooltipContent className="max-w-xs">{title}</TooltipContent>
    </Tooltip>
  );
}

/**
 * A generated snippet: the code as it will be pasted, with the button over its
 * top-right corner. `CopyLine` cannot stand in for this — it is `nowrap` and
 * single-line, and every snippet here carries at least an import above the JSX.
 */
export function CopyBlock({
  code,
  label,
  title,
}: {
  code: string;
  label?: string;
  title?: string;
}) {
  return (
    /* `bg-card` and a border, not the flat `bg-muted` this used to be: a snippet
       is a surface on the page like the playground and the grids around it, and
       painting it grey made it read as something disabled.

       The button sits in its own row above the code rather than floating over
       it. The old layout reserved `pr-28` for it — a number tuned to the width
       of the English word "Copy", which the Russian catalogue overruns, and
       which a snippet with a long import line scrolls under anyway. */
    <div className="overflow-hidden rounded-lg border border-border bg-card">
      <div className="flex justify-end border-b border-border px-2 py-1.5">
        <CopyButton text={code} label={label} title={title} className="h-7 px-2" />
      </div>
      <pre className="cbar-code overflow-x-auto px-4 py-3 text-xs">
        <code>{code}</code>
      </pre>
    </div>
  );
}

export function CopyLine({ text }: { text: string }) {
  return (
    <div className="flex items-center gap-2">
      <code className="cbar-code flex-1 overflow-x-auto rounded-xs border border-border bg-card px-3 py-2 text-xs whitespace-nowrap">
        {text}
      </code>
      <CopyButton text={text} />
    </div>
  );
}