import React, { useEffect, useRef, useState, CSSProperties } from 'react';

interface Props {
  value: string;
  onSave: (next: string) => Promise<void>;
  style?: CSSProperties;
  singleLine?: boolean;
}

export function EditableField({
  value, onSave, style, singleLine = true
}: Props): React.ReactElement {
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState(value);
  const [error, setError] = useState(false);
  const ref = useRef<HTMLTextAreaElement | HTMLInputElement>(null);

  useEffect(() => { if (!editing) setDraft(value); }, [value, editing]);
  useEffect(() => { if (editing) ref.current?.focus(); }, [editing]);

  async function commit() {
    if (draft === value) { setEditing(false); return; }
    try { await onSave(draft); setEditing(false); }
    catch { setError(true); setDraft(value); setTimeout(() => setError(false), 800); }
  }

  if (!editing) {
    return (
      <span
        onClick={() => setEditing(true)}
        style={{ ...style, cursor: 'text', outline: error ? '1px solid #c93030' : 'none' }}
      >
        {value || <em style={{ color: '#bbb' }}>(비어 있음)</em>}
      </span>
    );
  }

  if (singleLine) {
    return (
      <input
        ref={ref as React.RefObject<HTMLInputElement>}
        value={draft}
        onChange={(e) => setDraft(e.target.value)}
        onBlur={commit}
        onKeyDown={(e) => {
          if (e.key === 'Enter') (e.target as HTMLInputElement).blur();
          if (e.key === 'Escape') { setDraft(value); setEditing(false); }
        }}
        style={{ ...style, border: '1px solid #ccc', borderRadius: 4, padding: 2 }}
      />
    );
  }

  return (
    <textarea
      ref={ref as React.RefObject<HTMLTextAreaElement>}
      value={draft}
      onChange={(e) => setDraft(e.target.value)}
      onBlur={commit}
      onKeyDown={(e) => {
        if (e.key === 'Escape') { setDraft(value); setEditing(false); }
      }}
      style={{ ...style, border: '1px solid #ccc', borderRadius: 4, padding: 4, width: '100%', minHeight: 60 }}
    />
  );
}
