'use client';

import React, { useState } from 'react';

import './FloatingToolbar.css';
import { useScrollIsolation } from './hooks/useScrollIsolation';

export interface FloatingToolbarProps {
  /** Ref to the container element the toolbar anchors to */
  containerRef: React.RefObject<HTMLElement | null>;
  /** Action buttons to render (right side) */
  children: React.ReactNode;
  /** Optional label shown left of the buttons (e.g. language badge) */
  label?: React.ReactNode;
  /** Where to anchor relative to the container (default: bottom-right) */
  position?: 'top-right' | 'bottom-right';
  /** Offset from the edge in px (default: 8) */
  offset?: number;
  /** z-index (default: 30) */
  zIndex?: number;
  /**
   * Block wheel scroll inside the container until user clicks into it.
   * Re-locks when mouse leaves. Like Google Maps scroll isolation.
   * @default true
   */
  scrollIsolation?: boolean;
}

/**
 * Toolbar is anchored with `position: absolute` inside the container (PrettyCode, etc.).
 * `position: fixed` + viewport coordinates breaks embedded layouts (e.g. chat composer overlap).
 */
export const FloatingToolbar: React.FC<FloatingToolbarProps> = ({
  containerRef,
  children,
  label,
  position = 'bottom-right',
  offset = 8,
  zIndex = 30,
  scrollIsolation = true,
}) => {
  const { locked, unlock } = useScrollIsolation(containerRef, scrollIsolation);
  const [overlayHovered, setOverlayHovered] = useState(false);

  const overlay =
    scrollIsolation && locked ? (
      <div
        onClick={unlock}
        onMouseEnter={() => setOverlayHovered(true)}
        onMouseLeave={() => setOverlayHovered(false)}
        style={{
          position: 'absolute',
          inset: 0,
          zIndex: zIndex - 1,
          cursor: 'pointer',
          background: overlayHovered ? 'rgba(0,0,0,0.04)' : 'transparent',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          transition: 'background 150ms',
        }}
      >
        {overlayHovered && (
          <span
            style={{
              fontSize: '0.75rem',
              padding: '0.25rem 0.625rem',
              borderRadius: '9999px',
              background: 'rgba(0,0,0,0.55)',
              color: '#fff',
              pointerEvents: 'none',
              userSelect: 'none',
            }}
          >
            Click to scroll
          </span>
        )}
      </div>
    ) : null;

  const positionStyle: React.CSSProperties =
    position === 'bottom-right'
      ? { bottom: offset, right: offset }
      : { top: offset, right: offset };

  const toolbar = (
    <div
      className="flex items-center gap-1"
      style={{
        position: 'absolute',
        ...positionStyle,
        zIndex,
      }}
    >
      {label && (
        <>
          {label}
          <div className="w-px h-4 bg-border/50 mx-0.5" />
        </>
      )}
      {children}
    </div>
  );

  return (
    <>
      {overlay}
      {toolbar}
    </>
  );
};
