// Questionnaire complet d'ajout d'un résident — configuration Livana
// Remplace AddResidentModal. Chargé après config-modals.jsx pour primer sur window.AddResidentModal.

const { useState: useStateQ } = React;

function QField({ label, hint, value, onChange, placeholder, textarea, rows, type }) {
  return (
    <label className="cfg-field">
      {label && <span className="cfg-label">{label}</span>}
      {hint && <span className="cfg-hint">{hint}</span>}
      {textarea
        ? <textarea className="cfg-textarea" rows={rows || 2} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} />
        : <input className="cfg-input" type={type || 'text'} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} />}
    </label>
  );
}

// segmented single-choice
function QChoice({ label, options, value, onChange }) {
  return (
    <div className="cfg-field">
      {label && <span className="cfg-label">{label}</span>}
      <div className="q-choice">
        {options.map((o) => (
          <button key={o} type="button" className={`q-chip ${value === o ? 'active' : ''}`} onClick={() => onChange(value === o ? '' : o)}>{o}</button>
        ))}
      </div>
    </div>
  );
}

function AddResidentModal({ onClose, draft, onSaveDraft, onCreated }) {
  const d0 = draft || {};
  const [step, setStep] = useStateQ(d0.step || 0);
  const [done, setDone] = useStateQ(false);
  useEscClose(onClose);

  // 0 — Informations générales
  const [g, setG] = useStateQ(d0.g || { firstName: '', lastName: '', birth: '', birthPlace: '', lang: 'Français', comm: '', debit: '', memory: '' });
  // 1 — Personnes importantes (3)
  const blankPerson = { name: '', link: '', alive: '', place: '', job: '', notes: '' };
  const [people, setPeople] = useStateQ(d0.people || [{ ...blankPerson }, { ...blankPerson }, { ...blankPerson }]);
  const setPerson = (i, k, v) => setPeople((prev) => prev.map((p, idx) => idx === i ? { ...p, [k]: v } : p));
  const addPerson = () => setPeople((prev) => [...prev, { ...blankPerson }]);
  // 2 — Histoire de vie
  const [life, setLife] = useStateQ(d0.life || { summary: '', places: '', loved: '', studies: '', jobs: '', hobbies: '', happy: '', hard: '', spontaneous: '', other: '' });
  // 3 — Centres d'intérêt
  const [topics, setTopics] = useStateQ(d0.topics || ['', '', '']);
  const [topicsOther, setTopicsOther] = useStateQ(d0.topicsOther || '');
  const setTopic = (i, v) => setTopics((prev) => prev.map((t, idx) => idx === i ? v : t));
  const addTopic = () => setTopics((prev) => [...prev, '']);
  // 4 — Identité de Livana
  const [liv, setLiv] = useStateQ(d0.liv || { name: 'Livana', link: '', story: '' });
  // 5 — Voix de Livana
  const [voice, setVoice] = useStateQ(d0.voice || { gender: '', age: '', debit: '', familiar: '', familiarNote: '' });
  // 6 — Style de communication
  const [style, setStyle] = useStateQ(d0.style || { prefer: '', avoid: '', sensitive: '', address: 'Vouvoiement' });
  // 7 — Questions / peurs répétitives (4)
  const blankSit = { says: '', reply: '' };
  const [situations, setSituations] = useStateQ(d0.situations || [{ ...blankSit }, { ...blankSit }, { ...blankSit }, { ...blankSit }]);
  const setSit = (i, k, v) => setSituations((prev) => prev.map((s, idx) => idx === i ? { ...s, [k]: v } : s));
  const addSit = () => setSituations((prev) => [...prev, { ...blankSit }]);

  const STEPS = ['Informations générales', 'Personnes importantes', 'Histoire de vie', "Centres d'intérêt", 'Identité de Livana', 'Voix de Livana', 'Style de communication', 'Questions récurrentes'];
  const step0Valid = g.firstName.trim() && g.lastName.trim();

  const commit = () => {
    const R = window.RESIDENTS;
    const id = 'r' + (R.length + 1) + '-' + Date.now().toString(36);
    const calming = [...topics.filter((t) => t.trim()), ...(topicsOther.trim() ? [topicsOther.trim()] : [])].slice(0, 3);
    const ageGuess = (() => { const m = (g.birth || '').match(/(\d{4})/); return m ? (new Date().getFullYear() - parseInt(m[1], 10)) : ''; })();
    R.push({
      id, firstName: g.firstName, lastName: g.lastName, age: ageGuess || '—', room: '—',
      condition: g.comm || 'Bilan en cours', since: 'aujourd\'hui', inCall: false,
      story: life.summary || '', calming: calming.length ? calming : ['À identifier'],
      moodTimeline: [], calls: [],
      kpi: { calls: 0, soothedRate: null, trend: 'flat' },
      directiveResponses: [], directiveHistory: [],
      livanaName: liv.name,
    });
    setDone(true);
    if (onCreated) onCreated();
  };

  const saveDraft = () => {
    if (onSaveDraft) onSaveDraft({ step, g, people, life, topics, topicsOther, liv, voice, style, situations });
  };

  if (done) {
    return (
      <div className="cfg-modal-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
        <div className="cfg-modal cfg-modal-sm">
          <div className="cfg-done">
            <div className="cfg-done-ic"><Icon name="check" size={30} /></div>
            <div className="cfg-done-title">{g.firstName} {g.lastName} ajouté·e</div>
            <div className="cfg-done-sub">Le résident est configuré et prêt pour son premier appel Livana.</div>
            <button className="btn btn-accent" onClick={onClose}>Terminer</button>
          </div>
        </div>
      </div>
    );
  }

  const person = (i) => (
    <div className="q-block" key={i}>
      <div className="q-block-h">Personne {i + 1}</div>
      <div className="cfg-row two">
        <QField label="Nom / prénom" value={people[i].name} onChange={(v) => setPerson(i, 'name', v)} />
        <QField label="Lien avec le résident" value={people[i].link} onChange={(v) => setPerson(i, 'link', v)} placeholder="Fille, mari, voisin…" />
      </div>
      <QChoice label="Toujours en vie ?" options={['Oui', 'Non']} value={people[i].alive} onChange={(v) => setPerson(i, 'alive', v)} />
      <div className="cfg-row two">
        <QField label="Lieu de vie" value={people[i].place} onChange={(v) => setPerson(i, 'place', v)} />
        <QField label="Métier / activités" value={people[i].job} onChange={(v) => setPerson(i, 'job', v)} />
      </div>
      <QField label="Informations / sujets liés à cette personne" textarea value={people[i].notes} onChange={(v) => setPerson(i, 'notes', v)} />
    </div>
  );

  return (
    <div className="cfg-modal-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="cfg-modal cfg-modal-lg">
        <div className="cfg-modal-head">
          <div>
            <div className="cfg-step">Étape {step + 1} sur {STEPS.length} · Configuration Livana</div>
            <div className="cfg-modal-title">{STEPS[step]}</div>
          </div>
          <div className="cfg-head-right">
            <div className="cfg-progress">
              {STEPS.map((_, i) => <span key={i} className={`cfg-dot ${step >= i ? 'on' : ''}`}></span>)}
            </div>
            <button className="drawer-close" onClick={onClose}><Icon name="x" size={18} /></button>
          </div>
        </div>

        <div className="cfg-modal-body">
          {step === 0 && (
            <React.Fragment>
              <p className="cfg-intro">Merci d'être le plus précis possible : ces informations permettront à Livana de personnaliser ses échanges, rassurer le résident et mieux gérer les situations d'agitation ou d'anxiété.</p>
              <div className="cfg-row two">
                <QField label="Prénom" value={g.firstName} onChange={(v) => setG({ ...g, firstName: v })} placeholder="Marguerite" />
                <QField label="Nom" value={g.lastName} onChange={(v) => setG({ ...g, lastName: v })} placeholder="Dubois" />
              </div>
              <div className="cfg-row two">
                <QField label="Date de naissance" value={g.birth} onChange={(v) => setG({ ...g, birth: v })} placeholder="12/03/1941" />
                <QField label="Lieu de naissance" value={g.birthPlace} onChange={(v) => setG({ ...g, birthPlace: v })} placeholder="Tours" />
              </div>
              <QField label="Langue maternelle" value={g.lang} onChange={(v) => setG({ ...g, lang: v })} />
              <QChoice label="Niveau de communication" options={['Bonne compréhension', 'Compréhension moyenne', 'Communication limitée']} value={g.comm} onChange={(v) => setG({ ...g, comm: v })} />
              <QChoice label="Débit de parole" options={['Lent', 'Normal', 'Rapide', 'Lent avec pauses fréquentes']} value={g.debit} onChange={(v) => setG({ ...g, debit: v })} />
              <span className="cfg-hint" style={{ marginTop: -6 }}>Ex. « Coucou euh… (2s) ça va et toi ? Tu fais quoi… (2s) aujourd'hui ? »</span>
              <QChoice label="Se souvient-il/elle d'un échange 30 min après ?" options={['Oui', 'Non', 'Variable']} value={g.memory} onChange={(v) => setG({ ...g, memory: v })} />
            </React.Fragment>
          )}

          {step === 1 && (
            <React.Fragment>
              <p className="cfg-intro">Famille, amis, proches, anciens collègues, voisins… Ces personnes pourront être évoquées par Livana pour créer du lien.</p>
              {people.map((_, i) => person(i))}
              <button className="btn btn-soft btn-sm" style={{ alignSelf: 'flex-start' }} onClick={addPerson}><Icon name="plus" size={14} /> Ajouter une personne</button>
            </React.Fragment>
          )}

          {step === 2 && (
            <React.Fragment>
              <QField label="Résumé libre de son histoire de vie" textarea rows={4} value={life.summary} onChange={(v) => setLife({ ...life, summary: v })} />
              <QField label="Lieux où la personne a vécu" value={life.places} onChange={(v) => setLife({ ...life, places: v })} />
              <QField label="Personnes avec qui elle vivait et qu'elle appréciait" value={life.loved} onChange={(v) => setLife({ ...life, loved: v })} />
              <div className="cfg-row two">
                <QField label="Études / parcours scolaire" value={life.studies} onChange={(v) => setLife({ ...life, studies: v })} />
                <QField label="Métier(s) exercé(s)" value={life.jobs} onChange={(v) => setLife({ ...life, jobs: v })} />
              </div>
              <QField label="Activités / loisirs qu'elle aime ou aimait" textarea value={life.hobbies} onChange={(v) => setLife({ ...life, hobbies: v })} />
              <QField label="Moments heureux marquants" textarea value={life.happy} onChange={(v) => setLife({ ...life, happy: v })} />
              <QField label="Événements difficiles ou sensibles à connaître" textarea value={life.hard} onChange={(v) => setLife({ ...life, hard: v })} />
              <QField label="Sujets qu'elle aime évoquer spontanément" textarea value={life.spontaneous} onChange={(v) => setLife({ ...life, spontaneous: v })} />
              <QField label="Autre" textarea value={life.other} onChange={(v) => setLife({ ...life, other: v })} />
            </React.Fragment>
          )}

          {step === 3 && (
            <React.Fragment>
              <p className="cfg-intro">Indiquez au minimum 3 sujets, souvenirs ou centres d'intérêt qui apaisent la personne — ils permettront le détournement d'attention en cas d'agitation.</p>
              {topics.map((t, i) => (
                <QField key={i} label={`Sujet apaisant ${i + 1}`} value={t} onChange={(v) => setTopic(i, v)}
                  placeholder={['Ex. ses rosiers de Tours…', 'Ex. ses recettes de famille…', 'Ex. ses voyages en Bretagne…'][i] || 'Autre centre d\'intérêt…'} />
              ))}
              <button className="btn btn-soft btn-sm" style={{ alignSelf: 'flex-start' }} onClick={addTopic}><Icon name="plus" size={14} /> Ajouter un sujet</button>
              <QField label="Autres" textarea value={topicsOther} onChange={setTopicsOther} />
            </React.Fragment>
          )}

          {step === 4 && (
            <React.Fragment>
              <p className="cfg-intro">Livana peut adopter une identité adaptée pour favoriser l'engagement et l'apaisement : une amie, une ancienne connaissance, une assistante, un personnage cohérent avec son histoire, ou une identité inventée mais crédible.</p>
              <div className="cfg-row two">
                <QField label="Nom / identité de Livana" value={liv.name} onChange={(v) => setLiv({ ...liv, name: v })} />
                <QField label="Lien avec le résident" value={liv.link} onChange={(v) => setLiv({ ...liv, link: v })} placeholder="Amie, nièce, voisine…" />
              </div>
              <QField label="Histoire / contexte de cette identité" hint="Où elle vit, ce qu'elle fait, comment elle connaît le résident…" textarea rows={3} value={liv.story} onChange={(v) => setLiv({ ...liv, story: v })} />
            </React.Fragment>
          )}

          {step === 5 && (
            <React.Fragment>
              <p className="cfg-intro">La voix de Livana pour incarner son identité.</p>
              <QChoice label="Genre de la voix" options={['Femme', 'Homme']} value={voice.gender} onChange={(v) => setVoice({ ...voice, gender: v })} />
              <QField label="Âge de la voix" value={voice.age} onChange={(v) => setVoice({ ...voice, age: v })} placeholder="Ex. ~40 ans" />
              <QChoice label="Débit de parole" options={['Lent', 'Normal', 'Lent avec pauses']} value={voice.debit} onChange={(v) => setVoice({ ...voice, debit: v })} />
              <QChoice label="Voix familière ?" options={['Oui', 'Non (inventée)']} value={voice.familiar} onChange={(v) => setVoice({ ...voice, familiar: v })} />
              {voice.familiar === 'Oui' && (
                <QField label="Préciser" hint="Ex. clonage de la voix du petit-fils" value={voice.familiarNote} onChange={(v) => setVoice({ ...voice, familiarNote: v })} />
              )}
            </React.Fragment>
          )}

          {step === 6 && (
            <React.Fragment>
              <QField label="Mots / expressions à privilégier" textarea value={style.prefer} onChange={(v) => setStyle({ ...style, prefer: v })} />
              <QField label="Mots à éviter" textarea value={style.avoid} onChange={(v) => setStyle({ ...style, avoid: v })} />
              <QField label="Sujets sensibles à ne pas aborder" textarea value={style.sensitive} onChange={(v) => setStyle({ ...style, sensitive: v })} />
              <QChoice label="Tutoiement / vouvoiement" options={['Vouvoiement', 'Tutoiement']} value={style.address} onChange={(v) => setStyle({ ...style, address: v })} />
            </React.Fragment>
          )}

          {step === 7 && (
            <React.Fragment>
              <p className="cfg-intro">Questions ou peurs répétitives du résident, avec la réponse adaptée que Livana devra systématiquement apporter.</p>
              {situations.map((s, i) => (
                <div className="q-block" key={i}>
                  <div className="q-block-h">Situation {i + 1}</div>
                  <QField label="Ce que dit souvent le résident" textarea value={s.says} onChange={(v) => setSit(i, 'says', v)} placeholder="Ex. « Où est ma mère ? »" />
                  <QField label="Réponse attendue de Livana" textarea value={s.reply} onChange={(v) => setSit(i, 'reply', v)} placeholder="Ex. « Elle est au marché, elle revient bientôt. Et si on parlait de votre jardin ? »" />
                </div>
              ))}
              <button className="btn btn-soft btn-sm" style={{ alignSelf: 'flex-start' }} onClick={addSit}><Icon name="plus" size={14} /> Ajouter une situation</button>
            </React.Fragment>
          )}
        </div>

        <div className="cfg-modal-actions">
          <button className="btn btn-ghost" onClick={step === 0 ? onClose : () => setStep(step - 1)}>
            {step === 0 ? 'Annuler' : <React.Fragment><Icon name="chevron-left" size={14} /> Retour</React.Fragment>}
          </button>
          {step === 0 && !step0Valid && <span className="cfg-actions-hint">Renseignez au moins le prénom et le nom</span>}
          <button className="btn btn-soft cfg-draft-btn" disabled={!step0Valid} onClick={saveDraft}><Icon name="check" size={14} /> Enregistrer le brouillon</button>
          {step < STEPS.length - 1 ? (
            <button className="btn btn-primary" disabled={step === 0 && !step0Valid} onClick={() => setStep(step + 1)}>
              Suivant <Icon name="arrow-right" size={14} />
            </button>
          ) : (
            <button className="btn btn-accent" onClick={commit}><Icon name="check" size={14} /> Créer le résident</button>
          )}
        </div>
      </div>
    </div>
  );
}

window.AddResidentModal = AddResidentModal;