import * as React from "react";
import { IconCheck, IconCopy } from "@tabler/icons-react";
import { Button, cn } from "@colineapp/ui";

export function useCopy() {
  const [copied, setCopied] = React.useState(false);
  const timer = React.useRef(0);
  React.useEffect(() => () => window.clearTimeout(timer.current), []);
  return {
    copied,
    copy: (text: string) => {
      void navigator.clipboard?.writeText(text).then(() => {
        setCopied(true);
        window.clearTimeout(timer.current);
        timer.current = window.setTimeout(() => setCopied(false), 1400);
      });
    },
  };
}

export function CopyButton({ text, label = "Copy", className }: { text: string; label?: string; className?: string }) {
  const { copied, copy } = useCopy();
  return (
    <Button variant="ghost" size="xs" className={className} onClick={() => copy(text)} aria-live="polite">
      {copied ? <IconCheck className="size-3.5" /> : <IconCopy className="size-3.5" />}
      {copied ? "Copied" : label}
    </Button>
  );
}

/** Code, monochrome, with a copy button. */
export function CodeBlock({ code, className, title, wrap = false }: { code: string; className?: string; title?: string; wrap?: boolean }) {
  return (
    <div className={cn("overflow-hidden rounded-xl border border-border bg-muted/40", className)}>
      <div className="flex items-center justify-between gap-2 border-b border-border px-3 py-1.5">
        <span className="truncate text-xs text-muted-foreground">{title ?? ""}</span>
        <CopyButton text={code} />
      </div>
      <pre className={cn("overflow-x-auto p-4 text-[13px] leading-relaxed", wrap && "whitespace-pre-wrap")}>
        <code className="font-mono">{code}</code>
      </pre>
    </div>
  );
}

/** The install command, one click to copy. */
export function InstallCommand({ command, className }: { command: string; className?: string }) {
  const { copied, copy } = useCopy();
  return (
    <Button variant="outline" size="lg" className={className} onClick={() => copy(command)} aria-label={`Copy ${command}`}>
      <code className="font-mono">{command}</code>
      {copied ? <IconCheck className="size-4" /> : <IconCopy className="size-4" />}
    </Button>
  );
}