import React, { useCallback, useRef, useState } from 'react';
import { createPortal } from 'react-dom';

import styles from './Controls.module.css';

type ButtonProps = {
  children: React.ReactNode;
  onClick?: () => void;
  variant?: 'primary' | 'ghost';
  disabled?: boolean;
  title?: string | undefined;
  /** Подпись для скринридеров (иконки без текста). */
  ariaLabel?: string | undefined;
  /** Компактная кнопка под одну иконку. */
  iconOnly?: boolean;
};

export function Button({
  children,
  onClick,
  variant = 'ghost',
  disabled = false,
  title,
  ariaLabel,
  iconOnly = false,
}: ButtonProps) {
  const btnRef = useRef<HTMLButtonElement | null>(null);
  const [tipPos, setTipPos] = useState<{ x: number; y: number } | null>(null);

  const showTip = useCallback(() => {
    if (disabled || !title) return;
    const el = btnRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    setTipPos({ x: r.left + r.width / 2, y: r.top });
  }, [disabled, title]);

  const hideTip = useCallback(() => {
    setTipPos(null);
  }, []);

  const btnClass = [
    styles.button,
    variant === 'primary' ? styles.buttonPrimary : '',
    iconOnly ? styles.iconOnly : '',
  ]
    .filter(Boolean)
    .join(' ');

  const tip =
    title && tipPos && typeof document !== 'undefined'
      ? createPortal(
          <div role="tooltip" className={styles.tooltip} style={{ left: tipPos.x, top: tipPos.y }}>
            {title}
          </div>,
          document.body,
        )
      : null;

  return (
    <>
      <button
        ref={btnRef}
        type="button"
        className={btnClass}
        disabled={disabled}
        aria-label={ariaLabel}
        onClick={disabled ? undefined : onClick}
        onMouseEnter={showTip}
        onMouseLeave={hideTip}
        onFocus={showTip}
        onBlur={hideTip}
      >
        {children}
      </button>
      {tip}
    </>
  );
}

type InputProps = {
  value: string;
  placeholder?: string;
  onChange: (v: string) => void;
};

export function Input({ value, placeholder, onChange }: InputProps) {
  return (
    <input
      className={styles.input}
      value={value}
      placeholder={placeholder}
      onChange={(e) => onChange(e.target.value)}
    />
  );
}