/* global React, Msg, Bubble, AttachedFiles, EmptyDoc, DocFrame, AiProg, Btn, now, sleep */
// Сценарий 2 — Распознавание паспорта (ЗАГЛУШКА: любой файл → тестовые данные).
// Визуал взят из макета s1 / s4p (карточка физлица).

window.SCENARIOS = window.SCENARIOS || {};

const TEST_PASSPORT = {
  last: 'Соколов', first: 'Виктор', middle: 'Иванович',
  series: '45 19', number: '728341', code: '242-004',
  issued: 'ОУФМС России по г. Москве', birth: '14.09.1988',
  issueDate: '22.10.2018', address: 'г. Москва, ул. Лермонтова, д. 12, кв. 43',
  inn: '781902387123',
};

function PassportDoc({ p }) {
  return (
    <DocFrame title={`${p.last} ${p.first[0]}. ${p.middle[0]}.`} sub="карточка физлица · паспорт распознан (демо)">
      <div className="docp" style={{ fontFamily: 'inherit', fontSize: 12, gap: 10 }}>
        <div className="bdg" style={{ background: '#d8ebff', color: '#006edd' }}>физлицо · демо</div>
        <div className="cpsec">Паспорт РФ</div>
        <div className="cprow"><span className="k">Фамилия *</span><span className="v auto">{p.last}</span></div>
        <div className="cprow"><span className="k">Имя *</span><span className="v auto">{p.first}</span></div>
        <div className="cprow"><span className="k">Отчество *</span><span className="v auto">{p.middle}</span></div>
        <div className="cprow"><span className="k">Серия / Номер</span><span className="v auto">{p.series} / {p.number}</span></div>
        <div className="cprow"><span className="k">Код подразделения</span><span className="v auto">{p.code}</span></div>
        <div className="cprow"><span className="k">Кем выдан</span><span className="v auto">{p.issued}</span></div>
        <div className="cprow"><span className="k">Дата рождения</span><span className="v auto">{p.birth}</span></div>
        <div className="cprow"><span className="k">Дата выдачи</span><span className="v auto">{p.issueDate}</span></div>
        <div className="cprow"><span className="k">Адрес регистрации</span><span className="v auto">{p.address}</span></div>
        <div className="cpsec">Иные реквизиты</div>
        <div className="cprow"><span className="k">ИНН</span><span className="v auto">{p.inn}</span></div>
      </div>
    </DocFrame>
  );
}

window.SCENARIOS.passport = async function (ctx, { files }) {
  if (!files || !files.length) {
    ctx.expect('passport');
    ctx.setDoc(<DocFrame title="карточка физлица" sub="заполнится из паспорта">
      <EmptyDoc lines={['🪪', 'приложите фото паспорта —\nсоберу карточку физлица']} />
    </DocFrame>);
    ctx.ai('Пришлите фото или скан паспорта (кнопка 📎). Распознаю ФИО, дату рождения, серию и номер, соберу карточку физлица. Это демо-распознавание — данные тестовые.');
    return;
  }

  ctx.ai('Принято. Анализирую паспорт…');
  const k = ctx.node(<Msg who="ai" ts={now()}><AiProg icon="🪪" label="распознаю паспорт" pct={70} count="демо" /></Msg>);
  await sleep(1400);
  ctx.remove(k);

  const p = TEST_PASSPORT;
  ctx.setDoc(<PassportDoc p={p} />);
  ctx.aiNode(
    <>
      <Bubble>Готово — распознала паспорт (демо, данные тестовые). Заполнила карточку физлица:</Bubble>
      <div className="cpcard">
        <div className="h"><div className="nm">{p.last} {p.first} {p.middle}</div><div className="ok">✓ паспорт РФ (демо)</div></div>
        <div className="cprow"><span className="k">ФИО *</span><span className="v auto">{p.last} {p.first} {p.middle}</span></div>
        <div className="cprow"><span className="k">Серия / Номер</span><span className="v auto">{p.series} · {p.number}</span></div>
        <div className="cprow"><span className="k">Код / кем выдан</span><span className="v auto">{p.code} · {p.issued}</span></div>
        <div className="cprow"><span className="k">Дата рождения</span><span className="v auto">{p.birth}</span></div>
        <div className="cprow"><span className="k">ИНН</span><span className="v auto">{p.inn}</span></div>
      </div>
      <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 6 }}>◦ зелёным — поля из паспорта · это демонстрационные данные заглушки</div>
      <div className="acta">
        <Btn kind="primary" onClick={() => {
          ctx.you('Сохрани как контрагента-физлицо');
          ctx.aiNode(<Bubble><span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <span style={{ fontSize: 24, color: '#1f6b3a' }}>✓</span>
            <span>Готово. <b>{p.last} {p.first} {p.middle}</b> добавлен как контрагент-физлицо (демо). Теперь доступен по <span className="amen cp"><span className="t">👤</span>{p.last} {p.first[0]}.{p.middle[0]}.</span> в любом документе.</span>
          </span></Bubble>);
        }}>Сохранить контрагента →</Btn>
        <Btn kind="dashed" onClick={() => {
          ctx.you('Подставь эти данные в договор');
          ctx.ai('Подставлю ФИО и паспортные данные в поля документа. Выберите шаблон командой «заполни договор по шаблону».');
        }}>Подставить в документ</Btn>
      </div>
    </>
  );
};