/**
 * InlineTextEditor – Floating input overlay for non-blocking text editing.
 * Replaces window.prompt() for text element editing.
 */
import React, { useEffect, useRef, useState } from 'react';

export interface InlineTextEditorProps {
  initialText: string;
  onSubmit: (text: string) => void;
  onCancel: () => void;
}

const InlineTextEditor: React.FC<InlineTextEditorProps> = ({ initialText, onSubmit, onCancel }) => {
  const [text, setText] = useState(initialText);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
    inputRef.current?.select();
  }, []);

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      onSubmit(text);
    } else if (e.key === 'Escape') {
      e.preventDefault();
      onCancel();
    }
  };

  const handleBlur = () => {
    onSubmit(text);
  };

  return (
    <div
      style={{
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        zIndex: 10000,
        background: 'var(--color-bg-secondary, #2a2a2a)',
        border: '1px solid var(--color-border, #444)',
        borderRadius: '8px',
        padding: '12px 16px',
        boxShadow: '0 4px 20px rgba(0,0,0,0.4)',
        display: 'flex',
        flexDirection: 'column',
        gap: '8px',
        minWidth: '320px',
      }}
    >
      <label
        style={{
          fontSize: '12px',
          color: 'var(--color-text-secondary, #aaa)',
          fontFamily: 'sans-serif',
        }}
      >
        Text eingeben
      </label>
      <input
        ref={inputRef}
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        onKeyDown={handleKeyDown}
        onBlur={handleBlur}
        style={{
          width: '100%',
          padding: '8px 10px',
          fontSize: '14px',
          background: 'var(--color-bg-primary, #1a1a1a)',
          color: 'var(--color-text-primary, #fff)',
          border: '1px solid var(--color-border, #555)',
          borderRadius: '4px',
          outline: 'none',
        }}
      />
      <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
        <button
          onClick={onCancel}
          style={{
            padding: '6px 14px',
            fontSize: '13px',
            background: 'transparent',
            color: 'var(--color-text-secondary, #aaa)',
            border: '1px solid var(--color-border, #555)',
            borderRadius: '4px',
            cursor: 'pointer',
          }}
        >
          Abbrechen (Esc)
        </button>
        <button
          onClick={() => onSubmit(text)}
          style={{
            padding: '6px 14px',
            fontSize: '13px',
            background: 'var(--color-accent, #3498db)',
            color: '#fff',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
          }}
        >
          Bestätigen (Enter)
        </button>
      </div>
    </div>
  );
};

export default InlineTextEditor;