{title &&

{title}

} {!readonly && (

setLink(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addLink(); } }} />

)} {images.length > 0 && (

{images.map((r, i) => (

}

))}

)} {links.length > 0 && (

{links.map((r) => (

{r.title || r.url} {!readonly && }

))}

)} {!refs.length &&

{g.key === 'antiReferences' ? 'Что точно не нравится — картинки с телефона или ссылки: дизайнеру это так же важно, как референсы.' : 'Пока нет референсов — добавьте картинки с телефона или ссылки на Pinterest / Behance.'}

} {noteField && ( {noteField.label}

patchTop(noteField.id, e.target.value)} />
          </label>
        )}
        {Lightbox && <Lightbox lb={lb} onClose={() => setLb(null)} onIdx={(idx) => setLb((c) => (c ? { ...c, idx } : c))} />}
      </div>
    );
  }

const STATUS = {
    pending: ['не начат', 'neutral'], active: ['ссылка отправлена', 'info'], in_progress: ['заполняется', 'info'],
    submitted: ['отправлен · ждёт согласования', 'warning'], approved: ['согласован', 'success'], expired: ['истёк', 'neutral'],
  };

/* ─── анкета: карточки-блоки, открыт один, остальные свёрнуты со сводкой; следующий раскрывается по «Далее» ─── */
  function DpBriefForm({ dealId, intake, inst, onInstance, who, layout, onClose }) {
    const F = FI(); const Section = window.FormSection;
    const schema = useMemo(() => schemaFor(inst, intake), [inst && inst.templateId, intake && intake.housingType]);
    const sections = (schema && schema.sections) || [];
    const [responses, setResponses] = useState(() => (inst && inst.responses && Object.keys(inst.responses).length ? inst.responses : prefill(schema, intake)));
    const state = inst ? inst.accessState : 'pending';
    const readonly = !inst || state === 'submitted' || state === 'approved';
    /* после отправки бриф читается как презентация (DpBriefView); «Показать анкету» — обратно к форме только для чтения */
    const [showForm, setShowForm] = useState(false);
    const View = window.DpBriefView;
    useEffect(() => { if (!readonly) setShowForm(false); }, [readonly]);
    const isClient = who === 'client';
    const stats = sections.map((sec) => sectionStats(sec, responses, intake));
    const done = stats.map((s) => s.filled > 0);
    const [open, setOpen] = useState(() => { if (readonly) return -1; const i = done.findIndex((d) => !d); return i < 0 ? sections.length - 1 : i; });
    const [reached, setReached] = useState(() => Math.max(open, done.lastIndexOf(true)));
    const total = stats.reduce((a, s) => a + s.total, 0); const filled = stats.reduce((a, s) => a + s.filled, 0);
    const progress = total ? Math.min(100, Math.round((filled / total) * 100)) : 0;
    const doneCount = done.filter(Boolean).length;
    const timer = useRef(null);
    const secRefs = useRef({});
    const persist = useCallback((next) => {
      if (!F || !inst || readonly) return;
      clearTimeout(timer.current);
      timer.current = setTimeout(() => {
        const fresh = F.saveFieldResponses(dealId, inst.id, next, schema);
        if (inst.accessState === 'pending' || inst.accessState === 'active') F.updateInstance(dealId, inst.id, { accessState: 'in_progress' });
        applyAnswers(dealId, next);
        markIntake(dealId, 'in_progress', F.computeSchemaProgress(schema, next));
        onInstance && onInstance(F.findInstance(dealId, (i) => i.id === inst.id) || fresh);
      }, 350);
    }, [dealId, inst && inst.id, inst && inst.accessState, schema, readonly]);
    const patchTop = useCallback((id, val) => setResponses((prev) => { const next = { ...prev, [id]: val }; persist(next); return next; }), [persist]);
    const patchSection = useCallback((sid, val) => setResponses((prev) => { const next = { ...prev, [sid]: val }; persist(next); return next; }), [persist]);
    const goTo = (i) => {
      setOpen(i); setReached((r) => Math.max(r, i));
      setTimeout(() => { const el = secRefs.current[i]; if (el && el.scrollIntoView) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 30);
    };
    const flush = () => { clearTimeout(timer.current); if (F && inst && !readonly) F.saveFieldResponses(dealId, inst.id, responses, schema); };
    const submit = () => {
      if (!F || !inst) return;
      flush();
      if (inst.accessState === 'pending' || inst.accessState === 'active') F.updateInstance(dealId, inst.id, { accessState: 'in_progress' });
      // submitDpBrief внутри вызывает aggregateDpBrief → applyDpPrefs, который затирает помещения замера — восстанавливаем
      const before = (window.loadSiteIntake && window.loadSiteIntake(dealId)) || {};
      const fresh = F.submitDpBrief(dealId, inst.id, responses, schema);
      try { const it = window.loadSiteIntake(dealId); window.saveSiteIntake(dealId, { ...it, rooms: before.rooms || [], references: before.references || [] }); } catch (e) {}
      applyAnswers(dealId, responses);
      markIntake(dealId, 'submitted', 100);
      setOpen(-1);
      const after = fresh || F.findInstance(dealId, (i) => i.id === inst.id);
      syncTasks(dealId, after, intake);
      onInstance && onInstance(after);
    };
    const approve = () => {
      if (!F || !inst) return;
      const fresh = F.approveDpBrief ? F.approveDpBrief(dealId, inst.id) : F.updateInstance(dealId, inst.id, { accessState: 'approved', approvedAt: new Date().toISOString() });
      markIntake(dealId, 'approved', 100);
      syncTasks(dealId, fresh, intake);
      onInstance && onInstance(fresh);
    };
    const reopen = () => {
      if (!F || !inst) return;
      const fresh = F.reopenDpBrief ? F.reopenDpBrief(dealId, inst.id) : F.updateInstance(dealId, inst.id, { accessState: 'in_progress', submittedAt: null, approvedAt: null });
      markIntake(dealId, 'in_progress', progress);
      syncTasks(dealId, fresh, intake);
      const i = done.findIndex((d) => !d); setOpen(i < 0 ? 0 : i);
      setShowForm(false);
      onInstance && onInstance(fresh);
    };
    if (!schema || !Section) return <div className="fe-empty">Шаблон брифа не загружен (Конструктор → Брифы ДП).</div>;
    if (readonly && inst && View && !showForm) {
      return (
        <div className={'dpb dpb--' + (layout || 'page') + ' is-readonly dpb--view'}>
          <View dealId={dealId} intake={intake} inst={inst} schema={schema} responses={responses} who={who}
            onEdit={isClient ? null : reopen} onApprove={!isClient && state === 'submitted' ? approve : null} onClose={onClose} onShowForm={() => setShowForm(true)} />
        </div>
      );
    }
    const [stLabel, stTone] = STATUS[state] || [state, 'neutral'];
    const nextIdx = open >= 0 && open < sections.length - 1 ? open + 1 : -1;
    const sub = isClient
      ? (readonly ? 'Ответы у дизайнера. Если что-то нужно поменять — напишите ему, он переоткроет анкету.' : 'Отвечайте, как чувствуете — это ориентир для дизайнера, не контракт. Сохраняется само, можно заполнять частями.')
      : (state === 'approved' ? 'Бриф согласован — ссылка клиента закрыта, идём к составу работ.' : state === 'submitted' ? 'Проверьте ответы и согласуйте — после этого ссылка клиента закроется.' : 'Проходите блоки вместе с клиентом или отправьте ему ссылку — ответы общие. Сохраняется само.');
    const who2 = [intake && intake.address, intake && intake.clientName].filter(Boolean).join(' · ');
    return (
      <div className={'dpb dpb--' + (layout || 'page') + (readonly ? ' is-readonly' : '')}>
        <div className="dpb-head">
          <div className="dpb-head-l">
            <div className="dpb-title">{schema.title || 'Бриф на дизайн-проект'}</div>
            <div className="dpb-sub">{who2 ? who2 + ' — ' : ''}{sub}</div>
          </div>
          <div className="dpb-head-r">
            <div className="dpb-prog" title={filled + ' из ' + total + ' ответов'}>
              <div className="dpb-prog-bar"><i style={{ width: progress + '%' }} /></div>
              <span className="t-num">{doneCount}/{sections.length} блоков · {progress}%</span>
            </div>
            <Badge tone={stTone} dot>{stLabel}</Badge>
            {onClose && <button type="button" className="dpb-x" onClick={() => { flush(); onClose(); }} aria-label="Закрыть"><Ic n="x" s={18} /></button>}
          </div>
        </div>
        <div className="dpb-layout">
          <aside className="dpb-rail" aria-label="Блоки анкеты">
            {sections.map((sec, i) => (
              <button key={sec.id || i} type="button" className={'dpb-rail-it' + (i === open ? ' is-open' : '') + (done[i] ? ' is-done' : '') + (i > reached && !readonly ? ' is-ahead' : '')} onClick={() => goTo(i)}>
                <span className="dpb-rail-n">{done[i] ? <Ic n="check" s={12} /> : i + 1}</span>
                <span className="dpb-rail-t">{sec.title}</span>
                <span className="dpb-rail-c t-num">{stats[i].filled}/{stats[i].total}</span>
              </button>
            ))}
          </aside>
          <div className="dpb-main">
            {sections.map((sec, i) => {
              const isOpen = i === open;
              const rows = !isOpen ? sectionSummary(sec, responses, intake) : [];
              const ahead = i > reached && !readonly;
              return (
                <article key={sec.id || i} ref={(el) => { secRefs.current[i] = el; }} className={'dpb-sec' + (isOpen ? ' is-open' : '') + (done[i] ? ' is-done' : '') + (ahead ? ' is-ahead' : '')}>
                  <button type="button" className="dpb-sec-h" onClick={() => (isOpen ? setOpen(-1) : goTo(i))} aria-expanded={isOpen}>
                    <span className="dpb-sec-n">{done[i] && !isOpen ? <Ic n="check" s={13} /> : <Ic n={sec.icon || 'circle'} s={15} />}</span>
                    <span className="dpb-sec-tt">
                      <b>{sec.title}</b>
                      {isOpen && (sec.hint || sec.subtitle) && <span className="dpb-sec-hint">{sec.hint || sec.subtitle}</span>}
                      {!isOpen && rows.length > 0 && <span className="dpb-sec-sum">{rows.slice(0, 5).map(([k, v]) => <span key={k} className="dpb-sum-chip"><i>{k}:</i> {v.length > 60 ? v.slice(0, 58) + '…' : v}</span>)}{rows.length > 5 && <span className="dpb-sum-chip">+{rows.length - 5}</span>}</span>}
                      {!isOpen && !rows.length && <span className="dpb-sec-hint">{ahead ? 'откроется дальше — можно сразу перейти' : (readonly ? 'без ответов' : (sec.hint || 'не заполнено'))}</span>}
                    </span>
                    <span className="dpb-sec-c t-num">{stats[i].filled}/{stats[i].total}</span>
                    <span className="dpb-sec-chev"><Ic n={isOpen ? 'chevron-up' : 'chevron-down'} s={16} /></span>
                  </button>
                  {isOpen && (
                    <div className="dpb-sec-b">
                      {sec.id === 'references' && <RefsSection dealId={dealId} intake={intake} responses={responses} patchTop={patchTop} readonly={readonly} sec={sec} urlsField="referenceUrls" />}
                      {sec.id === 'anti' && <Section section={{ ...sec, fields: (sec.fields || []).filter((f) => f.id !== 'antiUrls') }} responses={responses} canEdit={!readonly} onPatchTop={patchTop} onPatchSection={patchSection} hideTitle upload={{ pid: dealId, kind: 'brief' }} />}
                      {sec.id === 'anti' && <RefsSection dealId={dealId} intake={intake} responses={responses} patchTop={patchTop} readonly={readonly} sec={{ ...sec, fields: [] }} urlsField="antiUrls" title="Антипримеры — картинки и ссылки" />}
                      {sec.id !== 'references' && sec.id !== 'anti' && <Section section={sec} responses={responses} canEdit={!readonly} onPatchTop={patchTop} onPatchSection={patchSection} hideTitle upload={{ pid: dealId, kind: 'brief' }} />}
                      <div className="dpb-sec-f">
                        {i > 0 && <Button variant="secondary" size="md" onClick={() => goTo(i - 1)}>Назад</Button>}
                        <span className="dpb-sec-fs" />
                        {nextIdx >= 0
                          ? <Button variant="accent" size="md" className="dpb-cta" onClick={() => goTo(nextIdx)}>Далее: {sections[nextIdx].title} →</Button>
                          : (!readonly && <Button variant="accent" size="md" className="dpb-cta" onClick={submit}>Отправить бриф</Button>)}
                      </div>
                    </div>
                  )}
                </article>
              );
            })}
          </div>
        </div>
        <div className="dpb-foot">
          {!readonly && <Button variant="accent" size="md" className="dpb-cta" onClick={submit}>Отправить бриф</Button>}
          {!readonly && <span className="dpb-hint">Обязательных полей нет — отправляйте, когда картина ясна. Заполнено {progress}%.</span>}
          {readonly && state === 'submitted' && !isClient && <Button variant="accent" size="md" className="dpb-cta" onClick={approve}><Ic n="check" s={14} />Согласовать бриф</Button>}
          {readonly && state === 'submitted' && !isClient && <span className="dpb-hint">Согласование закрывает ссылку клиента и открывает этап «Работы».</span>}
          {readonly && !isClient && <Button variant="secondary" size="md" onClick={reopen}>Переоткрыть</Button>}
          {readonly && View && <Button variant="ghost" size="md" iconLeft={<Ic n="presentation" s={14} />} onClick={() => setShowForm(false)}>Презентация</Button>}
          {readonly && isClient && <span className="dpb-hint">{state === 'approved' ? 'Бриф согласован дизайнером.' : 'Бриф отправлен дизайнеру — спасибо!'}</span>}
          {onClose && <Button variant="secondary" size="md" onClick={() => { flush(); onClose(); }}>Закрыть</Button>}
        </div>
      </div>
    );
  }

/* поп-ап анкеты для этапа «Дизайн-проект» */
  function DpBriefModal({ onClose, ...props }) {
    useEffect(() => {
      const onKey = (e) => { if (e.key === 'Escape') onClose && onClose(); };
      window.addEventListener('keydown', onKey);
      const prev = document.body.style.overflow; document.body.style.overflow = 'hidden';
      return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
    }, [onClose]);
    return (
      <div className="dpb-modal-bg" onMouseDown={(e) => { if (e.target === e.currentTarget && onClose) onClose(); }}>
        <div className="dpb-modal" role="dialog" aria-modal="true" aria-label="Бриф на дизайн-проект">
          <DpBriefForm {...props} layout="modal" onClose={onClose} />
        </div>
      </div>
    );
  }

window.DpBriefForm = DpBriefForm;
  window.DpBriefModal = DpBriefModal;
  window.DpBrief = { TEMPLATE, ensure, schemaFor, prefill, summary, sectionSummary, sectionStats, markIntake, briefLink, STATUS, syncTasks, listDeals };
})();