// MDM SORP — AI import wizard (6.8).

const { useState, useEffect, useMemo, useRef, useCallback, createContext, useContext } = React;

function ImportScreen({ navigate }) {
  const { t, lang } = useI18n();
  const toast = useToast();
  const data = window.DATA.importRows;
  const [step, setStep] = useState(1); // 0=upload 1=mapping 2=preview 3=dryrun 4=apply

  const steps = [
    { id: 0, label: t("import_step_upload") },
    { id: 1, label: t("import_step_mapping") },
    { id: 2, label: t("import_step_preview") },
    { id: 3, label: t("import_step_dryrun") },
    { id: 4, label: t("import_step_apply") },
  ];

  return (
    <div style={{ flex: 1, overflow: "auto" }}>
      <div className="grid-toolbar">
        <h2>{t("import_title")}</h2>
        <span className="count">{data.fileName}</span>
        <div style={{ flex: 1 }}/>
        <button className="btn ghost sm" onClick={() => navigate("home")}><Icon name="x" size={12}/> Закрыть мастер</button>
      </div>

      <div style={{ padding: "16px 24px 0", background: "var(--bg-surface)", borderBottom: "1px solid var(--border-subtle)" }}>
        <div className="steps">
          {steps.map(s => (
            <div key={s.id} className={"step " + (s.id === step ? "active" : s.id < step ? "done" : "")} onClick={() => setStep(s.id)}>
              <div className="n">{s.id < step ? <Icon name="check" size={11}/> : s.id + 1}</div>
              <span>{s.label}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="wizard">
        <div className="wizard-main">
          {step === 0 && <StepUpload onNext={() => setStep(1)}/>}
          {step === 1 && <StepMapping data={data} onPrev={() => setStep(0)} onNext={() => setStep(2)}/>}
          {step === 2 && <StepPreview data={data} onPrev={() => setStep(1)} onNext={() => setStep(3)}/>}
          {step === 3 && <StepDryRun data={data} onPrev={() => setStep(2)} onNext={() => { setStep(4); toast("Импорт запущен · 47 строк в очередь обогащения", { onUndo: () => {} }); }}/>}
          {step === 4 && <StepDone onClose={() => navigate("enrichment")}/>}
        </div>
        <div style={{ width: 280, flexShrink: 0 }}>
          <div className="card">
            <div className="card-head"><Icon name="info" size={14}/> <h3>{lang === "ru" ? "Распознано ИИ" : "AI detected"}</h3></div>
            <div className="card-body" style={{ fontSize: 12, lineHeight: 1.6 }}>
              <div className="row" style={{ justifyContent: "space-between" }}><span className="muted">Файл</span><span className="mono">{data.fileName}</span></div>
              <div className="row" style={{ justifyContent: "space-between" }}><span className="muted">Лист</span><span>{data.sheet}</span></div>
              <div className="row" style={{ justifyContent: "space-between" }}><span className="muted">Тип</span><span>{data.detected}</span></div>
              <div className="row" style={{ justifyContent: "space-between" }}><span className="muted">Привязка</span><span className="mono">SORP-3955</span></div>
              <div className="divider"/>
              <div className="row" style={{ justifyContent: "space-between" }}><span className="muted">Строк</span><span className="tabular">47</span></div>
              <div className="row" style={{ justifyContent: "space-between" }}><span className="muted">Колонок</span><span className="tabular">{data.columns.length}</span></div>
              <div className="row" style={{ justifyContent: "space-between" }}><span className="muted">Неуверенных</span><span className="tabular" style={{ color: "var(--status-warning)" }}>{data.columns.filter(c => c.uncertain).length}</span></div>
              <div className="row" style={{ justifyContent: "space-between" }}><span className="muted">Не сопоставлено</span><span className="tabular" style={{ color: "var(--sorp-red)" }}>{data.columns.filter(c => c.unmapped).length}</span></div>
            </div>
          </div>
          <div className="card" style={{ marginTop: 12 }}>
            <div className="card-head"><Icon name="sparkle" size={14}/> <h3>{lang === "ru" ? "Что предложил ИИ" : "AI proposals"}</h3></div>
            <div className="card-body" style={{ fontSize: 12, lineHeight: 1.55 }}>
              <div style={{ marginBottom: 8 }}><strong>«Артикул производителя» → name_requested</strong><div className="muted">высокий confidence по образцам — артикулы SKF/NSK</div></div>
              <div style={{ marginBottom: 8 }}><strong>Колонка «Валюта» неполная</strong><div className="muted">в 3 строках валюта попала в цену («$ 480»). Распарсить?</div></div>
              <div><strong>«Коммент» не сопоставлено</strong><div className="muted">сохранить как deal_item.notes?</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function StepUpload({ onNext }) {
  const { lang, t } = useI18n();
  return (
    <div>
      <div className="card" style={{ padding: 40, textAlign: "center" }}>
        <Icon name="upload" size={32} className="muted"/>
        <h3 style={{ marginTop: 10 }}>{t("import_drop")}</h3>
        <div className="muted">{t("import_drop_sub")}</div>
        <div style={{ marginTop: 20 }}>
          <button className="btn primary" onClick={onNext}><Icon name="upload" size={13}/> Выбрать файл</button>
        </div>
        <div style={{ marginTop: 32 }}>
          <div className="t-eyebrow" style={{ marginBottom: 8 }}>Целевая сущность</div>
          <div className="row" style={{ gap: 8, justifyContent: "center" }}>
            <button className="filter-pill active">Спецификация (deal_item) <span className="x">×</span></button>
            <button className="filter-pill">Контрагенты (party)</button>
            <button className="filter-pill">Номенклатура</button>
            <button className="filter-pill">Документы</button>
          </div>
        </div>
      </div>
      <div className="card" style={{ marginTop: 12 }}>
        <div className="card-head"><Icon name="history" size={14}/> <h3>Недавние импорты</h3></div>
        <div>
          {[
            { name: "Equipment_RFQ_Severstal_2026-05.xlsx", when: "2 мин назад", status: "in-progress" },
            { name: "Suppliers_China_export_2026-04.csv", when: "вчера", status: "done", rows: 142 },
            { name: "Drive_dump_SORP-3929.zip", when: "3 дня назад", status: "done", rows: 18 },
            { name: "AmoCRM_full_export_2026-Q1.csv", when: "10 апр", status: "partial", rows: 1842, err: 14 },
          ].map((r, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 16px", borderBottom: "1px solid var(--neutral-100)", fontSize: 12 }}>
              <Icon name="file" size={14} className="muted"/>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 500 }}>{r.name}</div>
                <div className="muted" style={{ fontSize: 11 }}>{r.when}{r.rows ? ` · ${r.rows} строк` : ""}{r.err ? ` · ${r.err} с ошибкой` : ""}</div>
              </div>
              {r.status === "done" && <Chip tone="success">Готово</Chip>}
              {r.status === "in-progress" && <Chip tone="warning">В работе</Chip>}
              {r.status === "partial" && <Chip tone="warning">Частично</Chip>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function StepMapping({ data, onPrev, onNext }) {
  const { t, lang } = useI18n();
  return (
    <>
      <div className="card">
        <div className="card-head">
          <Icon name="link" size={14}/>
          <h3>{lang === "ru" ? "Маппинг колонок" : "Column mapping"}</h3>
          <span style={{ flex: 1 }}/>
          <span className="muted" style={{ fontSize: 11 }}>Перетащите неверные сопоставления стрелкой</span>
        </div>
        <div className="card-body">
          <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr 80px", gap: 8, alignItems: "center" }}>
            <div className="t-eyebrow">Из файла</div>
            <div></div>
            <div className="t-eyebrow">В нашу схему</div>
            <div className="t-eyebrow" style={{ textAlign: "right" }}>Conf.</div>

            {data.columns.map((c, i) => (
              <React.Fragment key={i}>
                <div className="mapping col raw">{c.src}</div>
                <div className="arrow"><Icon name="arrow_right" size={14}/></div>
                <div className={"mapping col target " + (c.uncertain ? "uncertain" : "") + (c.unmapped ? " unmapped" : "")}>
                  {c.unmapped
                    ? <><span className="muted">не сопоставлено</span><button className="btn ghost sm" style={{ marginLeft: "auto" }}>выбрать поле</button></>
                    : <><span className="mono" style={{ fontSize: 12 }}>{c.target}</span></>
                  }
                </div>
                <div style={{ textAlign: "right", fontSize: 11 }} className="tabular">
                  {c.conf > 0 ? <FieldBadge src="ai" conf={c.conf}/> : <span className="muted">—</span>}
                </div>
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
      <div className="row" style={{ justifyContent: "space-between" }}>
        <button className="btn ghost" onClick={onPrev}>{t("prev")}</button>
        <div className="row">
          <span className="muted" style={{ fontSize: 12, marginRight: 12 }}>2 неуверенно · 1 не сопоставлено</span>
          <button className="btn primary" onClick={onNext}>{t("next")} <Icon name="arrow_right" size={12}/></button>
        </div>
      </div>
    </>
  );
}

function StepPreview({ data, onPrev, onNext }) {
  const { t, lang } = useI18n();
  return (
    <>
      <div className="card">
        <div className="card-head"><Icon name="eye" size={14}/> <h3>{lang === "ru" ? "Предпросмотр после нормализации" : "Preview after normalization"}</h3>
          <span style={{ flex: 1 }}/><span className="muted" style={{ fontSize: 11 }}>Показаны первые 6 из 47</span>
        </div>
        <table className="dg dense">
          <thead>
            <tr><th>idx</th><th>name_requested</th><th className="num">qty</th><th className="num">price_buy</th><th>currency</th><th className="num">lead_days</th><th>Статус</th></tr>
          </thead>
          <tbody>
            {data.preview.map((r, i) => (
              <tr key={i}>
                <td className="mono">{r.idx}</td>
                <td><span className="v">{r.art}</span></td>
                <td className="num tabular">{r.qty}</td>
                <td className="num tabular">{r.price}</td>
                <td className="mono">{r.ccy}</td>
                <td className="num tabular">{r.lead == null ? <span className="empty-cell">—</span> : r.lead + "д"}</td>
                <td>
                  {r.status === "ok" && <Chip tone="success">OK</Chip>}
                  {r.status === "warn" && <Chip tone="warning" title={r.note}><Icon name="alert" size={11}/> {r.note}</Chip>}
                  {r.status === "bad" && <Chip tone="danger" title={r.note}>{r.note}</Chip>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="row" style={{ justifyContent: "space-between" }}>
        <button className="btn ghost" onClick={onPrev}>{t("prev")}</button>
        <button className="btn primary" onClick={onNext}>{t("next")} → Dry-run <Icon name="arrow_right" size={12}/></button>
      </div>
    </>
  );
}

function StepDryRun({ data, onPrev, onNext }) {
  const { t, lang } = useI18n();
  const dry = data.dry_run;
  return (
    <>
      <div className="dashboard-grid" style={{ padding: 0 }}>
        <div className="kpi"><div className="lbl">Всего строк</div><div className="v tabular">47</div><div className="muted">распарсено</div></div>
        <div className="kpi"><div className="lbl">Готово к загрузке</div><div className="v tabular" style={{ color: "var(--status-success)" }}>41</div><div className="muted">валидные</div></div>
        <div className="kpi"><div className="lbl">В очередь обогащения</div><div className="v tabular" style={{ color: "var(--status-warning)" }}>5</div><div className="muted">требуют подтверждения</div></div>
        <div className="kpi"><div className="lbl">Отклонено</div><div className="v tabular" style={{ color: "var(--sorp-red)" }}>1</div><div className="muted">без поставщика</div></div>
      </div>
      <div className="card">
        <div className="card-head"><Icon name="alert" size={14}/> <h3>Найдены проблемы</h3></div>
        <div>
          {[
            { sev: "warn", text: "Строка 3 (32320/Q): валюта пуста → ИИ предложил USD по контексту", action: "Применить" },
            { sev: "warn", text: "Строка 6 (NN3014K/P5): «$ 480» — символ валюты внутри цены → распарсить?", action: "Распарсить" },
            { sev: "bad", text: "Строка 4 (Подшипник 7224): нет поставщика → в очередь сорсинга", action: "Создать запрос" },
            { sev: "warn", text: "12 артикулов уже есть в номенклатуре — связать с существующими?", action: "Связать" },
            { sev: "warn", text: "1 контрагент по TIN совпадает с p_2003 (потенциальный дубль)", action: "Открыть ревью" },
          ].map((p, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 16px", borderBottom: "1px solid var(--neutral-100)", fontSize: 12.5 }}>
              {p.sev === "bad" ? <span className="qdot bad"/> : <span className="qdot warn"/>}
              <span style={{ flex: 1 }}>{p.text}</span>
              <button className="btn ghost sm">{p.action}</button>
            </div>
          ))}
        </div>
      </div>
      <div className="row" style={{ justifyContent: "space-between" }}>
        <button className="btn ghost" onClick={onPrev}>{t("prev")}</button>
        <div className="row" style={{ gap: 8 }}>
          <button className="btn">Скачать отчёт CSV</button>
          <button className="btn primary" onClick={onNext}><Icon name="check" size={13}/> Применить импорт</button>
        </div>
      </div>
    </>
  );
}

function StepDone({ onClose }) {
  return (
    <div className="card" style={{ padding: 48, textAlign: "center" }}>
      <div style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 64, height: 64, borderRadius: 999, background: "rgba(47, 125, 91, 0.10)", color: "var(--status-success)" }}>
        <Icon name="check" size={32}/>
      </div>
      <h2 style={{ marginTop: 16 }}>Импорт применён</h2>
      <div className="muted" style={{ marginTop: 6 }}>41 строка загружена · 5 в очереди обогащения · 1 в сорсинге.</div>
      <div style={{ marginTop: 24 }} className="row" style={{ justifyContent: "center", gap: 8 }}>
        <button className="btn">К сделке SORP-3955</button>
        <button className="btn primary" onClick={onClose}>Открыть очередь обогащения</button>
      </div>
    </div>
  );
}

window.ImportScreen = ImportScreen;