'use client';
import { useId, useRef, useState } from 'react';
import { Check, Copy, LoaderCircle, X, Search } from 'lucide-react';
import styles from './primitives.module.css';

export function BrandButton({
  variant = 'primary',
  size = 'medium',
  busy = false,
  children,
  className = '',
  onClick,
  ...props
}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: 'primary' | 'secondary' | 'quiet' | 'danger';
  size?: 'small' | 'medium' | 'large';
  busy?: boolean;
}) {
  return (
    <button
      {...props}
      type={props.type ?? 'button'}
      className={`${styles.button} ${className}`}
      data-variant={variant}
      data-size={size}
      aria-busy={busy || undefined}
      onClick={(event) => {
        if (busy) {
          event.preventDefault();
          return;
        }
        onClick?.(event);
      }}
    >
      {busy && <LoaderCircle className={styles.spinner} aria-hidden="true" />}
      {children}
    </button>
  );
}
export function CopyButton({ value, label = 'Copy code' }: { value: string; label?: string }) {
  const [status, setStatus] = useState<'idle' | 'copied' | 'failed'>('idle');
  const fallback = useRef<HTMLTextAreaElement>(null);
  async function copy() {
    try {
      await navigator.clipboard.writeText(value);
      setStatus('copied');
    } catch {
      setStatus('failed');
      requestAnimationFrame(() => {
        fallback.current?.focus();
        fallback.current?.select();
      });
    }
  }
  return (
    <span className={styles.copyControl}>
      <BrandButton variant="secondary" size="small" onClick={() => void copy()} aria-label={label}>
        {status === 'copied' ? <Check /> : <Copy />}
        <span>{status === 'copied' ? 'Copied' : 'Copy'}</span>
      </BrandButton>
      <span role="status" className={styles.srOnly}>
        {status === 'copied'
          ? 'Copied to clipboard'
          : status === 'failed'
            ? 'Clipboard unavailable. Select and copy the value below.'
            : ''}
      </span>
      {status === 'failed' && (
        <label className={styles.copyFallback}>
          Select and copy
          <textarea ref={fallback} readOnly value={value} />
        </label>
      )}
    </span>
  );
}
export function CodeBlock({ code, label = 'Example' }: { code: string; label?: string }) {
  return (
    <div className={styles.codeBlock}>
      <div>
        <span>{label}</span>
        <CopyButton value={code} label={`Copy ${label}`} />
      </div>
      <pre tabIndex={0} aria-label={label}>
        <code>{code}</code>
      </pre>
    </div>
  );
}
export function SearchField({
  label,
  value,
  onChange,
  placeholder = 'Search…',
}: {
  label: string;
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
}) {
  const id = useId();
  const input = useRef<HTMLInputElement>(null);
  return (
    <label className={styles.searchLabel} htmlFor={id}>
      {label}
      <span className={styles.searchField}>
        <Search aria-hidden="true" />
        <input
          ref={input}
          id={id}
          type="search"
          value={value}
          placeholder={placeholder}
          onChange={(e) => onChange(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === 'Escape') {
              e.preventDefault();
              onChange('');
            }
          }}
        />
        {value && (
          <button
            type="button"
            aria-label={`Clear ${label.toLowerCase()}`}
            onClick={() => {
              onChange('');
              input.current?.focus();
            }}
          >
            <X />
          </button>
        )}
      </span>
    </label>
  );
}
export function StatusDot({
  tone = 'neutral',
  children,
  size = 8,
}: {
  tone?: 'neutral' | 'info' | 'success' | 'warning' | 'error';
  children: React.ReactNode;
  size?: 6 | 8 | 10;
}) {
  return (
    <span className={styles.statusDot} data-tone={tone}>
      <i style={{ width: size, height: size }} aria-hidden="true" />
      {children}
    </span>
  );
}
export function Feedback({
  tone = 'info',
  title,
  children,
}: {
  tone?: 'info' | 'success' | 'warning' | 'error';
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div className={styles.feedback} data-tone={tone}>
      <StatusDot tone={tone}>{title}</StatusDot>
      <div>{children}</div>
    </div>
  );
}