/* ActionBar.jsx — barra inferior de acciones rápidas
   Equivalente al "InputBar" (composer) de un kit de chat: aquí el
   despachador crea una orden de servicio o programa una visita
   sin salir del workspace. */
const { useState: useStateAction } = React;

function ActionBar({ onSubmit }) {
  const [text, setText] = useStateAction('');
  const [type, setType] = useStateAction('service');

  function submit(e) {
    e.preventDefault();
    if (!text.trim()) return;
    onSubmit && onSubmit({ type, text });
    setText('');
  }

  return (
    <form className="ax-action-bar" onSubmit={submit}>
      <div className="ax-action-bar__type">
        <button
          type="button"
          className={type === 'service' ? 'is-active' : ''}
          onClick={() => setType('service')}
        >Orden de servicio</button>
        <button
          type="button"
          className={type === 'visit' ? 'is-active' : ''}
          onClick={() => setType('visit')}
        >Visita programada</button>
        <button
          type="button"
          className={type === 'note' ? 'is-active' : ''}
          onClick={() => setType('note')}
        >Nota técnica</button>
      </div>
      <div className="ax-action-bar__row">
        <input
          className="ax-action-bar__input"
          placeholder={type === 'visit'
            ? 'Cliente, fecha y técnico asignado…'
            : type === 'note'
              ? 'Observación o medición a registrar…'
              : 'Descripción breve del incidente o requerimiento…'}
          value={text}
          onChange={e => setText(e.target.value)}
        />
        <button
          type="button"
          className="ax-icon-btn"
          aria-label="Adjuntar archivo"
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
            <path d="M21 12.5l-9 9a5 5 0 01-7-7l9-9a3.5 3.5 0 015 5l-9 9a2 2 0 01-3-3l8-8"/>
          </svg>
        </button>
        <button type="submit" className="ax-btn ax-btn--primary" disabled={!text.trim()}>
          Crear
        </button>
      </div>
      <div className="ax-action-bar__hint">
        <span className="mono">⌘↩</span> envía · <span className="mono">⌘K</span> abre comandos
      </div>
    </form>
  );
}

window.ActionBar = ActionBar;