/* Atlas — InputBar
 * The event composer. Atlas does not "send messages" — it records ledger
 * events. The composer captures: event type, target person, planned date,
 * and a free-text note. Pressing the primary button posts the event and
 * the ChatArea prepends it to the event log.
 */
function InputBar({ onPostEvent = () => {} }) {
  const [type, setType] = React.useState("allocate");
  const [person, setPerson] = React.useState("Marco Ferraro");
  const [date, setDate] = React.useState("Today");
  const [note, setNote] = React.useState("");

  const PEOPLE = [
    "Marco Ferraro",
    "Giorgia Romano",
    "Alina Petrov",
    "Matteo Greco",
    "Elena Russo",
    "Riccardo Conti",
  ];

  function submit() {
    if (!note.trim()) return;
    onPostEvent({
      id: "e-" + Math.random().toString(36).slice(2, 5),
      type,
      person,
      date: date === "Today" ? formatToday() : date,
      title: titleFor(type),
      note: note.trim(),
      actor: "Giorgia Romano",
      planned: type === "end",
    });
    setNote("");
  }

  return (
    <div className="atk-composer">
      <div className="atk-composer-row">
        <label className="atk-field">
          <span className="atk-field-label">Type</span>
          <select className="atk-field-ctrl" value={type} onChange={(e) => setType(e.target.value)}>
            <option value="allocate">Capacity re-allocated</option>
            <option value="role">Role changed</option>
            <option value="hire">Hire</option>
            <option value="end">Contract will end</option>
          </select>
        </label>

        <label className="atk-field">
          <span className="atk-field-label">Person</span>
          <select className="atk-field-ctrl" value={person} onChange={(e) => setPerson(e.target.value)}>
            {PEOPLE.map((p) => <option key={p}>{p}</option>)}
          </select>
        </label>

        <label className="atk-field">
          <span className="atk-field-label">As of</span>
          <input className="atk-field-ctrl" value={date} onChange={(e) => setDate(e.target.value)} />
        </label>
      </div>

      <div className="atk-composer-row atk-composer-row--note">
        <textarea
          className="atk-composer-note"
          placeholder="Record the change — e.g. 'Stepped into Eng Manager — 20% to the cross-team circle.'"
          rows={2}
          value={note}
          onChange={(e) => setNote(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
              e.preventDefault();
              submit();
            }
          }}
        />
        <button type="button" className="atk-btn atk-btn--primary" onClick={submit} disabled={!note.trim()}>
          Post event
        </button>
      </div>

      <div className="atk-composer-foot">
        <span><code>⌘ ↵</code> to post · British English, sentence case, past tense for history</span>
      </div>
    </div>
  );
}

function formatToday() {
  const d = new Date();
  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  return String(d.getDate()).padStart(2, "0") + " " + months[d.getMonth()] + " " + d.getFullYear();
}

function titleFor(t) {
  return ({
    allocate: "Capacity re-allocated",
    role: "Role changed",
    hire: "Joined as new member",
    end: "Contract will end",
  })[t] || t;
}

window.InputBar = InputBar;
globalThis.InputBar = InputBar;