import { useCallback, useEffect, useRef, useState } from 'react';
import { Check, Copy } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { __ } from '../../lib/i18n';

/**
 * Copy-to-clipboard button with a transient "Copied" confirmation.
 * `aria-live` announces the state change to screen readers.
 */
export function CopyButton({
  text,
  label = __('Copy', 'llmagnet-llm-txt-generator'),
  copiedLabel = __('Copied', 'llmagnet-llm-txt-generator'),
  onCopied,
  className = '',
}: {
  text: string;
  label?: string;
  copiedLabel?: string;
  onCopied?: () => void;
  className?: string;
}) {
  const [copied, setCopied] = useState(false);
  const timerRef = useRef<number | null>(null);

  useEffect(
    () => () => {
      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
    },
    [],
  );

  const handleCopy = useCallback(async () => {
    try {
      await navigator.clipboard.writeText(text);
    } catch {
      // Clipboard API unavailable (e.g. http) — legacy fallback.
      const ta = document.createElement('textarea');
      ta.value = text;
      ta.style.position = 'fixed';
      ta.style.opacity = '0';
      document.body.appendChild(ta);
      ta.select();
      try {
        document.execCommand('copy');
      } finally {
        document.body.removeChild(ta);
      }
    }
    setCopied(true);
    onCopied?.();
    if (timerRef.current !== null) window.clearTimeout(timerRef.current);
    timerRef.current = window.setTimeout(() => setCopied(false), 1800);
  }, [text, onCopied]);

  return (
    <Button
      type="button"
      onClick={handleCopy}
      aria-live="polite"
      variant="outline"
      size="xs"
      className={className}
    >
      {copied ? (
        <Check className="h-3.5 w-3.5 text-green-600" aria-hidden />
      ) : (
        <Copy className="h-3.5 w-3.5" aria-hidden />
      )}
      {copied ? copiedLabel : label}
    </Button>
  );
}