/*
 * QuickActionBar — bottom composer on the shipment detail.
 * Plays the "input bar" role: post a note, attach a doc, or dispatch a quick action.
 * Lime primary is reserved for the affirmative action (Publicar).
 */
const QuickActionBar = ({ onSubmit = () => {} }) => {
  const [text, setText] = React.useState("");
  const submit = () => {
    if (!text.trim()) return;
    onSubmit(text.trim());
    setText("");
  };
  const handleKey = (e) => {
    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) submit();
  };
  return (
    <div className="tm-composer">
      <div className="tm-composer__row">
        <button type="button" className="tm-composer__attach" aria-label="Adjuntar documento">▤</button>
        <textarea
          className="tm-composer__field"
          placeholder="Nota operativa, actualización al cliente, o registro al expediente…"
          value={text}
          onChange={(e) => setText(e.target.value)}
          onKeyDown={handleKey}
          rows={2}
        />
      </div>
      <div className="tm-composer__foot">
        <div className="tm-composer__quick">
          <button className="btn btn-ghost" style={{ height: 32, padding: "0 12px" }}>Marcar en patio</button>
          <button className="btn btn-ghost" style={{ height: 32, padding: "0 12px" }}>Solicitar BL</button>
          <button className="btn btn-ghost" style={{ height: 32, padding: "0 12px" }}>Pedimentar</button>
        </div>
        <div className="tm-composer__send">
          <span className="tx-body-sm" style={{ color: "var(--muted)" }}>⌘ + Enter para publicar</span>
          <button className="btn btn-primary" onClick={submit}>Publicar</button>
        </div>
      </div>
    </div>
  );
};
window.QuickActionBar = QuickActionBar;
globalThis.QuickActionBar = QuickActionBar;