// Reusable UI primitives for Rapport d'intervention const { useState, useEffect, useRef, useMemo, useCallback } = React; // ---------- Icons (inline SVG) ---------- const Icon = { Check: (p) => , ChevronRight: (p) => , ChevronLeft: (p) => , Plus: (p) => , X: (p) => , Search: (p) => , MapPin: (p) => , Clock: (p) => , User: (p) => , Users: (p) => , Heart: (p) => , Activity: (p) => , AlertTriangle: (p) => , FileText: (p) => , Truck: (p) => , Stethoscope: (p) => , Phone: (p) => , Bandage: (p) => , Mountain: (p) => , Save: (p) => , Send: (p) => , Camera: (p) => , }; // ---------- Field wrapper ---------- function Field({ label, hint, required, children, span = 6 }) { return (

{label && ( {label} {required && *} {hint && {hint}} )} {children}

); } // ---------- Text input ---------- function TextInput({ value, onChange, placeholder, icon, mono, type = "text" }) { const inputEl = ( onChange(e.target.value)} placeholder={placeholder} /> ); if (icon) { return

{icon}{inputEl}

; } return inputEl; } // ---------- Textarea ---------- function TextArea({ value, onChange, placeholder, rows = 3 }) { return (

onChange(e.target.value)}
      placeholder={placeholder}
      rows={rows}
    />
  );
}

// ---------- Native select ----------
function Select({ value, onChange, options, placeholder = "Sélectionner..." }) {
  return (
    <select
      className="select"
      value={value || ''}
      onChange={(e) => onChange(e.target.value)}
    >
      <option value="">{placeholder}</option>
      {options.map((opt) => {
        const v = typeof opt === 'string' ? opt : opt.value;
        const l = typeof opt === 'string' ? opt : opt.label;
        return <option key={v} value={v}>{l}</option>;
      })}
    </select>
  );
}

// ---------- Chip group (single-select) ----------
function ChipGroup({ value, onChange, options, large, square }) {
  return (
    <div className="chip-grid">
      {options.map((opt) => {
        const v = typeof opt === 'string' ? opt : opt.value;
        const l = typeof opt === 'string' ? opt : opt.label;
        return (
          <button
            key={v}
            type="button"
            className={`chip ${large ? 'chip-large' : ''} ${square ? 'chip-square' : ''} ${value === v ? 'selected' : ''}`}
            onClick={() => onChange(value === v ? '' : v)}
          >
            {l}
          </button>
        );
      })}
    </div>
  );
}

// ---------- Multi-select chips ----------
function ChipMulti({ value, onChange, options, square }) {
  const arr = value || [];
  return (
    <div className="chip-grid">
      {options.map((opt) => {
        const v = typeof opt === 'string' ? opt : opt.value;
        const l = typeof opt === 'string' ? opt : opt.label;
        const sel = arr.includes(v);
        return (
          <button
            key={v}
            type="button"
            className={`chip ${square ? 'chip-square' : ''} ${sel ? 'selected' : ''}`}
            onClick={() => {
              if (sel) onChange(arr.filter(x => x !== v));
              else onChange([...arr, v]);
            }}
          >
            {sel && <Icon.Check style={{ width: 12, height: 12 }} />} {l}
          </button>
        );
      })}
    </div>
  );
}

// ---------- Toggle ----------
function Toggle({ label, desc, value, onChange }) {
  return (
    <div className="toggle-row" onClick={() => onChange(!value)}>
      <div>
        <div className="toggle-label">{label}</div>
        {desc && <div className="toggle-desc">{desc}</div>}
      </div>
      <div className={`toggle ${value ? 'on' : ''}`}></div>
    </div>
  );
}

// ---------- Patrouilleur picker (modal w/ search) ----------
function PatrouillerPicker({ value, onChange, role, allowClear = true }) {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState('');
  const list = window.RAPPORT_DATA.patrouilleurs;
  const filtered = useMemo(() => {
    if (!q) return list;
    const ql = q.toLowerCase();
    return list.filter(p => p.toLowerCase().includes(ql));
  }, [q, list]);

const initials = value ? (value.match(/[A-Z]/g) || []).slice(-2).join('') : '';
  const filled = !!value;

return (
    <>
      <div className={`patrouiller-pick ${filled ? 'filled' : 'patrouiller-pick-empty'}`} onClick={() => setOpen(true)}>
        <div className="patrouiller-pick-avatar">
          {filled ? initials : <Icon.User style={{ width: 16, height: 16 }} />}
        </div>
        <div className="patrouiller-pick-info">
          <div className="patrouiller-pick-role">{role}</div>
          <div className="patrouiller-pick-name">{value || "Choisir un patrouilleur"}</div>
        </div>
        {filled && allowClear && (
          <button className="btn btn-ghost btn-sm" onClick={(e) => { e.stopPropagation(); onChange(''); }} title="Retirer">
            <Icon.X />
          </button>
        )}
      </div>
      {open && (
        <div className="modal-backdrop" onClick={() => setOpen(false)}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <div className="modal-header">
              <div className="modal-title">{role || 'Patrouilleur'}</div>
            </div>
            <div className="modal-search">
              <div className="input-with-icon">
                <Icon.Search />
                <input
                  autoFocus
                  className="input"
                  value={q}
                  onChange={(e) => setQ(e.target.value)}
                  placeholder="Rechercher par nom ou matricule…"
                />
              </div>
            </div>
            <div className="modal-body">
              {filtered.length === 0 ? (
                <div className="modal-empty">Aucun résultat</div>
              ) : filtered.map(p => {
                const [id, ...rest] = p.split(' ');
                return (
                  <div key={p} className="modal-option" onClick={() => { onChange(p); setOpen(false); setQ(''); }}>
                    <div className="modal-option-id">{id}</div>
                    <div className="modal-option-name">{rest.join(' ')}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}
    </>
  );
}

// ---------- Card ----------
function Card({ title, icon, subtitle, children, action }) {
  return (
    <div className="card">
      {(title || subtitle) && (
        <div className="card-header">
          <div>
            <div className="card-title">
              {icon && <span className="card-title-icon">{icon}</span>}
              {title}
            </div>
            {subtitle && <div className="card-subtitle">{subtitle}</div>}
          </div>
          {action}
        </div>
      )}
      {children}
    </div>
  );
}

// Export to window
Object.assign(window, {
  Icon, Field, TextInput, TextArea, Select, ChipGroup, ChipMulti, Toggle, PatrouillerPicker, Card
});