// QuickAdd.jsx — DESIGNSTANDARD for «legg til» i hele v2 (se CLAUDE.md).
// Referanse: «+ Nytt notat»-knappen på Notater. Skrivefelt med
// standardknapp i enden; Enter sender ALLTID inn, Escape avbryter.
// Stilene (.qa-*) er definert i v2/styles/app.css under «DESIGNSTANDARD».
//
// Props:
//   onAdd(text)    – kalles med trimmet tekst når man sender inn
//   placeholder    – inputens placeholder-tekst
//   buttonLabel    – valgfri tekst i knappen (ellers kun +-ikon)
//   size           – 'sm' (kompakt) | 'md' (default) | 'lg' (mobil, 44px)
//   autoFocus      – fokuser input ved mount
//   onCancel       – kalles ved Escape, og ved blur når feltet er tomt
//   value/onChange – valgfri kontrollert modus (parent eier teksten og
//                    er selv ansvarlig for å tømme den etter onAdd)
//   children       – ekstra rad under input-raden (f.eks. dato-chips)

function QuickAdd({
  onAdd, placeholder, buttonLabel, buttonTitle = 'Legg til',
  size = 'md', autoFocus = false, onCancel,
  value, onChange, maxLength, inputRef, className = '', style, children,
}) {
  const [innerText, setInnerText] = React.useState('');
  const controlled = value !== undefined;
  const text = controlled ? value : innerText;
  const setText = controlled ? (onChange || (() => {})) : setInnerText;
  const hasText = !!String(text || '').trim();

  function handleSubmit(e) {
    e.preventDefault();
    const t = String(text || '').trim();
    if (!t) return;
    onAdd && onAdd(t);
    if (!controlled) setInnerText('');
  }

  function handleKeyDown(e) {
    if (e.key === 'Escape' && onCancel) {
      if (!controlled) setInnerText('');
      onCancel();
    }
  }

  function handleBlur(e) {
    // Lukk feltet når man klikker utenfor uten å ha skrevet noe —
    // men ikke når fokus flyttes til noe annet inne i samme skjema
    if (!onCancel || hasText) return;
    const next = e.relatedTarget;
    if (next && e.currentTarget.form && e.currentTarget.form.contains(next)) return;
    onCancel();
  }

  return (
    <form className={`qa qa-${size}${className ? ' ' + className : ''}`} style={style} onSubmit={handleSubmit}>
      <div className="qa-row">
        <input
          ref={inputRef}
          className="qa-input"
          value={text}
          onChange={e => setText(e.target.value)}
          placeholder={placeholder}
          maxLength={maxLength}
          autoFocus={autoFocus}
          autoComplete="off"
          onKeyDown={handleKeyDown}
          onBlur={handleBlur}
        />
        <button type="submit" className="qa-btn" title={buttonTitle} disabled={!hasText}>
          <i className="ti ti-plus"></i>
          {buttonLabel && <span>{buttonLabel}</span>}
        </button>
      </div>
      {children}
    </form>
  );
}

// Liten «+»-knapp i standardstil for kort-headere — åpner typisk en
// QuickAdd øverst i kortet. Ikon-only som default; label er valgfri.
function QuickAddNewBtn({ onClick, label, title = 'Legg til' }) {
  return (
    <button type="button" className="qa-new" onClick={onClick} title={title}>
      <i className="ti ti-plus"></i>
      {label && <span>{label}</span>}
    </button>
  );
}

window.QuickAdd = QuickAdd;
window.QuickAddNewBtn = QuickAddNewBtn;