const { useState, useEffect, useMemo, useCallback } = React;

// ------------------------------------------------------------ api
async function api(path, opts = {}) {
  const r = await fetch(path, {
    method: opts.method || (opts.body ? "POST" : "GET"),
    headers: opts.body ? { "Content-Type": "application/json" } : {},
    body: opts.body ? JSON.stringify(opts.body) : undefined,
    credentials: "same-origin",
  });
  let data = null;
  try { data = await r.json(); } catch (e) {}
  if (r.status === 401 && path !== "/api/login") { window.dispatchEvent(new Event("vc-logout")); }
  if (!r.ok) { const err = new Error((data && data.detail) || `Ошибка ${r.status}`); err.status = r.status; throw err; }
  return data;
}

// ------------------------------------------------------------ роутинг по hash
function parseHash() {
  const [path, qs] = (location.hash.replace(/^#/, "") || "/").split("?");
  const q = Object.fromEntries(new URLSearchParams(qs || ""));
  return { parts: path.split("/").filter(Boolean), q };
}
function go(path) { location.hash = path; }
function useRoute() {
  const [r, setR] = useState(parseHash());
  useEffect(() => { const f = () => setR(parseHash()); addEventListener("hashchange", f); return () => removeEventListener("hashchange", f); }, []);
  return r;
}

const fmtTime = (iso) => {
  if (!iso) return "";
  const d = new Date(iso), now = new Date();
  const hm = d.toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit" });
  if (d.toDateString() === now.toDateString()) return `сегодня ${hm}`;
  const y = new Date(now); y.setDate(now.getDate() - 1);
  if (d.toDateString() === y.toDateString()) return `вчера ${hm}`;
  return d.toLocaleDateString("ru-RU", { day: "2-digit", month: "2-digit" }) + " " + hm;
};
const PROV = { mattrio: "MATTRIO", shichedao: "SHICHEDAO" };
function ConfirmModel({ v, onDone }) {
  // Подтверждают свои. Подтверждённое перестаёт быть предположением — и для всех,
  // кто откроет эту машину потом.
  const [busy, setBusy] = useState("");
  const [err, setErr] = useState("");
  const [other, setOther] = useState(false);
  if (!v || !v.vin) return null;
  const save = async (model) => {
    setBusy(model); setErr("");
    try { await api("/api/confirm", { body: { vin: v.vin, model } }); onDone && onDone(); }
    catch (e) { setErr(e.message); } finally { setBusy(""); }
  };
  if (v.confirmed) return (
    <div className="kv mt">Модель подтвердил {v.confirmed.who}{v.confirmed.at ? `, ${fmtTime(v.confirmed.at)}` : ""}.{" "}
      <a href="#" onClick={async (e) => { e.preventDefault(); await api(`/api/confirm/${v.vin}`, { method: "DELETE" }); onDone && onDone(); }}>снять</a></div>
  );
  return (
    <>
      <div className="row wrap mt confirmrow">
        {v.models_many && <span className="kv">Знаете точно? Подтвердите:</span>}
        {v.models_many && v.models.map((m) => (
          <button key={m} type="button" className="btn ghost small" disabled={!!busy} onClick={() => save(m)}>
            {busy === m ? "…" : m}</button>))}
        {/* «Другая машина» нужна и тогда, когда кандидат один: ошибиться каталог может и уверенно */}
        <button type="button" className="btn ghost small" disabled={!!busy}
                onClick={() => setOther(!other)}>Другая машина</button>
        {err && <span className="kv" style={{ color: "var(--err)" }}>{err}</span>}
      </div>
      {other && <OtherCar v={v} onDone={() => { setOther(false); onDone && onDone(); }} />}
    </>
  );
}

// Расхождение, а не переименование: каталог останется прежним, и под чужим именем он врал бы
// убедительнее. Поэтому машину только помечаем и зовём разбираться людей.
function OtherCar({ v, onDone }) {
  const [names, setNames] = useState(null);
  const [model, setModel] = useState("");
  const [src, setSrc] = useState("ПТС");
  const [busy, setBusy] = useState(false), [err, setErr] = useState("");
  useEffect(() => { api("/api/models").then(setNames).catch(() => setNames([])); }, []);
  const send = async (e) => {
    e.preventDefault(); setBusy(true); setErr("");
    try { await api("/api/mismatch", { body: { vin: v.vin, model, source: src } }); onDone && onDone(); }
    catch (x) { setErr(x.message); } finally { setBusy(false); }
  };
  return (
    <form className="card mt" onSubmit={send} style={{ maxWidth: 520 }}>
      <div className="label">Это другая машина</div>
      <div className="kv" style={{ marginBottom: 10 }}>Имя машины мы не поменяем: каталог остался
        тем же. Пометим VIN и разберёмся.</div>
      <label htmlFor="omodel" className="sr">Какая это модель</label>
      <input id="omodel" className="field" list="modelnames" value={model} placeholder="Какая это модель"
             onChange={(e) => setModel(e.target.value)} />
      <datalist id="modelnames">{(names || []).map((n) => <option key={n} value={n} />)}</datalist>
      <label htmlFor="osrc" className="label mt">Откуда знаете</label>
      <select id="osrc" className="field" value={src} onChange={(e) => setSrc(e.target.value)}>
        <option>ПТС</option><option>заказ</option><option>владелец</option>
      </select>
      <div className="row mt">
        <button className="btn small" disabled={busy || !model.trim()}>{busy ? "…" : "Сообщить"}</button>
      </div>
      {err && <div className="err">{err}</div>}
    </form>
  );
}

function MaybeModels({ v, compact }) {
  if (!v || !v.models_many) return null;
  return (
    <div className={compact ? "kv" : "note"} style={compact ? { color: "var(--warn-ink)" } : { marginTop: 8 }}>
      <b>Возможные модели, уточните по машине:</b>{" "}
      {v.models.join(" · ")}
      {!compact && <div className="kv mt">Поставщик отдаёт одно название на несколько российских моделей,
        и VIN между ними не различает. Подтвердить модель может только владелец — по документам или шильдику.</div>}
    </div>
  );
}

function plural(n, one, few, many) {
  const a = Math.abs(n) % 100, b = a % 10;
  if (a > 10 && a < 20) return many;
  if (b > 1 && b < 5) return few;
  if (b === 1) return one;
  return many;
}
const count = (n, one, few, many) => `${n} ${plural(n, one, few, many)}`;

// Кто из наших: только им показываем служебные подсказки вроде «админка → Модели».
let STAFF = false;

const carTitle = (v) => v.alias || v.untranslated || [v.brand_ru || v.brand, v.sys].filter(Boolean).join(" ");

// ------------------------------------------------------------ шапка
function Top({ me, ctx, onLogout }) {
  return (
    <div className="top">
      <div style={{ display: "flex", alignItems: "baseline", gap: 14, minWidth: 0 }}>
        <a className="brandname" href="#/">ПОДБОР ПО VIN</a>
        {ctx && <span className="ctx">{ctx}</span>}
      </div>
      <div className="right">
        {me.admin && <a href="#/admin">админка</a>}
        {me.usage && me.usage.requests_limit >= 0 && <a href="#/cabinet">тариф и оплата</a>}
        <span><span className="qlabel">запросов VIN осталось </span><span className="qshort">VIN: </span><span className="q">{me.quota && me.quota.left != null ? me.quota.left : "—"}</span></span>
        {me.usage && me.usage.requests_limit >= 0 && (
          // внутреннему арендатору остаток не показываем: у него лимитов нет
          <span className="left" title="Остаток по тарифу на этот месяц">
            <span className="qlabel">осталось </span>
            <b>{Math.max(0, me.usage.requests_limit - me.usage.requests_used)}</b> номеров
            {" · "}<b>{Math.max(0, me.usage.vin_limit - me.usage.vin_used)}</b> машин
          </span>
        )}
        <button className="who" onClick={onLogout} title="Выйти">{me.name}</button>
      </div>
    </div>
  );
}

// ------------------------------------------------------------ 0. вход по ПИН
function LoginByLink({ token, to }) {
  const [err, setErr] = useState("");
  useEffect(() => {
    api("/api/login/link", { body: { token } })
      // из бота приходят и «просто вход», и «вход сразу на оплату» — второе не должно
      // заставлять человека искать нужный раздел руками
      .then(() => { location.hash = to ? `#/${to}` : "#/"; location.reload(); })
      .catch((e) => setErr(e.message));
  }, [token]);
  return <div className="page"><div className="card">
    {err ? <><div className="err">{err}</div>
      <p className="muted mt">Напишите боту /start — он пришлёт свежую ссылку.</p></>
      : <div className="muted">Входим…</div>}
  </div></div>;
}

function Login({ onIn }) {
  const [pin, setPin] = useState(""), [err, setErr] = useState(""), [busy, setBusy] = useState(false);
  const submit = async (e) => {
    e.preventDefault(); setBusy(true); setErr("");
    try { onIn(await api("/api/login", { body: { pin } })); }
    catch (x) { setErr(x.message); setPin(""); }
    setBusy(false);
  };
  return (
    <div className="pin-wrap">
      <form className="card pin" onSubmit={submit}>
        <h1 style={{ fontSize: 24 }}>Подбор по VIN</h1>
        <p className="muted2" style={{ marginTop: 0 }}>Введите ваш ПИН</p>
        <label htmlFor="pin" className="sr">ПИН</label>
        <input id="pin" className="field" type="password" inputMode="numeric" autoComplete="current-password"
               value={pin} onChange={(e) => setPin(e.target.value)} autoFocus />
        <button className="btn" style={{ width: "100%", marginTop: 14 }} disabled={busy || !pin}>Войти</button>
        {err && <div className="err">{err}</div>}
      </form>
    </div>
  );
}

// ------------------------------------------------------------ 1. главная: VIN + последние
// Ошибки браузера уходят в наш журнал: про белый экран надо узнавать от сервиса, а не от партнёра.
const _reported = new Set();
function reportError(message, where, stack) {
  const key = String(message).slice(0, 120);
  if (_reported.has(key) || _reported.size > 8) return;
  _reported.add(key);
  try {
    fetch("/api/client-error", {
      method: "POST", headers: { "Content-Type": "application/json" }, credentials: "same-origin",
      body: JSON.stringify({ message: String(message), where, stack: String(stack || ""), url: location.href }),
    }).catch(() => {});
  } catch (e) { /* доложить не вышло — не роняем ещё и этим */ }
}
addEventListener("error", (e) => reportError(e.message, "window.onerror", e.error && e.error.stack));
addEventListener("unhandledrejection", (e) => reportError(
  (e.reason && e.reason.message) || e.reason, "promise", e.reason && e.reason.stack));

// Ошибка в одной строке списка не должна уносить весь экран.
class Boundary extends React.Component {
  constructor(props) { super(props); this.state = { err: null }; }
  static getDerivedStateFromError(err) { return { err }; }
  componentDidCatch(err, info) { reportError(err && err.message, this.props.where || "boundary", info && info.componentStack); }
  render() {
    if (!this.state.err) return this.props.children;
    return <div className="note">Эту позицию показать не удалось — мы уже знаем об ошибке.
      {this.props.hint ? <div className="muted mt" style={{ fontSize: 13 }}>{this.props.hint}</div> : null}</div>;
  }
}

function lsGet(k, d) { try { return localStorage.getItem(k) || d; } catch (e) { return d; } }
function lsSet(k, v) { try { localStorage.setItem(k, v); } catch (e) {} }

function Home({ me, onQuota }) {
  const [vin, setVin] = useState(""), [err, setErr] = useState(""), [busy, setBusy] = useState(false);
  const [fixes, setFixes] = useState([]);      // что сервер исправил во введённой строке
  const [prov, setProv] = useState(me.admin ? lsGet("vc_provider", "auto") : "auto");
  const [recent, setRecent] = useState(null);
  const [top, setTop] = useState(null);
  useEffect(() => { api("/api/top").then(setTop).catch(() => setTop([])); }, []);
  const [wmi, setWmi] = useState([]);
  useEffect(() => { api("/api/recent").then(setRecent).catch(() => setRecent([])); api("/api/wmi").then(setWmi).catch(() => {}); }, []);
  const clean = vin.replace(/\s/g, "").toUpperCase();
  const cached = recent && recent.some((r) => r.vin === clean);
  const known = clean.length >= 3 ? wmi.find((w) => w.wmi === clean.slice(0, 3) && w.warn !== false) : null;   // HJR: префикс знаем, но пугать нечем — VIN разбирается
  const local = known || (clean.length >= 3 && clean[0] !== "L" && !known ? { wmi: clean.slice(0, 3), generic: true } : null);
  const submit = async (e) => {
    e.preventDefault(); setErr(""); setFixes([]);
    setBusy(true);
    try {
      // разбор строки — на сервере: он же чистит, он же объясняет, что не так
      const c = await api("/api/vin/check", { body: { vin } });
      setFixes(c.fixes || []);
      if (!c.ok) { setErr(c.error.message); setBusy(false); return; }
      if ((c.fixes || []).length) setVin(c.vin);
      const r = await api("/api/vin", { body: { vin: c.vin, provider: prov === "auto" ? undefined : prov } });
      onQuota(); go(`/car/${c.vin}?provider=${r.provider}${r.fallback && r.fallback.result === "found" ? `&fb=${r.fallback.from}` : ""}`);
    }
    catch (x) { setErr(x.message); }
    setBusy(false);
  };
  return (
    <div className="page">
      <div className="hero">
        <h1>Введите VIN</h1>
        <p>Система определит модель, год, двигатель и коробку. Размер колёс спросим отдельно — по нему подбираются тормоза.</p>
        <form className="vinbox" onSubmit={submit}>
          <div className="row">
            <label htmlFor="vin" className="sr">VIN номер</label>
            <input id="vin" className="field" value={vin} maxLength={24} placeholder="LVVDD21B3RD747153"
                   onChange={(e) => setVin(e.target.value)} autoFocus spellCheck={false} />
            <button className="btn" disabled={busy}>{busy ? "Определяю…" : "Определить"}</button>
          </div>
          {me.admin && (
            <div className="row wrap" style={{ marginTop: 10, alignItems: "center", fontSize: 13 }}>
              <span className="muted">Поставщик (только для сравнения, видно вам):</span>
              {[["auto", "авто по марке"], ["mattrio", "MATTRIO"], ["shichedao", "SHICHEDAO"]].map(([k, t]) => (
                <button key={k} type="button" className={`btn small ${prov === k ? "" : "ghost"}`} onClick={() => { setProv(k); lsSet("vc_provider", k); }}>{t}</button>
              ))}
            </div>
          )}
          <div className="muted" style={{ fontSize: 13, marginTop: 10 }}>
            {clean.length === 17 && (cached ? "Этот VIN уже определялся — бесплатно, из памяти."
              : "Если VIN найдётся — спишется 1 запрос из квоты (ненайденный не списывается). Повторный ввод того же VIN — бесплатно.")}
          </div>
          {local && !cached && (
            <div className="note" style={{ marginTop: 12 }}>
              {local.china
                ? <><b>Префикс {local.wmi} — {local.brands}, {local.plant}.</b> Машина китайская, но её VIN поставщики не разбирают.</>
                : <>{local.generic
                    ? <b>Префикс {local.wmi} нам незнаком. Чаще всего это сборка вне Китая, но бывают исключения (Jetour китайской сборки — HJR).</b>
                    : <b>Префикс {local.wmi} — {local.brands}, сборка: {local.plant}.</b>} Китайские каталоги VIN местной сборки обычно не знают.</>}
              {" "}Скорее всего, машина не найдётся. Квоту это не тратит: поставщик списывает запрос только за найденный VIN. {local.note}
            </div>
          )}
          {fixes.length > 0 && (
            <div className="note" style={{ marginTop: 10 }}>
              <b>Поправили ввод:</b>
              <ul className="hints">{fixes.map((f, i) => <li key={i}>{f}</li>)}</ul>
            </div>
          )}
          {err && <div className="err">{err}</div>}
        </form>
        {top && top.length > 0 && (
          <div className="card">
            <div className="label">Часто смотрят</div>
            <div className="tiles">
              {top.map((c) => (
                <div key={c.vin} className="topcar">
                  <div className="carname">{c.title}</div>
                  {c.models_many && <div className="kv" style={{ color: "var(--warn-ink)" }}>возможные модели, уточните</div>}
                  <div className="muted2" style={{ fontSize: 13 }}>
                    {[c.year, c.displacement, c.transmission, c.body_ru || c.body, c.fuel_ru].filter(Boolean).join(" · ")}
                  </div>
                  <div className="kv">Двигатель {c.engine || "—"}</div>
                  <div className="mono muted" style={{ fontSize: 12 }}>{c.vin}</div>
                  <div className="mt">
                    <button className="btn" onClick={() => go(c.mjsid ? `/vin/${c.vin}/parts?mjsid=${c.mjsid}` : `/car/${c.vin}`)}>
                      Все запчасти этой комплектации</button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
        <div className="card recent">
          <div className="label">Последние запросы</div>
          {recent === null && <div className="muted">загрузка…</div>}
          {recent && !recent.length && <div className="muted">Пока пусто</div>}
          {recent && recent.map((r) => (
            <a key={r.vin + r.provider} href={`#/car/${r.vin}?provider=${r.provider}`}>
              <span className="mono">{r.vin}</span>
              {r.found ? <span className="muted2">{[r.title, r.engine, r.year].filter(Boolean).join(" · ")} <span className="provtag">{r.provider === "shichedao" ? "SHICHEDAO" : "MATTRIO"}</span></span>
                       : <span style={{ color: "var(--err)" }}>{r.local ? (r.local.generic ? "не найдено — незнакомый префикс" : `не найдено — местная сборка ${r.local.brands} (${r.local.plant})`) : "не найдено в базе"}</span>}
              <span className="muted" style={{ fontSize: 13 }}>{fmtTime(r.last_access)}</span>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

// ------------------------------------------------------------ 2. машина
function RegistryBlock({ vin }) {
  const [r, setR] = useState(null);
  const [err, setErr] = useState("");
  useEffect(() => { setR(null); setErr(""); api(`/api/registry/${vin}`).then(setR).catch((e) => setErr(e.message)); }, [vin]);
  if (err) return <div className="note mt2">Реестр ОТТС не ответил: {err}. Это сбой источника, а не ответ «такой машины нет».</div>;
  if (!r) return <div className="muted mt2">Смотрим в реестре одобрений типа ТС…</div>;
  const hits = r.hits || [];
  const one = hits.length === 1 ? hits[0] : null;
  return (
    <div className="card mt2">
      <b>Реестр ОТТС</b>{" "}
      {hits.length === 0 && <>— ни одна маска одобрения на этот VIN не легла{r.total ? ` (проверили ${r.checked} кандидатов из ${r.total})` : ""}.</>}
      {one && (one.specificity >= 8
        ? <>— это <b>{one.brand} {one.name || ""}</b>.</>
        : <>— марка <b>{one.brand}</b>. Модель реестр не уточняет: в маске <span className="mono">{one.mask}</span> заданы только первые знаки.</>)}
      {hits.length > 1 && <>— подошло {hits.length} одобрений, машина одна из них:</>}
      {hits.length > 1 && (
        <ul>{hits.map((h) => (
          <li key={h.number}><b>{h.brand}{h.name ? ` ${h.name}` : ""}</b> <span className="mono muted">{h.mask}</span> <span className="muted">{h.number}</span></li>
        ))}</ul>
      )}
      {one && <div className="muted mt" style={{ fontSize: 13 }}>Одобрение {one.number}, маска <span className="mono">{one.mask}</span>{one.mods ? `. Модификации: ${one.mods}` : ""}</div>}
      {r.truncated && <div className="muted mt" style={{ fontSize: 13 }}>Кандидатов в реестре больше ({r.total}), смотрели первые {r.checked} — подходящее одобрение могло остаться дальше.</div>}
    </div>
  );
}

function Vehicle({ vin, route, setCtx }) {
  const [v, setV] = useState(null), [err, setErr] = useState("");
  const [showAll, setShowAll] = useState(false);
  const rim = route.q.rim || "";
  const mjsid = route.q.mjsid || "";
  useEffect(() => { api(`/api/vin/${vin}${route.q.provider ? `?provider=${route.q.provider}` : ""}`).then(setV).catch((x) => setErr(x.message)); }, [vin, route.q.provider]);
  useEffect(() => { if (v && v.found && v.provider !== "shichedao") setCtx(`${carTitle(v)} · ${v.displacement || ""} · ${v.vin_year || ""}`); }, [v]);
  if (err) return <div className="page"><div className="err">{err}</div></div>;
  if (!v) return <div className="page muted">загрузка…</div>;
  if (v.found && v.provider === "shichedao") return <VehicleScd v={v} setCtx={setCtx} />;
  if (!v.found) return (
    <div className="page"><div className="card">
      <h1 className="mono" style={{ fontSize: 22 }}>{vin}</h1>
      <p>{v.tried && v.tried.length > 1
        ? <>Проверили оба поставщика — {v.tried.map((x) => PROV[x] || x).join(" и ")}: этого VIN нет ни у одного.</>
        : <>Поставщик не нашёл этот VIN в своей базе (код {v.code}, «{v.msg}»).</>}</p>
      {v.local ? (
        <div className="note">
          {v.local.china
            ? <><b>Почему: префикс {v.local.wmi} — это {v.local.brands}, {v.local.plant}.</b> Машина китайская, но её VIN
              поставщики не разбирают — так бывает у отдельных марок. {v.local.note}</>
            : <>{v.local.generic
                ? <b>Почему: префикс {v.local.wmi} нам незнаком — скорее всего, сборка вне Китая либо марка не покрыта поставщиком.</b>
                : <b>Почему: префикс {v.local.wmi} — это {v.local.brands}, сборка «{v.local.plant}».</b>} Китайские каталоги знают VIN китайских заводов,
              а у машин местной сборки свой код завода — такие VIN в их базе отсутствуют. {v.local.note}</>}
        </div>
      ) : (
        <div className="info">Префикс <span className="mono">{vin.slice(0, 3)}</span> в нашем списке местных сборок не значится. Возможные причины: марка не
          покрыта поставщиком, ошибка в VIN, или это местная сборка, которой ещё нет в списке (Вадим может добавить её в админке → Префиксы).</div>
      )}
      {v.local && v.local.donor && (
        <div className="card mt2" style={{ background: "var(--brand-soft)", border: "none" }}>
          <b>Это {v.local.donor.brand} {v.local.donor.model}</b> — узнали по префиксу <span className="mono">{v.local.donor.prefix}</span>. {v.local.donor.note}
          {v.local.donor.donor_vin ? (
            <div className="mt">
              <button className="btn" onClick={() => go(`/car/${v.local.donor.donor_vin}`)}>Открыть каталог по китайской машине той же модели</button>
              <div className="muted mt" style={{ fontSize: 13 }}>Номера деталей будут от китайского VIN <span className="mono">{v.local.donor.donor_vin}</span>.
                Платформа совпадает по позициям 4-8 VIN, но это не гарантия: сверяйте деталь по фото и размеру.</div>
            </div>
          ) : <div className="muted mt" style={{ fontSize: 13 }}>Китайской машины этой модели у нас пока не было — как встретится, Вадим добавит её в админке → Доноры.</div>}
        </div>
      )}
      {v.local && v.local.scd_models && (
        <div className="card mt2" style={{ background: "var(--brand-soft)", border: "none" }}>
          <b>Можно открыть каталог по модели.</b> {v.local.china
            ? <>Поставщик не разобрал этот VIN, но каталог {v.local.brands} у SHICHEDAO есть — откройте его по модели.</>
            : <>У SHICHEDAO есть версии {v.local.brands} для российского рынка — выберите модель машины.</>}
          <div className="mt"><button className="btn" onClick={() => go(`/scd-${v.local.scd_brands ? "brands" : "models"}/${v.local.wmi}`)}>
            {v.local.scd_brands ? "Выбрать марку и модель" : `Выбрать модель ${v.local.brands}`}</button></div>
          <div className="muted mt" style={{ fontSize: 13 }}>Точность ниже, чем по VIN: каталог покажет все варианты модели, комплектацию сверяйте по машине.</div>
        </div>
      )}
      {v.local && (v.local.vds_donors || []).length > 0 && (
        <div className="card mt2">
          <b>Похожие по платформе — это предположение, не факт.</b> У этих китайских машин те же позиции 4-8 VIN
          (<span className="mono">{v.local.vds}</span>), значит платформа, скорее всего, общая. Модель это не доказывает:
          одни и те же позиции встречаются у разных моделей. Сверяйте деталь по фото и размеру.
          <ul>
            {v.local.vds_donors.map((g) => (
              <li key={`${g.brand}|${g.model}`} className="mt">
                {g.model_ru || g.model}{g.model_ru ? <span className="zh"> {g.model}</span> : null}{" "}
                {g.vins.map((x) => (
                  <button key={x.vin} className="btn mono" style={{ marginRight: 6 }} onClick={() => go(`/car/${x.vin}`)}>{x.vin}</button>
                ))}
              </li>
            ))}
          </ul>
        </div>
      )}
      <RegistryBlock vin={vin} />
      <p className="muted">Ответ сохранён — повторный ввод бесплатный. <a href="#/">Другой VIN</a></p>
    </div></div>
  );
  const setQ = (patch) => {
    const q = new URLSearchParams({ ...route.q, ...patch });
    [...q.keys()].forEach((k) => { if (!q.get(k)) q.delete(k); });
    go(`/vin/${vin}?${q}`);
  };
  const matches = (t) => !rim || t.rim === rim;
  // год из VIN сужает набор; если ни одна комплектация под него не подошла — показываем все
  const yearKnown = v.trims.some((t) => t.vin_year);
  const vinYear = yearKnown ? v.trims.filter((t) => t.vin_year) : v.trims;
  const other = yearKnown ? v.trims.filter((t) => !t.vin_year) : [];
  const sorted = (list) => [...list].sort((a, b) => (matches(b) - matches(a)));
  const selected = v.trims.find((t) => t.mjsid === mjsid);
  const rimMatchVinYear = rim ? vinYear.filter(matches) : [];
  const TrimRow = (t) => (
    <button key={t.mjsid} type="button" onClick={() => setQ({ mjsid: t.mjsid })}
            className={`trim ${rim && matches(t) ? "match" : ""} ${rim && !matches(t) ? "dim" : ""} ${t.mjsid === mjsid ? "sel" : ""}`}>
      <span className="dot" />
      <span className="name">
        <div>{t.salesName_ru || t.salesName}</div>
        <div className="zh">{t.salesName} · <span className="mono">{t.mjsid}</span></div>
      </span>
      <span>{t.drive_ru || t.drive}</span>
      <span className="mono" style={{ color: matches(t) && rim ? "var(--brand)" : "var(--ink2)", fontWeight: 500 }}>{t.frontTyre || "—"}</span>
      <span className="muted">{t.year}</span>
    </button>
  );
  return (
    <div className="page" style={{ display: "flex", flexDirection: "column", gap: 20 }}>
      <div className="card">
        <h1>{v.confirmed ? v.confirmed.model : carTitle(v)}</h1>
        <MaybeModels v={v} />
        <ConfirmModel v={v} onDone={() => api(`/api/vin/${vin}`).then(setV).catch(() => {})} />
        {!v.alias && <div className="muted2"><b style={{ color: "var(--ink)" }}>{v.untranslated || `${v.brand} ${v.sys}`}</b> — без перевода
          {STAFF && " (русское название задаётся в админке → Модели)"}</div>}
        <div className="facts">
          <div><div className="k">VIN</div><div className="v">{v.vin}</div></div>
          <div><div className="k">Двигатель</div><div className="v">{[v.engine, v.displacement].filter(Boolean).join(" · ")}</div></div>
          <div><div className="k">Коробка</div><div className="v">{v.transmission || "—"}</div></div>
          <div><div className="k">Год по VIN</div><div className="v">{v.vin_year || "—"}</div></div>
          <div><div className="k">Кузов</div><div className="v" style={{ fontFamily: "var(--sans)" }}>{[v.body, v.fuel].filter(Boolean).join(" · ")}</div></div>
        </div>
      </div>

      <div className="card">
        <div className="label">Размер колёс — по нему подбираются тормоза</div>
        <div className="rimq">
          <span style={{ fontSize: 16 }}>Спросите клиента:</span>
          {v.rims.map((r) => (
            <button key={r.rim} type="button" className={`chip ${rim === r.rim ? "on" : ""}`}
                    onClick={() => setQ({ rim: rim === r.rim ? "" : r.rim, mjsid: "" })}>{r.rim}</button>
          ))}
        </div>
        <div className="muted" style={{ fontSize: 13, marginTop: 10 }}>
          VIN размер колёс не определяет. {v.rims.map((r) => `${r.rim}: ${r.tyres.join(", ")}`).join(" · ")}
        </div>
      </div>

      <div className="note">
        По VIN поставщик отдаёт <b>{count(v.trims.length, "комплектацию", "комплектации", "комплектаций")}</b> за {v.years.join(", ")} гг. — до одной не сужает.
        {rim && rimMatchVinYear.length === 1 && <> Для {v.vin_year} года и {rim} подходит одна — выберите её.</>}
        {rim && rimMatchVinYear.length > 1 && <> Для {v.vin_year} года и {rim} подходят {rimMatchVinYear.length}: для тормозов разницы обычно нет, для салона и электрики может понадобиться уточнение.</>}
      </div>

      <div>
        <div className="label">{yearKnown ? `Комплектации ${v.vin_year} года` : "Все комплектации (год из VIN ни с одной не совпал)"}{rim ? ` · ${rim} выделены` : ""}</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {sorted(vinYear).map(TrimRow)}
          {!showAll && other.length > 0 && (
            <button type="button" className="linkbtn" style={{ alignSelf: "flex-start", background: "none", padding: 0 }}
                    onClick={() => setShowAll(true)}>Другие годы выпуска ({other.length})</button>
          )}
          {showAll && sorted(other).map(TrimRow)}
        </div>
      </div>

      <div style={{ display: "flex", justifyContent: "flex-end", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
        {!selected && <span className="muted">{rim ? "Выберите комплектацию" : "Сначала размер колёс, потом комплектация"}</span>}
        <button className="btn" disabled={!selected}
                onClick={() => go(`/vin/${vin}/parts?mjsid=${mjsid}${rim ? `&rim=${rim}` : ""}`)}>Перейти к подбору деталей</button>
      </div>
    </div>
  );
}

// ------------------------------------------------------------ копирование номера
async function copyText(text) {
  try { await navigator.clipboard.writeText(text); return true; } catch (e) {}
  try {   // запасной путь: старые браузеры / не-https
    const ta = document.createElement("textarea"); ta.value = text; ta.style.position = "fixed"; ta.style.opacity = "0";
    document.body.appendChild(ta); ta.select(); const ok = document.execCommand("copy"); document.body.removeChild(ta); return ok;
  } catch (e) { return false; }
}

function PartNumber({ p, big, small, onRevealed }) {
  // Номера в ответе нет, пока он не раскрыт — только идентификатор и хвост для узнавания.
  const [num, setNum] = useState(p.partNumber || null);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("");
  useEffect(() => { setNum(p.partNumber || null); }, [p.pn_id, p.partNumber]);
  const reveal = async () => {
    setBusy(true); setErr("");
    try {
      // ключ и группу шлём для статистики спроса: без них видно «раскрыли номер», но не «что искали»
      const r = await api("/api/reveal", { body: { pn_id: p.pn_id, source: p.src || "card",
                                                   key: p.key, group: p.grp || null } });
      setNum(r.part_number);
      if (onRevealed) onRevealed(r);          // замены открываются тем же нажатием, списание одно
      await copyText(r.part_number);
    } catch (e) { setErr(e.message); } finally { setBusy(false); }
  };
  if (!num) return (
    <>
      <button type="button" className="revealbtn" onClick={reveal} disabled={busy || !p.pn_id}>
        {busy ? "…" : "Показать и скопировать"}
      </button>
      {p.pn_tail && <span className="mono muted" style={{ fontSize: 13 }}>···{p.pn_tail}</span>}
      {p.has_subs && <span className="kv">есть замены — откроются вместе с номером</span>}
      {err && <span className="kv" style={{ color: "var(--err)" }}>{err}</span>}
    </>
  );
  return (
    <>
      <span className="pn" style={big ? { fontSize: 18 } : undefined}>{num}</span>
      <CopyBtn text={num} small={small} />
    </>
  );
}

// Копом раскрывать нельзя: платят за то, что нажали. Берём только уже раскрытые.
function copyRevealed(list) {
  const ok = (list || []).map((p) => p.partNumber).filter(Boolean);
  if (ok.length) copyText(ok.join("\n"));
  return ok.length;
}

function CopyBtn({ text, label = "Скопировать номер", small }) {
  const [done, setDone] = useState(null);
  const click = async (e) => { e.stopPropagation(); setDone(await copyText(text) ? "ok" : "err"); setTimeout(() => setDone(null), 1600); };
  return (
    <button type="button" className={`copybtn ${small ? "small" : ""} ${done === "ok" ? "done" : ""}`} onClick={click} aria-label={`${label}: ${text}`}>
      {done === "ok" ? "Скопировано ✓" : done === "err" ? "Не вышло — выделите вручную" : label}
    </button>
  );
}

// ------------------------------------------------------------ подсказки в поле поиска детали
let DICT_CACHE = null;
const PARTNO_RE = /^(?=.*\d)[A-Z0-9][A-Z0-9-]{4,24}$/;   // тот же формат, что на сервере
const normRu = (s) => s.toLowerCase().replace(/ё/g, "е").replace(/\s+/g, " ").trim();

function rankSuggest(dict, q) {
  // с начала → с начала слова → внутри; внутри группы — что чаще реально искали, потом короче
  const score = (ru) => ru.startsWith(q) ? 0 : ru.split(" ").some((w) => w.startsWith(q)) ? 1 : ru.includes(q) ? 2 : -1;
  return dict.map((d) => [score(d.ru), d]).filter(([s]) => s >= 0)
    .sort((a, b) => a[0] - b[0] || b[1].n - a[1].n || a[1].ru.length - b[1].ru.length || a[1].ru.localeCompare(b[1].ru, "ru"))
    .map(([, d]) => d);
}

function Hl({ text, q }) {
  const i = text.indexOf(q);
  if (i < 0 || !q) return text;
  return <>{text.slice(0, i)}<b>{text.slice(i, i + q.length)}</b>{text.slice(i + q.length)}</>;
}

function SuggestInput({ id, value, onChange, onPick, placeholder, autoFocus }) {
  const [dict, setDict] = useState(DICT_CACHE);
  const [open, setOpen] = useState(false), [hi, setHi] = useState(-1);
  useEffect(() => { if (!DICT_CACHE) api("/api/dict/suggest").then((d) => { DICT_CACHE = d; setDict(d); }).catch(() => {}); }, []);
  const qn = normRu(value);
  const isNum = PARTNO_RE.test(value.replace(/\s/g, "").toUpperCase());
  const isZh = /[㐀-鿿]/.test(value);
  const items = useMemo(() => (!dict || qn.length < 2 || isNum || isZh) ? [] : rankSuggest(dict, qn).slice(0, 8), [dict, qn, isNum, isZh]);
  const pick = (s) => { onChange(s.ru); setOpen(false); setHi(-1); onPick(s.ru); };
  const onKey = (e) => {
    if (e.key === "Escape") { setOpen(false); return; }
    if (e.key === "Enter") { if (open && hi >= 0 && items[hi]) { e.preventDefault(); pick(items[hi]); } else setOpen(false); return; }
    if (!items.length) return;
    if (e.key === "ArrowDown") { e.preventDefault(); setOpen(true); setHi((hi + 1) % items.length); }
    else if (e.key === "ArrowUp") { e.preventDefault(); setOpen(true); setHi(hi <= 0 ? items.length - 1 : hi - 1); }
  };
  const lid = id + "-list";
  return (
    <div className="suggest">
      <input id={id} className="field" value={value} placeholder={placeholder} autoFocus={autoFocus} autoComplete="off" spellCheck={false}
             role="combobox" aria-autocomplete="list" aria-expanded={open && items.length > 0} aria-controls={lid}
             aria-activedescendant={hi >= 0 ? `${lid}-${hi}` : undefined}
             onChange={(e) => { onChange(e.target.value); setOpen(true); setHi(-1); }}
             onFocus={() => setOpen(true)} onBlur={() => setTimeout(() => setOpen(false), 150)} onKeyDown={onKey} />
      {open && items.length > 0 && (
        <ul className="suggest-list" role="listbox" id={lid}>
          {items.map((s, i) => (
            <li key={s.ru} id={`${lid}-${i}`} role="option" aria-selected={hi === i} className={hi === i ? "on" : ""}
                onPointerDown={(e) => { e.preventDefault(); pick(s); }} onMouseEnter={() => setHi(i)}>
              <span className="suggest-ru"><Hl text={s.ru} q={qn} /></span>
              {/* китайский ключ — чтобы было видно, если словарь врёт */}
              <span className="zhname small" title="что уйдёт поставщику">{s.zh.join(" · ")}</span>
              {s.zero && <span className="kv" style={{ color: "var(--warn)" }}>на проверке 0 деталей</span>}
              {s.n > 0 && <span className="kv">искали {s.n}</span>}
            </li>
          ))}
        </ul>
      )}
      {open && isNum && <div className="suggest-hint">Поставщик по номеру детали не ищет — введите название</div>}
      {open && dict && qn.length >= 2 && !isNum && !isZh && !items.length && (
        <div className="suggest-hint">Такого слова в словаре нет. Если нажмёте «Найти», запрос запишется — словарь пополним по нему.</div>
      )}
    </div>
  );
}

// ------------------------------------------------------------ живой поиск: при наборе — сразу детали машины
const LIVE_CACHE = new Map();
const LIVE_CFG = { mattrio: { min: 3, delay: 450, max: 3 }, shichedao: { min: 4, delay: 800, max: 2 } };   // SHICHEDAO платный — осторожнее

function liveKeys(dict, qn, max) {
  // словарь невидимо: те же правила ранжирования, что у подсказок; берём первые max разных китайских ключей
  const keys = [], words = {};
  for (const d of rankSuggest(dict, qn)) for (const z of d.zh) {
    if (keys.length < max && !keys.includes(z)) { keys.push(z); words[z] = d.ru; }
  }
  return { keys, words };
}

function LiveInput({ id, value, onChange, veh, onPick, placeholder }) {
  const cfg = LIVE_CFG[veh.provider];
  const [dict, setDict] = useState(DICT_CACHE);
  const [open, setOpen] = useState(false), [hi, setHi] = useState(-1);
  const [items, setItems] = useState([]), [state, setState] = useState("idle");
  const latest = React.useRef("");
  useEffect(() => { if (!DICT_CACHE) api("/api/dict/suggest").then((d) => { DICT_CACHE = d; setDict(d); }).catch(() => {}); }, []);
  const vehKey = veh.provider === "shichedao" ? `scd:${veh.scd_id}` : `${veh.vin}:${veh.mjsid}`;
  useEffect(() => {
    setHi(-1);
    const qn = normRu(value), compact = value.replace(/\s/g, "").toUpperCase();
    const isNum = PARTNO_RE.test(compact), isZh = /[㐀-鿿]/.test(value);
    if (!isNum && !isZh && qn.length < cfg.min) { setItems([]); setState("idle"); latest.current = ""; return; }
    let keys = [], words = {};
    if (!isNum && !isZh) {
      if (!dict) return;
      ({ keys, words } = liveKeys(dict, qn, cfg.max));
      if (!keys.length) { setItems([]); setState("nodict"); latest.current = ""; return; }
    }
    const ck = `${vehKey}|${isNum ? "oe:" + compact : isZh ? "zh:" + value.trim() : keys.join(",")}`;
    latest.current = ck;
    if (LIVE_CACHE.has(ck)) { setItems(LIVE_CACHE.get(ck)); setState("ready"); return; }   // «колод» → «колодк»: ключи те же, запроса нет
    setState("wait");
    const tmr = setTimeout(async () => {
      setState("loading");
      try {
        const body = veh.provider === "shichedao" ? { scd_id: veh.scd_id } : { vin: veh.vin, mjsid: veh.mjsid };
        const r = await api("/api/live", { body: { ...body, q: value, keys } });
        const its = r.items.map((x) => ({ ...x, word: words[x.key] || value.trim() }));
        LIVE_CACHE.set(ck, its);
        if (latest.current === ck) { setItems(its); setState("ready"); }               // устаревший ответ не перетирает свежий
      } catch (e) { if (latest.current === ck) setState("error"); }
    }, cfg.delay);
    return () => clearTimeout(tmr);
  }, [value, dict, vehKey]);
  const shown = items.slice(0, 15);
  // Что отличает эту позицию от соседней с тем же названием: исполнение завода,
  // а если признака нет ни у одной — честно говорим, что это разные исполнения.
  const nameOf = (x) => x.name_ru || x.name || "";
  const featOf = (x) => {
    const m = x.full && x.full.mfr;
    return m ? (m.name_ru || m.name) : "";
  };
  const liveFeature = (it) => {
    const f = featOf(it);
    if (f) return { text: f, warn: false };
    const same = shown.filter((x) => nameOf(x) === nameOf(it));
    if (same.length > 1 && same.every((x) => !featOf(x) && !x.comment_ru))
      return { text: "разные исполнения, уточните по машине", warn: true };
    return { text: "", warn: false };
  };
  const pick = (it) => { setOpen(false); onPick(it, items); };   // отдаём весь список: у позиции бывает несколько заводов
  const onKey = (e) => {
    if (e.key === "Escape") { setOpen(false); return; }
    if (e.key === "Enter") { if (open && hi >= 0 && shown[hi]) { e.preventDefault(); pick(shown[hi]); } else setOpen(false); return; }
    if (!shown.length) return;
    if (e.key === "ArrowDown") { e.preventDefault(); setOpen(true); setHi((hi + 1) % shown.length); }
    else if (e.key === "ArrowUp") { e.preventDefault(); setOpen(true); setHi(hi <= 0 ? shown.length - 1 : hi - 1); }
  };
  const lid = id + "-list";
  return (
    <div className="suggest">
      <input id={id} className="field" value={value} placeholder={placeholder} autoComplete="off" spellCheck={false}
             role="combobox" aria-autocomplete="list" aria-expanded={open && shown.length > 0} aria-controls={lid}
             aria-activedescendant={hi >= 0 ? `${lid}-${hi}` : undefined}
             onChange={(e) => { onChange(e.target.value); setOpen(true); }}
             onFocus={() => setOpen(true)} onBlur={() => setTimeout(() => setOpen(false), 150)} onKeyDown={onKey} />
      {open && shown.length > 0 && (
        <ul className="suggest-list live" role="listbox" id={lid}>
          {shown.map((it, i) => (
            <li key={(it.pn_id || it.key) + i} id={`${lid}-${i}`} role="option" aria-selected={hi === i} className={hi === i ? "on" : ""}
                onPointerDown={(e) => { e.preventDefault(); pick(it); }} onMouseEnter={() => setHi(i)}>
              <span className="live-name">{it.name_ru || it.name}
                {it.comment_ru && <span className="kv" style={{ display: "block", color: "var(--warn-ink)" }}>{it.comment_ru}</span>}</span>
              <span className={`mono live-pn ${it.revealed ? "revealed" : ""}`}>
                {it.partNumber || `···${it.pn_tail || ""}`}</span>
              <span className={`live-price ${liveFeature(it).warn ? "warnfeat" : ""}`}>{liveFeature(it).text}</span>
            </li>
          ))}
          {items.length > shown.length && <li className="kv" style={{ cursor: "default" }}>ещё {items.length - shown.length} — нажмите «Найти», чтобы увидеть все</li>}
        </ul>
      )}
      {open && (state === "wait" || state === "loading") && !shown.length && <div className="suggest-hint">ищу детали этой машины…</div>}
      {open && state === "ready" && !shown.length && <div className="suggest-hint">У этой машины по такому запросу деталей не нашлось.</div>}
      {open && state === "nodict" && <div className="suggest-hint">Такого слова в словаре нет. Нажмите «Найти» — запрос запишется, словарь пополним.</div>}
      {open && state === "error" && <div className="suggest-hint">Поставщик не ответил — нажмите «Найти».</div>}
    </div>
  );
}

// ------------------------------------------------------------ SHICHEDAO
function VehicleScd({ v, setCtx }) {
  useEffect(() => { setCtx(`${v.cars[0].title_ru || v.cars[0].title} · SHICHEDAO`); }, [v]);
  return (
    <div className="page" style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      <div className="card">
        <div className="label">Найдено по VIN · SHICHEDAO</div>
        <h1 style={{ fontSize: 26 }}>{v.cars[0].title_ru || v.cars[0].title}</h1>
        <div className="zh">{v.cars[0].path || v.cars[0].title}</div>
        <div className="facts"><div><div className="k">VIN</div><div className="v">{v.vin}</div></div>
          <div><div className="k">Год</div><div className="v">{v.cars[0].year || "—"}</div></div>
          <div><div className="k">Двигатель</div><div className="v">{[v.cars[0].engine, v.cars[0].engine_desc].filter(Boolean).join(" · ") || "—"}</div></div>
          <div><div className="k">Коробка</div><div className="v" style={{ fontFamily: "var(--sans)" }}>{v.cars[0].gearbox || "—"}</div></div></div>
      </div>
      {v.cars.length > 1 && <div className="note">VIN подходит к {count(v.cars.length, "варианту", "вариантам", "вариантам")} каталога — выберите нужный.</div>}
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {v.cars.map((c) => (
          <button key={c.id} type="button" className="trim match" onClick={() => go(`/scd/${c.id}`)}>
            <span className="name"><div>{c.title_ru || c.title}</div><div className="zh">{c.path || c.title}</div></span>
            <span className="muted">{c.year}</span><span className="linkbtn">Подбор деталей</span>
          </button>
        ))}
      </div>
    </div>
  );
}

function ScdBrands({ wmi, setCtx }) {
  const [d, setD] = useState(null), [err, setErr] = useState("");
  useEffect(() => { api(`/api/scd/brands?wmi=${wmi}`).then(setD).catch((x) => setErr(x.message)); setCtx("выбор марки"); }, [wmi]);
  return (
    <div className="page" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      {err && <div className="err">{err}</div>}
      {!d && !err && <div className="muted">загрузка…</div>}
      {d && <>
        <h1 style={{ fontSize: 26 }}>Префикс {d.wmi}: выберите марку</h1>
        <div className="info">{d.plant}. Под этим префиксом идёт несколько марок ({d.brands}), а VIN поставщики не разбирают.
          Выберите марку — дальше список моделей и каталог по узлам. Привязки деталей к конкретной машине не будет.</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {d.items.map((b) => (
            <button key={b.brand_id} type="button" className="trim" onClick={() => go(`/scd-models/${wmi}?brand=${b.brand_id}`)}>
              <span className="name"><div>{b.name_ru || b.name}</div><div className="zh">{b.name}</div></span><span className="linkbtn">Модели</span>
            </button>
          ))}
          {!d.items.length && <div className="muted">Марок не найдено</div>}
        </div>
      </>}
    </div>
  );
}

function ScdModels({ wmi, setCtx, brand }) {
  const [d, setD] = useState(null), [err, setErr] = useState("");
  useEffect(() => { api(`/api/scd/models?wmi=${wmi}${brand ? `&brand=${brand}` : ""}`).then(setD).catch((x) => setErr(x.message)); setCtx("выбор модели"); }, [wmi, brand]);
  const pick = async (m) => { try { const r = await api("/api/scd/manual", { body: { wmi, series_id: m.series_id, brand } }); go(`/scd/${r.id}`); } catch (x) { setErr(x.message); } };
  return (
    <div className="page" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      {err && <div className="err">{err}</div>}
      {!d && !err && <div className="muted">загрузка…</div>}
      {d && <>
        <h1 style={{ fontSize: 26 }}>{d.brands}: модели российского рынка</h1>
        <div className="info">Префикс {d.wmi} — {d.plant}. По VIN китайские каталоги эту машину не знают, но у SHICHEDAO есть каталоги
          российских версий. Выберите модель — откроется каталог по узлам. Привязки деталей к конкретной машине не будет.</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {d.models.map((m) => (
            <button key={m.series_id} type="button" className="trim" onClick={() => pick(m)}>
              <span className="name"><div>{m.name_ru || m.name}</div><div className="zh">{m.name}</div></span><span className="linkbtn">Открыть</span>
            </button>
          ))}
          {!d.models.length && <div className="muted">Моделей не найдено</div>}
        </div>
      </>}
    </div>
  );
}


function Replaces({ list }) {
  // сразу — актуальный новый номер и старые (вытесненные); остальное (у VW бывает 40+) — по кнопке
  const [all, setAll] = useState(false);
  const main = list.filter((r) => r.latest || r.kind === "older").slice(0, 3);
  const rest = list.filter((r) => !main.includes(r));
  const shown = all ? main.concat(rest) : (main.length ? main : list.slice(0, 3));
  const hidden = list.length - shown.length;
  return (
    <div className="mt" style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <div className="kv">Замены{list.length > shown.length || all ? ` (${list.length})` : ""}:</div>
      {shown.map((r) => (
        <div key={r.number} className="row wrap" style={{ alignItems: "center", gap: 8, fontSize: 14 }}>
          <span className="mono">{r.number}</span>
          <span className="kv">{r.kind === "newer" ? (r.latest ? "актуальный новый номер" : "новее") : r.kind === "older" ? "старый номер" : "замена"}
            {r.date ? ` · ${r.date.split("-").reverse().join(".")}` : ""}</span>
          <CopyBtn text={r.number} label="копировать" small />
        </div>
      ))}
      {(hidden > 0 || all) && <button type="button" className="linkbtn" style={{ alignSelf: "flex-start", background: "none", padding: 0, height: "auto" }}
                                      onClick={() => setAll(!all)}>{all ? "свернуть" : `ещё ${hidden} вариантов замен`}</button>}
    </div>
  );
}

function ScdResults({ res, vid, page, setPage, all }) {
  const [err, setErr] = useState("");
  const jump = async (p) => {
    try { const r = await api(`/api/scd/v/${vid}/jump`, { body: { detail_id: p.detail_id, part_number: p.partNumber } });
          go(`/scd/${vid}/d?${new URLSearchParams({ main: r.main, sub: r.sub, img: r.img, lock: 0 })}`); }
    catch (x) { setErr(x.message); }
  };
  const pages = all ? 1 : Math.ceil(res.parts.length / PAGE);
  const parts = all ? res.parts : res.parts.slice(page * PAGE, page * PAGE + PAGE);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <div className="muted" style={{ fontSize: 13 }}>Найдено {res.parts.length}</div>
      {err && <div className="err">{err}</div>}
      {parts.map((p, i) => (
            <div key={i} className={`part ${p.badge}`}>
              <div style={{ display: "flex", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
                <div style={{ flexGrow: 1, minWidth: 240 }}>
                  <div className="row wrap" style={{ alignItems: "center", gap: 12, marginBottom: 7 }}>
                    <span className="pn">{p.partNumber}</span>
                    <span className={`badge ${BADGE[p.badge].cls}`} title={BADGE_SCD[p.badge]}>{p.badge === "analog" ? "НЕСКОЛЬКО ВАРИАНТОВ" : BADGE[p.badge].text}</span>
                    <CopyBtn text={p.partNumber} />
                  </div>
                  <div className="pname"><span>{p.name_ru || <span className="muted">перевода нет</span>}</span><span className="zhname">{p.name}</span></div>
                  {p.group && p.group !== p.name && <div className="zh">группа: {p.group_ru || p.group}</div>}
                  {(p.memo || p.remark) && <div className="cmt">{[p.memo, p.remark].filter(Boolean).join(" · ")}</div>}
                  {p.replaces && p.replaces.length > 0 && <Replaces list={p.replaces} />}
                </div>
                <div style={{ flexShrink: 0, textAlign: "right", display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 6 }}>
                  {p.pos && <div className="kv">позиция на схеме: <b>{p.pos}</b></div>}
                  {p.price4s && <details><summary className="linkbtn" style={{ background: "none", padding: 0, height: "auto", cursor: "pointer" }}>подробнее</summary>
                    <div className="kv">цена у дилера: <b>{p.price4s} ¥</b></div></details>}
                  {p.has_image && <button className="btn ghost small" onClick={() => jump(p)}>Схема</button>}
                </div>
              </div>
            </div>
          ))}
      <Pager page={page} pages={pages} onPage={(i) => { setPage(i); window.scrollTo({ top: 0, behavior: "smooth" }); }} />
    </div>
  );
}

function ScdCatalog({ vid, route, setCtx }) {
  const { main, sub } = route.q;
  const [v, setV] = useState(null), [mains, setMains] = useState(null), [subs, setSubs] = useState(null), [imgs, setImgs] = useState(null);
  const [err, setErr] = useState(""), [q, setQ] = useState(""), [res, setRes] = useState(null), [busy, setBusy] = useState(false);
  const [treeOpen, setTreeOpen] = useState(Boolean(main));
  useEffect(() => { api(`/api/scd/v/${vid}`).then((x) => { setV(x); setCtx(`${x.title_ru || x.title} · SHICHEDAO`); }).catch((x) => setErr(x.message)); }, [vid]);
  const showTree = treeOpen || (v && v.source !== "vin");     // без VIN поиск закрыт — остаётся только каталог
  useEffect(() => { if (showTree && !mains) api(`/api/scd/v/${vid}/main`).then(setMains).catch((x) => setErr(x.message)); }, [vid, showTree]);
  useEffect(() => { setSubs(null); if (main) api(`/api/scd/v/${vid}/sub?main=${encodeURIComponent(main)}`).then(setSubs).catch((x) => setErr(x.message)); }, [vid, main]);
  useEffect(() => { setImgs(null); if (main && sub) api(`/api/scd/v/${vid}/images?main=${encodeURIComponent(main)}&sub=${encodeURIComponent(sub)}`).then(setImgs).catch((x) => setErr(x.message)); }, [vid, main, sub]);
  const nav = (p) => go(`/scd/${vid}?${new URLSearchParams(p)}`);
  const openDiagram = (m, s, i, lock) => go(`/scd/${vid}/d?${new URLSearchParams({ main: m, sub: s, img: i, lock: lock ?? 0 })}`);
  const search = async (e, text) => {
    if (e) e.preventDefault();
    const qq = (text != null ? text : q).trim();
    if (!qq) return;
    setBusy(true); setErr("");
    try { setRes(await api(`/api/scd/v/${vid}/search`, { body: { q: qq } })); } catch (x) { setErr(x.message); }
    setBusy(false);
  };
  const jump = async (p) => {
    try { const r = await api(`/api/scd/v/${vid}/jump`, { body: { detail_id: p.detail_id, part_number: p.partNumber } }); openDiagram(r.main, r.sub, r.img, 0); }
    catch (x) { setErr(x.message); }
  };
  const mainName = mains && main && (mains.find((x) => x.id === main) || {});
  const subName = subs && sub && (subs.find((x) => x.id === sub) || {});
  return (
    <div className="page" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      {v && <div className="muted2" style={{ fontSize: 14 }}>{v.source === "vin" ? <>По VIN <span className="mono">{v.vin}</span></> : <>Выбрано вручную, без VIN — привязки деталей к машине нет</>}
        {" · "}<span className="provtag">SHICHEDAO</span></div>}
      {err && <div className="err">{err}</div>}
      {v && v.source === "vin" && (
        <form className="row" onSubmit={search}>
          <label htmlFor="sq" className="sr">Деталь</label>
          <SuggestInput id="sq" value={q} onChange={setQ} onPick={(s) => search(null, s)} placeholder="колодки передние · фильтр масляный · стойка стабилизатора" />
          <button className="btn" disabled={busy || !q.trim()}>{busy ? "Ищу…" : "Найти"}</button>
        </form>
      )}
      {res && res.mode === "no_dict" && <div className="note">Слова «{res.q}» нет в словаре. {res.suggestions.length ? "Похожие: " + res.suggestions.join(", ") : ""}</div>}
      {res && res.mode !== "no_dict" && <ScdResults res={res} vid={vid} page={0} setPage={() => {}} all />}
      {v && v.source === "vin" && !showTree && (
        <button type="button" className="btn ghost" style={{ alignSelf: "flex-start" }} onClick={() => setTreeOpen(true)}>Каталог по узлам (схемы)</button>
      )}
      {showTree && <div className="card">
        <div className="row wrap" style={{ alignItems: "center", gap: 6, fontSize: 14, marginBottom: 12 }}>
          <a href={`#/scd/${vid}`}>Узлы</a>
          {main && <>› <a href="#" onClick={(e) => { e.preventDefault(); nav({ main }); }}>{(mainName && (mainName.name_ru || mainName.name)) || main}</a></>}
          {sub && <>› <span>{(subName && (subName.name_ru || subName.name)) || sub}</span></>}
        </div>
        {!main && (mains ? <div className="tree">{mains.map((m) => (
          <button key={m.id} type="button" className="treeitem" onClick={() => nav({ main: m.id })}><span>{m.name_ru || m.name}</span><span className="zhname small">{m.name}</span></button>))}</div>
          : <div className="muted">загрузка узлов…</div>)}
        {main && !sub && (subs ? <div className="tree">{subs.map((s, i) => (
          <button key={s.id + i} type="button" className="treeitem" onClick={() => nav({ main, sub: s.id })}><span>{s.name_ru || s.name}</span><span className="zhname small">{s.name}</span></button>))}</div>
          : <div className="muted">загрузка…</div>)}
        {main && sub && (imgs ? <div className="tree">{imgs.map((g) => (
          <button key={g.id} type="button" className="treeitem" onClick={() => openDiagram(main, g.sub, g.id, g.lock)}><span>{g.name_ru || g.name}</span><span className="zhname small">{g.name}</span></button>))}
          {!imgs.length && <div className="muted">Схем нет</div>}</div>
          : <div className="muted">загрузка схем…</div>)}
      </div>}
    </div>
  );
}

const BADGE_SCD = {
  exact: "SHICHEDAO: деталь однозначно привязана к этому VIN (lock_flag = 1)",
  analog: "SHICHEDAO: подходит к нескольким вариантам — сверьте комплектацию (lock_flag = 2)",
  unknown: "Привязка к машине не определена (выбор модели без VIN или lock_flag 0/3)",
};

function Hotspot({ c, w, h, on, label, onClick }) {
  // координаты в пикселях исходной картинки → проценты, чтобы работало при любом масштабе
  const st = c.kind === "rect"
    ? { left: `${c.x1 / w * 100}%`, top: `${c.y1 / h * 100}%`, width: `${(c.x2 - c.x1) / w * 100}%`, height: `${(c.y2 - c.y1) / h * 100}%` }
    : { left: `calc(${c.x1 / w * 100}% - 16px)`, top: `calc(${c.y1 / h * 100}% - 16px)`, width: 32, height: 32, borderRadius: "50%" };
  return <button type="button" aria-label={`Позиция ${label}`} title={`Позиция ${label}`} className={`hot ${on ? "on" : ""}`} style={st} onClick={(e) => { e.stopPropagation(); onClick(); }} />;
}

function ScdDiagram({ vid, route, setCtx }) {
  const { main, sub, img, lock } = route.q;
  const [d, setD] = useState(null), [err, setErr] = useState(""), [sel, setSel] = useState(null), [full, setFull] = useState(false);
  const [nat, setNat] = useState(null);
  useEffect(() => {
    api(`/api/scd/v/${vid}/diagram?${new URLSearchParams({ main, sub, img, lock: lock || 0 })}`)
      .then((x) => { setD(x); setCtx(`${x.vehicle.title} · схема`); }).catch((x) => setErr(x.message));
  }, [vid, img]);
  const W = (d && d.width) || (nat && nat.w), H = (d && d.height) || (nat && nat.h);
  const withCoords = d ? d.parts.filter((p) => p.coords.length).length : 0;
  const pick = (pos) => { setSel(pos); const el = document.getElementById(`pp-${pos}`); if (el) el.scrollIntoView({ block: "nearest", behavior: "smooth" }); };
  const renderImg = (big) => (
    <div className="hotwrap" onClick={() => !big && setFull(true)}>
      <img src={d.src} alt="Схема узла" onLoad={(e) => setNat({ w: e.target.naturalWidth, h: e.target.naturalHeight })} />
      {W && H && d.parts.map((p) => p.coords.map((c, k) => (
        <Hotspot key={p.partNumber + k} c={c} w={W} h={H} on={sel === p.pos} label={p.pos} onClick={() => pick(p.pos)} />)))}
    </div>
  );
  return (
    <div className="page">
      <div style={{ marginBottom: 14 }}><a href={`#/scd/${vid}?${new URLSearchParams({ main, sub })}`}>← к узлу</a></div>
      {err && <div className="err">{err}</div>}
      {!d && !err && <div className="muted">Загружаю схему…</div>}
      {d && (
        <div className="scheme">
          <div className="card" style={{ padding: 18 }}>
            <div className="row wrap" style={{ justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
              <span><b>{d.name_ru || d.name}</b> <span className="zhname small">{d.name}</span></span>
              <span className="muted" style={{ fontSize: 13 }}>{withCoords ? `кликабельных позиций: ${withCoords}` : "координат нет"} · SHICHEDAO</span>
            </div>
            {d.src ? renderImg(false) : <div className="muted">Картинки схемы нет</div>}
            <div className="muted" style={{ fontSize: 13, marginTop: 10 }}>Нажмите на номер на схеме — деталь подсветится в списке. Нажмите на картинку вне номеров — во весь экран.</div>
          </div>
          <div className="card" style={{ padding: 18 }}>
            <div className="label">Детали на схеме · {d.parts.length}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, maxHeight: "75vh", overflowY: "auto" }}>
              {d.parts.map((p, i) => (
                <div key={i} id={`pp-${p.pos}`} className={`pos ${sel && sel === p.pos ? "on" : ""}`} onClick={() => setSel(p.pos)} style={{ cursor: "pointer" }}>
                  <span className="n">{p.pos || "–"}</span>
                  <div style={{ flexGrow: 1 }}>
                    <div className="mono" style={{ fontSize: 15 }}>{p.partNumber}</div>
                    <div style={{ fontSize: 14 }}>{p.name_ru || <span className="muted">перевода нет</span>} <span className="zhname small">{p.name}</span></div>
                    {p.memo && <div style={{ fontSize: 12, color: "var(--ink2)" }}>{p.memo_ru || p.memo}</div>}
                    <div className="row wrap mt" style={{ gap: 6, alignItems: "center" }}>
                      <span className={`badge ${BADGE[p.badge].cls}`} style={{ fontSize: 10 }} title={BADGE_SCD[p.badge]}>{p.badge === "analog" ? "НЕСКОЛЬКО ВАРИАНТОВ" : BADGE[p.badge].text}</span>
                      {p.qty && <span className="kv">кол-во: <b>{p.qty}</b></span>}{p.years && <span className="kv">{p.years}</span>}
                      {!p.coords.length && <span className="kv">нет на схеме</span>}
                    </div>
                  </div>
                </div>
              ))}
            </div>
            {d.parts.some((p) => p.partNumber) && <button className="btn" style={{ width: "100%", marginTop: 14 }}
              onClick={() => copyRevealed(d.parts)}>Скопировать раскрытые номера</button>}
          </div>
        </div>
      )}
      {full && d && (
        <div className="full" onClick={() => setFull(false)}>
          <button className="btn ghost small" onClick={() => setFull(false)}>Закрыть</button>
          <div style={{ maxWidth: "100%", maxHeight: "100%" }} onClick={(e) => e.stopPropagation()}>{renderImg(true)}</div>
        </div>
      )}
    </div>
  );
}

// ------------------------------------------------------------ экран машины (главный): карточка · группы · поиск · результаты
function ssGet(k) { try { return sessionStorage.getItem(k); } catch (e) { return null; } }
function ssSet(k, v) { try { sessionStorage.setItem(k, v); } catch (e) {} }
const PAGE = 20;

function Crumbs({ items }) {
  return <nav className="crumbs" aria-label="Путь">{items.filter(Boolean).map((x, i, a) => (
    <span key={i}>{x.href ? <a href={x.href}>{x.t}</a> : <span>{x.t}</span>}{i < a.length - 1 && <span className="sep">/</span>}</span>))}</nav>;
}

function Fact({ k, v, mono }) {
  if (v == null || v === "") return null;
  return <div className="fact"><div className="k">{k}</div><div className={`v ${mono ? "mono" : ""}`}>{v}</div></div>;
}

function Pager({ page, pages, onPage }) {
  if (pages <= 1) return null;
  return (
    <div className="row wrap" style={{ gap: 6, alignItems: "center", justifyContent: "center" }}>
      <button className="btn ghost small" disabled={page === 0} onClick={() => onPage(page - 1)}>←</button>
      {Array.from({ length: pages }, (_, i) => (
        <button key={i} className={`btn small ${i === page ? "" : "ghost"}`} onClick={() => onPage(i)}>{i + 1}</button>))}
      <button className="btn ghost small" disabled={page === pages - 1} onClick={() => onPage(page + 1)}>→</button>
    </div>
  );
}

function TrimPicker({ v, trim, onPick, onClose }) {
  const pool = v.trims.filter((t) => t.vin_year).length ? v.trims.filter((t) => t.vin_year) : v.trims;
  const [sel, setSel] = useState(() => Object.fromEntries(v.features.map((f) => [f.key, trim.feat[f.key]])));
  const fits = (s) => pool.filter((t) => v.features.every((f) => !s[f.key] || t.feat[f.key] === s[f.key]));
  const match = fits(sel);
  // выбрал значение, несовместимое с остальными (R19 + передний привод) → остальные подстраиваются под первую подходящую
  const choose = (key, value) => {
    const next = { ...sel, [key]: sel[key] === value ? null : value };
    if (!next[key] || fits(next).length) { setSel(next); return; }
    const t = pool.find((x) => x.feat[key] === value);
    setSel(Object.fromEntries(v.features.map((f) => [f.key, t ? t.feat[f.key] : null])));
  };
  return (
    <div className="modal" onClick={onClose}>
      <div className="card" style={{ maxWidth: 560 }} onClick={(e) => e.stopPropagation()}>
        <b style={{ fontSize: 17 }}>Уточнить комплектацию</b>
        <div className="muted mt" style={{ fontSize: 13 }}>Только признаки, которыми комплектации {v.vin_year} года реально различаются. Номера тормозов зависят от колёс и привода.</div>
        {v.features.map((f) => (
          <div key={f.key} className="mt2">
            <div className="label" style={{ marginBottom: 6 }}>{f.label}</div>
            <div className="row wrap" style={{ gap: 8 }}>
              {f.values.map((x) => (
                <button key={x.value} type="button" className={`chip ${sel[f.key] === x.value ? "on" : ""}`} style={{ fontFamily: "var(--sans)", fontSize: 15 }}
                        onClick={() => choose(f.key, x.value)}>{x.value}</button>))}
            </div>
          </div>
        ))}
        {!v.features.length && <div className="mt2">Комплектации этого года ничем не различаются.</div>}
        <div className="row wrap mt2" style={{ alignItems: "center", justifyContent: "space-between" }}>
          <span className="muted" style={{ fontSize: 13 }}>подходит комплектаций: {match.length}</span>
          <div className="row" style={{ gap: 8 }}>
            <button className="btn ghost small" onClick={onClose}>Отмена</button>
            <button className="btn small" disabled={!match.length} onClick={() => onPick(match[0])}>Применить</button>
          </div>
        </div>
        <div className="mt" style={{ fontSize: 13 }}><a href={`#/vin/${v.vin}?provider=mattrio`}>все комплектации списком ({v.trims.length})</a></div>
      </div>
    </div>
  );
}

function ResultsList({ res, onScheme, page, setPage, vin }) {
  const groups = useMemo(() => (res ? mergeParts(res.parts) : []), [res]);
  if (!res) return null;
  if (res.mode === "no_dict") return (
    <div className="note">Слова «{res.q}» нет в словаре — поставщику искать нечего. Запрос записан, словарь пополним.
      {res.suggestions.length > 0 && <div className="mt">Похожие: {res.suggestions.join(", ")}</div>}</div>);
  const pages = Math.ceil(groups.length / PAGE);
  const shown = groups.slice(page * PAGE, page * PAGE + PAGE);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div className="legend">
        <span>{res.mode === "group" ? `Группа «${res.q}»` : res.mode === "oe" ? "Поиск по номеру" : res.mode === "pick"
          ? `Выбрано из списка · «${res.q}»${res.parts.length > 1 ? ` · ${count(res.parts.length, "вариант", "варианта", "вариантов")} этой позиции` : ""}` : `«${res.q}»`}{res.mode !== "pick" ? ` · найдено ${count(res.parts.length, "деталь", "детали", "деталей")}` : ""}</span>
        {res.reps && res.reps.length > 1 && <span className="muted">сверено по {count(res.reps.length, "комплектации", "комплектациям", "комплектациям")} ({res.reps.map((r) => r.combo).join(" / ")})</span>}
      </div>
      {res.parts.length === 0 && <div className="card"><b>Поставщик ничего не нашёл.</b></div>}
      {shown.map((list, i) => (
        <Boundary key={`b${i}`} where="строка результата" hint="Остальные позиции показаны ниже.">
          {list.length > 1
            ? <Variants key={list[0].key + list[0].stdPartName} list={list} onScheme={onScheme} vin={vin} />
            : list.map((p) => <PartCard key={p.pn_id + (p.comment || "") + (p.variant || "")} p={p} onScheme={onScheme} vin={vin} />)}
        </Boundary>))}
      <Pager page={page} pages={pages} onPage={(i) => { setPage(i); window.scrollTo({ top: 0, behavior: "smooth" }); }} />
    </div>
  );
}

// Машина, у которой поставщик не отдаёт деталей ВООБЩЕ. Говорим это один раз и на уровне
// машины: гонять человека по двенадцати пустым группам — худший способ сообщить новость.
function Mismatch({ v }) {
  if (!v || !v.mismatch || !v.mismatch.length) return null;
  const m = v.mismatch[v.mismatch.length - 1];
  return (
    <div className="note">
      <b>Каталог может не соответствовать машине.</b> {m.who} сообщил, что это «{m.model}»
      (источник: {m.source}). Имя машины мы не меняли — каталог остался прежним. Сверяйте детали
      по самой машине.
    </div>
  );
}

// Каталога по самой машине нет, но есть точно такая же с рабочим каталогом. Показываем её,
// не делая вид, что это каталог клиентского VIN: разница ровно в этом предложении.
function Substitute({ sub }) {
  if (!sub) return null;
  const what = [sub.model, sub.year, sub.engine].filter(Boolean).join(", ");
  return (
    <div className="note">
      <b>Каталог такой же машины{what ? ` (${what})` : ""}.</b> Поставщик не привязал детали
      к вашему VIN, поэтому показываем машину той же группы, мотора и коробки
      {sub.exact ? " и того же года" : " и соседнего года выпуска"}. Номера сверяйте
      по снятой детали.
    </div>
  );
}

function NoParts({ v }) {
  if (!v || !v.no_parts || v.substitute) return null;
  return (
    <div className="note">
      <b>По этой машине у поставщика нет каталога деталей.</b> Проверены две группы — пусто в обеих,
      значит пусто и в остальных. VIN разобран верно, но детали к нему не привязаны.
      <div className="mt">Что делать: искать по машине-донору — той же платформы, с китайским VIN.
        Ручной выбор марки и модели скоро появится здесь же.</div>
    </div>
  );
}

function CarScreen({ vin, route, setCtx, setLastSearch }) {
  const provider = route.q.provider || "";
  const [v, setV] = useState(null), [err, setErr] = useState("");
  const [groups, setGroups] = useState([]), [grp, setGrp] = useState("");
  const [q, setQ] = useState(""), [res, setRes] = useState(null), [busy, setBusy] = useState(""), [page, setPage] = useState(0);
  const [picker, setPicker] = useState(false), [mjsid, setMjsid] = useState(null);
  const [carMore, setCarMore] = useState(false);      // китайское название и поколение — по запросу
  useEffect(() => { api(`/api/vin/${vin}${provider ? `?provider=${provider}` : ""}`).then(setV).catch((x) => setErr(x.message)); api("/api/groups").then(setGroups).catch(() => {}); }, [vin, provider]);
  useEffect(() => {
    if (!v) return;
    if (!v.found) { go(`/vin/${vin}?provider=${v.provider}`); return; }        // не найден → экран с причиной и выбором модели
    if (v.provider === "mattrio") setMjsid(ssGet(`vc_trim_${vin}`) || v.trims[0].mjsid);
    setCtx(v.provider === "shichedao" ? (v.cars[0].title_ru || v.cars[0].title) : `${carTitle(v)} · ${v.displacement || ""} · ${v.vin_year || ""}`);
  }, [v]);
  if (err) return <div className="page"><div className="err">{err}</div></div>;
  if (!v || !v.found || (v.provider === "mattrio" && !mjsid)) return <div className="page muted">загрузка…</div>;
  const scd = v.provider === "shichedao";
  const car = scd ? v.cars[0] : null;
  const trim = scd ? null : (v.trims.find((t) => t.mjsid === mjsid) || v.trims[0]);
  const run = async (kind, value) => {
    setBusy(kind === "group" ? `Собираю группу «${value}»…` : "Ищу…"); setErr(""); setPage(0);
    try {
      let r;
      if (scd) r = await api(`/api/scd/v/${car.id}/search`, { body: { q: value } });
      else if (kind === "group") r = await api("/api/group", { body: { vin, mjsid, group: value } });
      else r = await api("/api/search", { body: { vin, mjsid, q: value } });
      setRes(r); if (!scd) setLastSearch({ vin, mjsid, q: value, res: r });
    } catch (x) { setErr(x.message); }
    setBusy("");
  };
  const pickLive = (it, items) => {
    // деталь из списка → полная карточка. Показываем ВСЕ варианты этой позиции (разные заводы, разная цена),
    // иначе теряем альтернативы: у F083502080SB и F183502080 одна позиция, но разные производители.
    setGrp(""); setPage(0);
    const same = (items || []).filter((x) => x.key === it.key && (x.name || "") === (it.name || "")
                                             && (!it.full.ref || !x.full.ref || x.full.ref === it.full.ref));
    const list = [it, ...same.filter((x) => x !== it)].map((x) => x.full);
    const r = { mode: "pick", q: it.word, keys: [it.key], suggestions: [], parts: list };
    setRes(r); if (!scd) setLastSearch({ vin, mjsid, q: it.word, res: r });
    api("/api/live/pick", { body: { word: it.word, pn_id: it.pn_id, key: it.key } }).catch(() => {});
  };
  const pickGroup = (g) => {
    setGrp(g);
    if (!g) return;
    if (scd) { setRes(null); return; }                // SHICHEDAO платный — показываем слова группы, каждое = 1 вызов
    setQ(""); run("group", g);
  };
  const onScheme = (p) => go(`/vin/${vin}/scheme?mjsid=${mjsid}&image=${encodeURIComponent(p.image)}&prefix=${encodeURIComponent(p.prefix || v.prefix || "")}&focus=${encodeURIComponent(p.pn_id)}`);
  const path = scd ? (car.path || "").split(">").map((x) => x.trim()).filter(Boolean) : null;
  const crumbs = scd
    ? [{ t: "Главная", href: "#/" }, ...path.slice(0, 3).map((t) => ({ t }))]
    // поколение в крошки не ставим: это внутренняя китайская метка поставщика (探索06 2023-)
    : [{ t: "Главная", href: "#/" }, { t: v.brand_ru || v.brand }, { t: v.alias || `${v.untranslated || v.sys} — без перевода` }];
  const grpWords = (groups.find((g) => g.group === grp) || {}).words || [];
  return (
    <div className="page">
      <Crumbs items={crumbs} />
      <div className="carlayout">
        <aside className="card carcard">
          <div className="label">{scd ? "SHICHEDAO" : "MATTRIO"} · VIN</div>
          {route.q.fb && <div className="kv" style={{ marginBottom: 8, color: "var(--ink2)" }}>
            Ответил {scd ? "SHICHEDAO" : "MATTRIO"}: {PROV[route.q.fb] || route.q.fb} этот VIN не разобрал — сработал запасной путь.</div>}
          <div className="mono" style={{ fontSize: 15, marginBottom: 12 }}>{vin}</div>
          {scd ? <>
            <h2 className="carname">{car.title_ru || car.title}</h2>
            <div className="zh" style={{ marginBottom: 10 }}>{car.title}</div>
            <Fact k="Марка" v={car.brand} /><Fact k="Год" v={car.year} mono /><Fact k="Модель двигателя" v={car.engine} mono />
            <Fact k="Объём" v={car.engine_desc} mono /><Fact k="Коробка" v={car.gearbox} />
            {v.cars.length > 1 && <div className="kv mt">VIN подходит к {v.cars.length} вариантам каталога, показан первый.</div>}
            <a className="btn ghost small mt2" style={{ display: "inline-flex", alignItems: "center", textDecoration: "none", color: "var(--ink)" }} href={`#/scd/${car.id}`}>Каталог по узлам (схемы)</a>
          </> : <>
            <h2 className="carname">{v.confirmed ? v.confirmed.model : carTitle(v)}</h2>
            {v.models_many && <span className="varchip" title="VIN до одной модели не сужает">возможные модели</span>}
            <MaybeModels v={v} compact />
            <ConfirmModel v={v} onDone={() => api(`/api/vin/${vin}${provider ? `?provider=${provider}` : ""}`).then(setV).catch(() => {})} />
            <Fact k="Марка" v={[v.brand_ru, v.sub_brand].filter(Boolean).filter((x, i, a) => a.indexOf(x) === i).join(" · ")} />
            {v.alias
              ? <Fact k="Модель" v={v.alias} />
              : <Fact k="Модель" v={`${v.untranslated || v.sys} — без перевода`} />}
            <Fact k="Год по VIN" v={v.vin_year} mono /><Fact k="Кузов" v={v.body} /><Fact k="Топливо" v={v.fuel} />
            <Fact k="Объём" v={v.displacement} mono /><Fact k="Модель двигателя" v={v.engine} mono />
            <Fact k="Привод" v={trim.drive_ru || trim.drive} /><Fact k="Коробка" v={v.transmission} mono />
            <Fact k="Шины" v={trim.frontTyre} mono />
            <Fact k="Адаптивный круиз" v={trim.acc} /><Fact k="Подогрев сидений" v={trim.seatHeater} /><Fact k="Панорамная крыша" v={trim.sunroof} />
            <button type="button" className="linkbtn" style={{ background: "none", padding: 0, height: "auto", marginTop: 8 }}
                    onClick={() => setCarMore(!carMore)}>{carMore ? "скрыть" : "подробнее"}</button>
            {carMore && <>
              <Fact k="В каталоге поставщика" v={`${v.brand} ${v.sys}`} />
              <Fact k="Поколение" v={v.group} />
              <Fact k="Цена в Китае" v={trim.guidingPrice ? `${(parseFloat(trim.guidingPrice) * 10000).toLocaleString("ru-RU")} ¥` : null} mono />
            </>}
            <div className="trimline">
              <div className="k">Комплектация</div>
              <div>{trim.salesName_ru || trim.salesName} <a href="#" onClick={(e) => { e.preventDefault(); setPicker(true); }}>сменить</a></div>
              {v.features.length > 0 && <div className="kv">различаются: {v.features.map((f) => f.label.toLowerCase()).join(", ")}</div>}
            </div>
          </>}
        </aside>
        <section className="carmain">
          <Mismatch v={v} />
          {/* Вердикт может родиться в том же запросе, что и первый клик по группе: тогда
              подстановка приходит в ОТВЕТЕ, а карточка машины про неё ещё не знает. */}
          <Substitute sub={(res && res.substitute) || v.substitute} />
          <NoParts v={(res && res.no_parts) ? { no_parts: true } : v} />
          <div className="row wrap" style={{ gap: 10 }}>
            <label htmlFor="grp" className="sr">Группа запчастей</label>
            <select id="grp" className="field grpsel" value={grp} onChange={(e) => pickGroup(e.target.value)}>
              <option value="">Группа запчастей…</option>
              {groups.map((g) => <option key={g.group} value={g.group}>{g.group}</option>)}
            </select>
            <form className="row" style={{ flexGrow: 1, minWidth: 280 }} onSubmit={(e) => { e.preventDefault(); if (q.trim()) run("q", q.trim()); }}>
              <label htmlFor="q" className="sr">Название детали</label>
              <LiveInput id="q" value={q} onChange={setQ} placeholder="колодки · фильтр масляный · стойка стабилизатора"
                         veh={scd ? { provider: "shichedao", scd_id: car.id } : { provider: "mattrio", vin, mjsid }} onPick={pickLive} />
              <button className="btn" disabled={!!busy || !q.trim()}>Найти</button>
            </form>
          </div>
          {scd && grp && (
            <div className="row wrap mt" style={{ gap: 8 }}>
              <span className="muted" style={{ fontSize: 13, alignSelf: "center" }}>У SHICHEDAO каждый поиск платный — выберите деталь группы:</span>
              {grpWords.map((w) => <button key={w} className="btn ghost small" onClick={() => { setQ(w); run("q", w); }}>{w}</button>)}
            </div>
          )}
          {busy && <div className="muted mt2">{busy}</div>}
          {err && <div className="err">{err}</div>}
          {!res && !busy && (
            <div className="grpgrid mt2">
              {groups.map((g) => (
                <button key={g.group} type="button" className="treeitem" onClick={() => pickGroup(g.group)}>
                  <span style={{ fontWeight: 600 }}>{g.group}</span><span className="muted" style={{ fontSize: 12 }}>{g.words.slice(0, 5).join(", ")}{g.words.length > 5 ? "…" : ""}</span>
                </button>))}
            </div>
          )}
          <div className="mt2">
            {scd ? (res && (res.mode === "no_dict"
              ? <div className="note">Слова «{res.q}» нет в словаре. Запрос записан.</div>
              : <ScdResults res={res} vid={car.id} page={page} setPage={setPage} />))
              : <Boundary where="список результатов"><ResultsList res={res} onScheme={onScheme} page={page} setPage={setPage} vin={vin} /></Boundary>}
          </div>
        </section>
      </div>
      {picker && <TrimPicker v={v} trim={trim} onClose={() => setPicker(false)}
                             onPick={(t) => { ssSet(`vc_trim_${vin}`, t.mjsid); setMjsid(t.mjsid); setPicker(false); setRes(null); setGrp(""); }} />}
    </div>
  );
}

// ------------------------------------------------------------ 3. подбор
// Условия нет — на карточке молчим: заголовок группы уже сказал «по VIN не определяется».
// Плашки тут быть не должно, её принимают за кнопку.
function Condition({ p }) {
  if (!p.condition) return null;
  return <span className="cond" title="Условие, при котором ставится именно этот номер">{p.condition}</span>;
}

const BADGE = {
  exact: { cls: "exact", text: "НОМЕР ЭТОЙ МАШИНЫ", hint: "API явно подтвердил номер для этой комплектации (containFlag = 0)" },
  analog: { cls: "analog", text: "АНАЛОГ ПО ПОЗИЦИИ — ПРОВЕРЬТЕ", hint: "Номер этой машине не принадлежит: система подставила деталь той же позиции (containFlag = 1). Перед заказом сверьте." },
  unknown: { cls: "unknown", text: "применимость не подтверждена поставщиком", hint: "API не сообщил, родной ли это номер для комплектации (поле containFlag пустое). Точность не гарантирована." },
};

function mergeParts(parts) {
  // одинаковый номер с одинаковым примечанием склеиваем (API шлёт дубли с заменой и без)
  const m = new Map();
  for (const p of parts) {
    const k = `${p.key}|${p.pn_id}|${p.comment || ""}`;
    if (!m.has(k)) { m.set(k, { ...p, substitutes: p.substitute ? [p.substitute] : [], refs: p.ref ? [p.ref] : [] }); continue; }
    const x = m.get(k);
    if (p.substitute && !x.substitutes.includes(p.substitute)) x.substitutes.push(p.substitute);
    if (p.ref && !x.refs.includes(p.ref)) x.refs.push(p.ref);
    if (x.badge !== p.badge) x.badge = x.badge === "analog" || p.badge === "analog" ? "analog" : "unknown";
  }
  // группы: один ключ + одно название, разные номера → варианты
  const groups = new Map();
  for (const p of m.values()) {
    const g = `${p.key}|${p.stdPartName}`;
    if (!groups.has(g)) groups.set(g, []);
    groups.get(g).push(p);
  }
  return [...groups.values()];
}

// Примечание одной строкой: перевод и наши пояснения нередко говорят одно и то же
// («Корпус чёрный» шло и заголовком, и пунктом списка). Оставляем непустое и неповторяющееся.
// На карточке показываем ТОЛЬКО то, что разобрано правилами. Машинный перевод примечания
// бывает бессмысленным («7FP/世钟» → «7FP/мировой колокол»), и выдавать его за смысл нельзя:
// оригинал и перевод лежат под «подробнее», там видно, что это машина, а не факт.
function noteLine(p) {
  const norm = (s) => String(s || "").toLowerCase().replace(/[.\s]+$/, "").trim();
  const parts = [];
  for (const s of p.comment_hints || []) {
    if (!s) continue;
    if (!parts.some((x) => norm(x) === norm(s))) parts.push(s);
  }
  return parts.join(" · ");
}

function PartBody({ p, compact, more }) {
  return (
    <>
      {/* Поиск поставщика нечёткий: оригинал рядом с переводом, чтобы было видно, если вернулось не то */}
      <div className="pname">
        {p.stdPartName_ru
          ? <span>{p.stdPartName_ru}</span>
          : <span>{p.stdPartName}<span className="muted" style={{ fontSize: 12 }}> без перевода</span></span>}
        {p.mfr && <span className="mfrchip" title="чем отличается это исполнение">исполнение {p.mfr.name_ru || p.mfr.name}{p.mfr.code ? ` (${p.mfr.code})` : ""}</span>}
        {p.stdPartName_src === "llm" && <span className="muted" style={{ fontSize: 12 }}>машинный перевод</span>}
      </div>
      {more && p.stdPartName_ru && (
        <div className="zh">в каталоге поставщика: <span className="zhname small">{p.stdPartName}</span></div>
      )}
      {more && p.srcPartName && p.srcPartName !== p.stdPartName && p.srcPartName_ru !== p.stdPartName_ru && (
        <div className="zh">заводское: <span className="zhname small">{p.srcPartName}</span>{p.srcPartName_ru ? ` — ${p.srcPartName_ru}` : ""}</div>
      )}
      {(noteLine(p) || (more && p.comment)) && (
        <div className={`cmt ${p.date_split ? "date" : ""}`}>
          {noteLine(p) && <b>{noteLine(p)}</b>}
          {more && p.comment && (
            <div className="zh" style={{ marginTop: 3 }}>{p.comment}
              {p.comment_ru && <> — {p.comment_ru}</>}
              {p.comment_src === "llm" && <span className="muted"> · машинный перевод</span>}</div>
          )}
        </div>
      )}
      {p.substitutes && p.substitutes.length > 0 && (
        <div className="kv mt row wrap" style={{ alignItems: "center", gap: 8 }}>Замена в базе:
          {p.substitutes.map((s) => <span key={s} className="row" style={{ gap: 6, alignItems: "center" }}>
            <span className="mono" style={{ color: "var(--ink)" }}>{s}</span><CopyBtn text={s} label="копировать" small /></span>)}
        </div>
      )}
      {!compact && p.reqPartNumber && p.reqPartNumber !== p.partNumber && (
        <div className="kv mt">Искали номер <span className="mono">{p.reqPartNumber}</span></div>
      )}
    </>
  );
}

// Миниатюра грузится лениво и отдельным запросом: список должен появиться сразу, не дожидаясь
// картинок. Часть схем поставщик не отдаёт вовсе — тогда картинки просто нет, а кнопка остаётся:
// битый значок хуже, чем его отсутствие.
function Thumb({ p, onScheme }) {
  const [bad, setBad] = useState(false);
  return (
    <button type="button" className="thumbbtn" onClick={() => onScheme(p)} title="Открыть схему узла">
      {!bad && (
        <img className="thumb" loading="lazy" width="120" height="120" alt="схема узла"
             onError={() => setBad(true)}
             src={`/api/thumb?image=${encodeURIComponent(p.image)}&prefix=${encodeURIComponent(p.prefix || "")}`} />
      )}
      <span className={bad ? "btn ghost small" : "thumbcap"}>
        Схема{p.refs && p.refs.length ? ` · поз. ${p.refs.join(", ")}` : ""}</span>
    </button>
  );
}

function PriceBox({ p, onScheme, more, setMore }) {
  // сервис подбора артикулов: юани и китайский прячем под «подробнее», данные собираем как прежде
  const price = parseFloat(p.partPrice);
  return (
    <div style={{ flexShrink: 0, textAlign: "right", display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 6 }}>
      <div className="kv">кол-во в позиции: <b>{p.qty || "—"}</b></div>
      {p.image && <Thumb p={p} onScheme={onScheme} />}
      <button type="button" className="linkbtn" style={{ background: "none", padding: 0, height: "auto" }} onClick={() => setMore(!more)}>
        {more ? "скрыть" : "подробнее"}</button>
      {more && (
        <div className="kv" style={{ textAlign: "right" }}>
          {price > 0 ? <>заводская цена: <b>{price.toFixed(0)} ¥</b></> : "цены в прайсе нет"}
          {p.partCode && <div>код детали: <span className="mono">{p.partCode}</span></div>}
          {p.ref && <div>позиция на схеме: <b>{p.ref}</b></div>}
        </div>
      )}
    </div>
  );
}

function PartCard({ p, onScheme, vin, hideBadge }) {
  const [open, setOpen] = useState(null);      // что открылось нажатием: номер и замены
  const [more, setMore] = useState(false);     // «подробнее» одно на карточку: и китайский, и юани
  const pp = open ? { ...p, partNumber: open.part_number, substitutes: open.substitutes || [] } : p;
  const b = BADGE[p.badge];
  return (
    <div className={`part ${p.badge} ${p.own === false ? "otherTrim" : ""}`}>
      <div style={{ display: "flex", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
        <div style={{ flexGrow: 1, minWidth: 240 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 7, flexWrap: "wrap" }}>
            <PartNumber p={pp} onRevealed={setOpen} />
            {!hideBadge && <span className={`badge ${b.cls}`} title={b.hint}>{b.text}</span>}
            <Condition p={p} />
          </div>
          {p.own === false && <div className="kv" style={{ marginBottom: 6 }}>
            На вашей комплектации этот номер не встретился. Годится ли он вам, поставщик не сообщает.</div>}
          <PartBody p={pp} more={more} />
          {p.badge === "analog" && <div className="kv mt" style={{ color: "var(--warn-ink)" }}>{b.hint}</div>}
        </div>
        <PriceBox p={p} onScheme={onScheme} more={more} setMore={setMore} />
      </div>
    </div>
  );
}

function variantReason(list) {
  // почему номеров несколько: артикул назначает автопроизводитель, это РАЗНЫЕ исполнения, не взаимозамена
  if (list.some((p) => p.date_split)) return { head: "зависят от даты сборки машины", tail: "Точная дата сборки по VIN не приходит — только год. Проверьте по ПТС, табличке в проёме двери или по резьбе колёсного болта." };
  const mfrs = [...new Set(list.map((p) => p.mfr && (p.mfr.name_ru || p.mfr.name)).filter(Boolean))];
  if (mfrs.length > 1) return { head: `разные исполнения: ${mfrs.join(" и ")}`, tail: "Это не взаимозаменяемые аналоги: номер назначает автопроизводитель, исполнения отличаются. Уточните по машине, какое стоит." };
  return { head: "по VIN не определяется, какое из них стоит", tail: "Поставщик даёт несколько номеров на одну позицию и не указывает, чем они различаются. Сверяйте по снятой детали." };
}

function VariantRow({ p, onScheme, hideBadge }) {
  const [open, setOpen] = useState(null);
  const [more, setMore] = useState(false);
  const pp = open ? { ...p, partNumber: open.part_number, substitutes: open.substitutes || [] } : p;
  const b = BADGE[p.badge];
  return (
    <div className="part" style={{ background: "var(--soft)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", marginBottom: 6 }}>
        <PartNumber p={pp} onRevealed={setOpen} big small />
        {!hideBadge && <span className={`badge ${b.cls}`} title={b.hint}>{b.text}</span>}
        <Condition p={p} />
      </div>
      <PartBody p={pp} compact more={more} />
      <div className="mt"><PriceBox p={pp} onScheme={onScheme} more={more} setMore={setMore} /></div>
    </div>
  );
}

function Variants({ list, onScheme, vin }) {
  const reason = variantReason(list);
  // Одна служебная пометка на виду: если применимость не подтверждена у ВСЕХ вариантов,
  // говорим это один раз в заголовке, а не на каждой карточке.
  const allUnknown = list.every((p) => p.badge === "unknown");
  return (
    <div className="part" style={{ borderLeftColor: "var(--warn)", borderColor: "var(--warn-line)" }}>
      <div style={{ fontWeight: 600, color: "var(--warn-ink)" }}>
        {count(list.length, "вариант", "варианта", "вариантов")} «{list[0].stdPartName_ru || list[0].stdPartName}» — {reason.head}
      </div>
      {allUnknown && <div className="kv">применимость ни одного из них поставщик не подтвердил</div>}
      <div className="variants">
        {list.map((p) => (
          <VariantRow key={p.pn_id + (p.comment || "")} p={p} onScheme={onScheme} hideBadge={allUnknown} />))}
      </div>
      <div className="kv mt" style={{ lineHeight: 1.5 }}>{reason.tail}</div>
    </div>
  );
}

function Parts({ vin, route, setCtx, lastSearch, setLastSearch }) {
  const mjsid = route.q.mjsid, rim = route.q.rim;
  const [v, setV] = useState(null);
  const [q, setQ] = useState(lastSearch && lastSearch.vin === vin && lastSearch.mjsid === mjsid ? lastSearch.q : "");
  const [res, setRes] = useState(lastSearch && lastSearch.vin === vin && lastSearch.mjsid === mjsid ? lastSearch.res : null);
  const [busy, setBusy] = useState(false), [err, setErr] = useState("");
  useEffect(() => { api(`/api/vin/${vin}?provider=mattrio`).then(setV).catch((x) => setErr(x.message)); }, [vin]);
  const trim = v && v.trims && v.trims.find((t) => t.mjsid === mjsid);
  useEffect(() => { if (v) setCtx(`${carTitle(v)} · ${v.displacement || ""} · ${v.vin_year || ""}${trim && trim.frontTyre ? " · " + trim.frontTyre : ""}`); }, [v, trim]);
  const run = async (text) => {
    const qq = (text != null ? text : q).trim();
    if (!qq) return;
    setQ(qq); setBusy(true); setErr("");
    try {
      const r = await api("/api/search", { body: { vin, mjsid, q: qq } });
      setRes(r); setLastSearch({ vin, mjsid, q: qq, res: r });
    } catch (x) { setErr(x.message); }
    setBusy(false);
  };
  const groups = useMemo(() => (res ? mergeParts(res.parts) : []), [res]);
  const onScheme = (p) => {
    go(`/vin/${vin}/scheme?mjsid=${mjsid}&image=${encodeURIComponent(p.image)}&prefix=${encodeURIComponent(p.prefix || (v && v.prefix) || "")}&focus=${encodeURIComponent(p.pn_id)}${rim ? `&rim=${rim}` : ""}`);
  };
  if (!mjsid) return <div className="page">Не выбрана комплектация. <a href={`#/vin/${vin}`}>Выбрать</a></div>;
  return (
    <div className="page" style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      <div className="row wrap" style={{ justifyContent: "space-between", alignItems: "center" }}>
        <div className="muted2" style={{ fontSize: 14 }}>
          {trim ? <>Комплектация: <b style={{ color: "var(--ink)" }}>{trim.salesName_ru || trim.salesName}</b> · {trim.drive_ru} · <span className="mono">{trim.frontTyre}</span></> : <span className="mono">{mjsid}</span>}
          {" · "}<a href={`#/vin/${vin}?mjsid=${mjsid}${rim ? `&rim=${rim}` : ""}`}>сменить</a>
        </div>
        <span className="wip" title="Метод дерева узлов у поставщика не отдаёт корень — вопрос отправлен"><b>в работе</b> Каталог по узлам</span>
      </div>

      {/* Группа поставщика держит несколько российских моделей (揽月, 瑞虎8_PRO). Значит, каталог
          привязан к группе, а не к конкретной машине, и отличия комплектации он может не знать. */}
      {v && v.models_many && (
        <div className="note">Каталог может не совпадать с машиной: у этой группы поставщика
          несколько российских моделей ({v.models.join(", ")}). Коробку, привод и кузов сверяйте
          по самой машине.</div>
      )}

      <form className="row" onSubmit={(e) => { e.preventDefault(); run(); }}>
        <label htmlFor="q" className="sr">Название детали</label>
        <SuggestInput id="q" value={q} onChange={setQ} onPick={(s) => run(s)} autoFocus
                      placeholder="колодки передние · фильтр масляный · стойка стабилизатора" />
        <button className="btn" disabled={busy || !q.trim()}>{busy ? "Ищу…" : "Найти"}</button>
      </form>
      <div className="muted" style={{ fontSize: 13, marginTop: -8 }}>
        Поставщик ищет только по-китайски и только по названию: русское слово переводится по словарю. По номеру детали каталог не ищет — даже по своему собственному.
      </div>
      {err && <div className="err">{err}</div>}

      {res && res.mode === "no_dict" && (
        <div className="note">
          Слова «{res.q}» нет в словаре — поставщику искать нечего. {res.suggestions.length > 0 ? "Возможно, вы имели в виду:" : "Добавить слово может Вадим в админке → Словарь."}
          {res.suggestions.length > 0 && (
            <div className="row wrap mt">{res.suggestions.map((s) => (
              <button key={s} type="button" className="btn ghost small" onClick={() => run(s)}>{s}</button>))}</div>
          )}
        </div>
      )}

      {res && res.substitute && <Substitute sub={res.substitute} />}
      {res && res.no_parts && <NoParts v={{ no_parts: true }} />}

      {res && res.mode !== "no_dict" && (
        <>
          <div className="legend">
            <span>{res.mode === "oe" ? "Поиск по номеру" : res.mode === "zh" ? "Поиск по-китайски" : `Запрос к поставщику: ${res.keys.join(", ")}`}</span>
            <span>найдено {count(res.parts.length, "деталь", "детали", "деталей")}</span>
            <span><i style={{ background: "var(--ok)" }} />номер этой машины</span>
            <span><i style={{ background: "var(--warn)" }} />аналог по позиции — проверьте</span>
            <span><i style={{ background: "none", border: "1px solid var(--neutral)" }} />привязка не указана</span>
          </div>
          {res.parts.length === 0 && (
            <div className="card">
              <b>Поставщик ничего не нашёл.</b>
              <div className="muted mt" style={{ fontSize: 14 }}>
                {res.per_key.map((k) => `${k.key}: ${k.code === "402" ? "нет результата" : k.code}`).join(" · ")}
                {res.mode === "oe" && " · Номер отсутствует в базе поставщика или не относится к этой комплектации."}
              </div>
              {!res.no_parts && (
                <div className="muted mt" style={{ fontSize: 14 }}>
                  Возможно, у поставщика нет именно этой группы — проверьте соседнюю.
                </div>
              )}
            </div>
          )}
          {/* «Варианты» — только развилка по дате сборки. Одинаковое stdPartName у разных деталей
              (передний и задний сайлентблок рычага) — это разные детали, а не выбор. */}
          {groups.map((list) => list.length > 1 && list.some((p) => p.date_split)
            ? <Variants key={list[0].key + list[0].stdPartName} list={list} onScheme={onScheme} vin={vin} />
            : list.map((p) => <PartCard key={p.pn_id + (p.comment || "")} p={p} onScheme={onScheme} vin={vin} />))}
        </>
      )}
    </div>
  );
}

// ------------------------------------------------------------ 4. схема
function Scheme({ vin, route, setCtx, lastSearch }) {
  const { mjsid, image, prefix, focus, rim } = route.q;
  const [s, setS] = useState(null), [err, setErr] = useState(""), [full, setFull] = useState(false);
  useEffect(() => {
    setS(null); setErr("");
    api(`/api/scheme?${new URLSearchParams({ image, prefix: prefix || "", vin, mjsid })}`).then(setS).catch((x) => setErr(x.message));
  }, [image]);
  useEffect(() => { setCtx("Схема узла"); }, []);
  useEffect(() => {
    const f = (e) => { if (e.key === "Escape") setFull(false); };
    if (full) { addEventListener("keydown", f); return () => removeEventListener("keydown", f); }
  }, [full]);
  // пока getPartByImage отвечает 403 — список из результатов поиска с той же схемой
  const fromSearch = useMemo(() => {
    if (!lastSearch || lastSearch.vin !== vin) return [];
    const seen = new Set();
    return lastSearch.res.parts.filter((p) => p.image === image && !seen.has(p.pn_id + p.ref) && seen.add(p.pn_id + p.ref));
  }, [lastSearch, image]);
  const list = s && s.parts_status === "ok" ? s.parts : fromSearch;
  const back = `#/vin/${vin}/parts?mjsid=${mjsid}${rim ? `&rim=${rim}` : ""}`;
  return (
    <div className="page">
      <div style={{ marginBottom: 14 }}><a href={back}>← к результатам</a></div>
      {err && <div className="err">{err}</div>}
      {!s && !err && <div className="muted">Загружаю схему у поставщика…</div>}
      {s && (
        <div className="scheme">
          <div className="card" style={{ padding: 18 }}>
            <div className="row" style={{ justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
              <span className="muted" style={{ fontSize: 13 }}>{s.width && `${s.width}×${s.height}`} · нажмите, чтобы открыть во весь экран</span>
              <span className="wip" title="Метод getPartByImage отвечает 403 — координат позиций нет"><b>в работе</b> Точки на схеме</span>
            </div>
            <button type="button" className="imgbox" style={{ width: "100%" }} onClick={() => setFull(true)} aria-label="Открыть схему во весь экран">
              <img src={s.src} alt="Схема узла" />
            </button>
            <div className="muted" style={{ fontSize: 13, marginTop: 12, lineHeight: 1.5 }}>
              Схема сохранена у нас — ссылки поставщика временные. Кликабельных позиций пока нет: метод деталей схемы отвечает ошибкой ({s.parts_code || "нет ответа"}), вопрос у поставщика. Номера позиций — в списке справа.
            </div>
          </div>
          <div className="card" style={{ padding: 18 }}>
            <div className="label">Детали на схеме</div>
            {s.parts_status !== "ok" && (
              <div className="muted" style={{ fontSize: 13, marginBottom: 12, lineHeight: 1.45 }}>
                Полный список деталей узла поставщик пока не отдаёт. Показаны найденные поиском детали с этой схемы.
              </div>
            )}
            {!list.length && <div className="muted">Нет данных</div>}
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {list.map((p, i) => (
                <div key={i} className={`pos ${p.pn_id === focus ? "on" : ""}`}>
                  <span className="n">{p.ref || "–"}</span>
                  <div style={{ flexGrow: 1 }}>
                    <div className="row wrap" style={{ gap: 8, alignItems: "center" }}><PartNumber p={p} small /></div>
                    <div style={{ fontSize: 14 }}>{p.stdPartName_ru || <span className="muted">перевода нет</span>} <span className="zhname small">{p.stdPartName}</span></div>
                    {p.comment_ru && <div style={{ fontSize: 12, color: "var(--warn)" }}>{p.comment_ru}</div>}
                    <span className={`badge ${BADGE[p.badge].cls}`} style={{ display: "inline-block", marginTop: 5, fontSize: 10 }}>{BADGE[p.badge].text}</span>
                  </div>
                  <div className="mono" style={{ fontSize: 14, whiteSpace: "nowrap" }}>{parseFloat(p.partPrice) > 0 ? `${parseFloat(p.partPrice).toFixed(0)} ¥` : ""}</div>
                </div>
              ))}
            </div>
            {list.some((p) => p.partNumber) && (
              <button className="btn" style={{ width: "100%", marginTop: 16 }}
                      onClick={() => copyRevealed(list)}>Скопировать раскрытые номера</button>
            )}
          </div>
        </div>
      )}
      {full && s && (
        <div className="full" onClick={() => setFull(false)}>
          <button className="btn ghost small" onClick={() => setFull(false)}>Закрыть</button>
          <img src={s.src} alt="Схема узла" />
        </div>
      )}
    </div>
  );
}

// ------------------------------------------------------------ 5. админка
const ACTIONS = { vin: "VIN", search: "поиск", scheme: "схема", login: "вход", login_fail: "неверный ПИН" };

function AdminLog({ users }) {
  const [f, setF] = useState({ who_f: "", errors: 0 });
  const [data, setData] = useState(null), [offset, setOffset] = useState(0), [raw, setRaw] = useState(null);
  const qs = new URLSearchParams({ who_f: f.who_f, errors: f.errors, limit: 100, offset });
  useEffect(() => { api(`/api/admin/log?${qs}`).then(setData); }, [f, offset]);
  const openRaw = async (id) => setRaw(await api(`/api/admin/raw/${id}`));
  const set = (patch) => { setOffset(0); setF({ ...f, ...patch }); };
  return (
    <div className="card">
      <div className="row wrap" style={{ justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
        <b style={{ fontSize: 15 }}>Журнал запросов {data && <span className="muted" style={{ fontWeight: 400 }}>· {data.total}</span>}</b>
        <div className="tabs">
          <button className={!f.who_f ? "on" : ""} onClick={() => set({ who_f: "" })}>Все</button>
          {Object.entries(users).map(([k, n]) => <button key={k} className={f.who_f === k ? "on" : ""} onClick={() => set({ who_f: k })}>{n}</button>)}
          <button className={f.errors ? "on" : ""} style={{ color: f.errors ? "#fff" : "var(--err)" }} onClick={() => set({ errors: f.errors ? 0 : 1 })}>Только ошибки</button>
        </div>
      </div>
      <div className="tablewrap"><table>
        <thead><tr><th>Время</th><th>Кто</th><th>Действие</th><th>Запрос</th><th>Ответ</th><th>Кэш</th><th>Квота</th><th>мс</th><th>Сырое</th></tr></thead>
        <tbody>{data && data.rows.map((r) => {
          const ids = (r.detail && r.detail.raw_ids) || (r.raw_id ? [r.raw_id] : []);
          return (
            <tr key={r.id}>
              <td className="mono">{fmtTime(r.ts)}</td>
              <td>{users[r.who] || r.who}</td>
              <td>{ACTIONS[r.action] || r.action}</td>
              <td style={{ maxWidth: 280, wordBreak: "break-all" }}>{r.query}{r.detail && r.detail.found != null && <span className="muted"> · {r.detail.found} шт</span>}</td>
              <td className={r.error ? "e" : "o"}>{r.code || (r.error ? "ошибка" : "ок")}</td>
              <td>{r.cache_hit ? "да" : ""}</td>
              <td className="mono" style={{ color: r.frequency != null ? "var(--err)" : undefined }}>{r.frequency != null ? r.frequency : "—"}</td>
              <td className="mono muted">{r.duration_ms != null ? r.duration_ms : ""}</td>
              <td>{ids.map((id) => <a key={id} href="#" onClick={(e) => { e.preventDefault(); openRaw(id); }} style={{ marginRight: 6 }}>#{id}</a>)}</td>
            </tr>);
        })}</tbody>
      </table></div>
      <div className="row wrap mt2" style={{ alignItems: "center" }}>
        <a className="btn small" style={{ display: "inline-flex", alignItems: "center", textDecoration: "none", color: "#fff" }}
           href={`/api/admin/log.csv?${new URLSearchParams({ who_f: f.who_f, errors: f.errors })}`}>Выгрузить в CSV</a>
        {offset > 0 && <button className="btn ghost small" onClick={() => setOffset(Math.max(0, offset - 100))}>← новее</button>}
        {data && offset + 100 < data.total && <button className="btn ghost small" onClick={() => setOffset(offset + 100)}>старее →</button>}
      </div>
      {raw && (
        <div className="modal" onClick={() => setRaw(null)}>
          <div className="card" onClick={(e) => e.stopPropagation()}>
            <div className="row" style={{ justifyContent: "space-between", alignItems: "center" }}>
              <b>Сырой ответ #{raw.id} · {raw.method} · {raw.who} · http {raw.http} · code {raw.code} · квота {raw.frequency != null ? raw.frequency : "—"}</b>
              <button className="btn ghost small" onClick={() => setRaw(null)}>Закрыть</button>
            </div>
            <div className="label mt">Параметры</div><pre>{JSON.stringify(raw.params, null, 2)}</pre>
            <div className="label">Ответ как есть (userId вырезан)</div><pre>{typeof raw.body === "string" ? raw.body : JSON.stringify(raw.body, null, 2)}</pre>
          </div>
        </div>
      )}
    </div>
  );
}

const TABLE_DEF = {
  dict: { title: "Словарь поиска (рус → кит)", cols: [["ru", "Русское слово"], ["zh", "Китайский ключ"], ["grp", "Группа"]], pk: "id",
          extra: (r) => r.hits == null ? <span className="muted">не проверено</span> : r.hits === 0 ? <span style={{ color: "var(--err)" }}>0 деталей</span> : <span className="o">{r.hits} шт</span> },
  tr: { title: "Переводы (кит → рус)", cols: [["zh", "Китайский"], ["ru", "Русский"]], pk: "zh",
        extra: (r) => <span className="muted">{r.source === "llm" ? "машинный" : "ручной"}</span> },
  wmi: { title: "Префиксы VIN местной сборки", cols: [["wmi", "Префикс (3 знака)"], ["plant", "Завод"], ["brands", "Марки"], ["note", "Что сказать менеджеру"], ["kind", "local / china"],
         ["scd_manufacturer", "SHICHEDAO: завод"], ["scd_brand", "бренд"], ["scd_filter", "фильтр моделей"]], pk: "wmi" },
  route: { title: "Маршрут по префиксу VIN (самый длинный совпавший; остальное — MATTRIO)", cols: [["prefix", "Префикс"], ["provider", "mattrio / shichedao"], ["note", "Что это"]], pk: "prefix" },
  donor: { title: "Префикс VIN местной сборки → модель и китайский VIN-донор (самый длинный совпавший префикс)",
           cols: [["prefix", "Префикс VIN"], ["brand", "Марка"], ["model", "Модель"], ["donor_vin", "Китайский VIN той же модели"], ["note", "Откуда известно"]], pk: "prefix" },
  alias: { title: "Русские названия моделей (префикс — когда одно имя значит разные машины)",
           cols: [["brand", "Марка (кит.)"], ["sys", "Модель у поставщика"], ["ru_name", "Название для менеджера"], ["wmi", "Префикс VIN"]], pk: "id" },
  confirm: { title: "Подтверждённые машины: VIN → модель (показывается без пометки «предположение»)",
             cols: [["vin", "VIN"], ["model", "Модель"], ["note", "Примечание"]], pk: "vin" },
};

function AdminTable({ name }) {
  const def = TABLE_DEF[name];
  const [rows, setRows] = useState(null), [edit, setEdit] = useState(null), [flt, setFlt] = useState(""), [err, setErr] = useState("");
  const load = () => api(`/api/admin/table/${name}`).then(setRows);
  useEffect(() => { setRows(null); setEdit(null); load(); }, [name]);
  const save = async () => { setErr(""); try { await api(`/api/admin/table/${name}`, { body: edit }); setEdit(null); load(); } catch (x) { setErr(x.message); } };
  const del = async (r) => { if (confirm("Удалить строку?")) { await api(`/api/admin/table/${name}/${encodeURIComponent(r[def.pk])}`, { method: "DELETE" }); load(); } };
  const shown = (rows || []).filter((r) => !flt || def.cols.some(([c]) => String(r[c] || "").toLowerCase().includes(flt.toLowerCase())));
  return (
    <div className="card">
      <div className="row wrap" style={{ justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
        <b>{def.title} {rows && <span className="muted" style={{ fontWeight: 400 }}>· {rows.length}</span>}</b>
        <div className="row">
          <input className="cellin" style={{ width: 200 }} placeholder="фильтр" value={flt} onChange={(e) => setFlt(e.target.value)} />
          <button className="btn small" onClick={() => setEdit({})}>Добавить</button>
        </div>
      </div>
      {edit && (
        <div className="row wrap" style={{ marginBottom: 12, alignItems: "center" }}>
          {def.cols.map(([c, t]) => (
            <input key={c} className="cellin" style={{ width: 220 }} placeholder={t} value={edit[c] || ""}
                   disabled={name === "tr" && c === "zh" && edit._existing} onChange={(e) => setEdit({ ...edit, [c]: e.target.value })} />
          ))}
          <button className="btn small" onClick={save}>Сохранить</button>
          <button className="btn ghost small" onClick={() => setEdit(null)}>Отмена</button>
          {err && <span className="err" style={{ margin: 0 }}>{err}</span>}
        </div>
      )}
      <div className="tablewrap"><table>
        <thead><tr>{def.cols.map(([c, t]) => <th key={c}>{t}</th>)}{def.extra && <th />}<th /></tr></thead>
        <tbody>{shown.map((r) => (
          <tr key={r[def.pk]}>
            {def.cols.map(([c]) => <td key={c}>{r[c]}</td>)}
            {def.extra && <td>{def.extra(r)}</td>}
            <td style={{ whiteSpace: "nowrap" }}>
              <a href="#" onClick={(e) => { e.preventDefault(); setEdit({ ...r, _existing: true }); }}>правка</a>{" · "}
              <a href="#" onClick={(e) => { e.preventDefault(); del(r); }} style={{ color: "var(--err)" }}>удалить</a>
            </td>
          </tr>))}</tbody>
      </table></div>
    </div>
  );
}

function FallbackStats() {
  const [rows, setRows] = useState(null);
  useEffect(() => { api("/api/admin/fallback").then(setRows).catch(() => setRows([])); }, []);
  return (
    <div className="card">
      <b>Запасной путь</b>
      <div className="muted mt" style={{ fontSize: 13 }}>Основной поставщик ответил «не найдено» — сервис спросил второго. Если префикс постоянно уходит ко второму и тот находит — маршрут стоит поменять насовсем.</div>
      <div className="tablewrap mt"><table>
        <thead><tr><th>Префикс</th><th>Основной → запасной</th><th>Раз</th><th>Разных VIN</th><th>Запасной нашёл</th></tr></thead>
        <tbody>{rows && rows.map((r, i) => (
          <tr key={i}><td className="mono">{r.prefix}</td><td>{PROV[r.src] || r.src} → {PROV[r.dst] || r.dst}</td>
            <td className="mono">{r.n}</td><td className="mono">{r.vins}</td><td className={r.found ? "o" : "muted"}>{r.found} из {r.n}</td></tr>))}
          {rows && !rows.length && <tr><td colSpan={5} className="muted">Пока не срабатывал</td></tr>}
        </tbody>
      </table></div>
    </div>
  );
}

function DictMiss() {
  const [rows, setRows] = useState(null), [add, setAdd] = useState(null), [err, setErr] = useState("");
  const load = () => api("/api/admin/dict_miss").then(setRows);
  useEffect(() => { load(); }, []);
  const save = async () => {
    setErr("");
    try {
      await api("/api/admin/table/dict", { body: { ru: add.ru, zh: add.zh, grp: add.grp } });
      await api(`/api/admin/dict_miss/${encodeURIComponent(add.q)}`, { method: "DELETE" });
      DICT_CACHE = null; setAdd(null); load();
    } catch (x) { setErr(x.message); }
  };
  const del = async (r) => { await api(`/api/admin/dict_miss/${encodeURIComponent(r.q)}`, { method: "DELETE" }); load(); };
  return (
    <div className="card">
      <b>Не нашлось в словаре {rows && <span className="muted" style={{ fontWeight: 400 }}>· {rows.length}</span>}</b>
      <div className="muted mt" style={{ fontSize: 13 }}>Что люди искали, а словаря не хватило. Частые — сверху: пополняйте словарь по ним.
        Китайский ключ проверяйте поиском по-китайски на реальной машине — поиск поставщика нечёткий.</div>
      {add && (
        <div className="row wrap mt" style={{ alignItems: "center" }}>
          <input className="cellin" style={{ width: 220 }} value={add.ru} onChange={(e) => setAdd({ ...add, ru: e.target.value })} placeholder="русское слово" />
          <input className="cellin" style={{ width: 160 }} value={add.zh} onChange={(e) => setAdd({ ...add, zh: e.target.value })} placeholder="китайский ключ" autoFocus />
          <input className="cellin" style={{ width: 140 }} value={add.grp} onChange={(e) => setAdd({ ...add, grp: e.target.value })} placeholder="группа" />
          <button className="btn small" disabled={!add.zh} onClick={save}>В словарь</button>
          <button className="btn ghost small" onClick={() => setAdd(null)}>Отмена</button>
          {err && <span className="err" style={{ margin: 0 }}>{err}</span>}
        </div>
      )}
      <div className="tablewrap mt"><table>
        <thead><tr><th>Запрос</th><th>Раз</th><th>Последний</th><th>Кто</th><th>Мы подсказали</th><th /></tr></thead>
        <tbody>{rows && rows.map((r) => (
          <tr key={r.q}>
            <td>{r.q_last}</td><td className="mono">{r.cnt}</td><td className="mono muted">{fmtTime(r.last_at)}</td><td>{r.last_who}</td>
            <td className="muted">{(r.suggestions || []).join(", ")}</td>
            <td style={{ whiteSpace: "nowrap" }}>
              <a href="#" onClick={(e) => { e.preventDefault(); setAdd({ q: r.q, ru: r.q, zh: "", grp: "" }); }}>в словарь</a>{" · "}
              <a href="#" style={{ color: "var(--err)" }} onClick={(e) => { e.preventDefault(); del(r); }}>убрать</a>
            </td>
          </tr>))}
          {rows && !rows.length && <tr><td colSpan={6} className="muted">Пока пусто</td></tr>}
        </tbody>
      </table></div>
    </div>
  );
}

function DictCheck() {
  const [vins, setVins] = useState([]), [vin, setVin] = useState(""), [mjsid, setMjsid] = useState(""), [v, setV] = useState(null);
  const [busy, setBusy] = useState(false), [res, setRes] = useState(null), [err, setErr] = useState("");
  useEffect(() => { api("/api/recent").then((r) => setVins(r.filter((x) => x.found))); }, []);
  useEffect(() => { if (vin) api(`/api/vin/${vin}`).then(setV); }, [vin]);
  const run = async () => { setBusy(true); setErr(""); try { setRes(await api("/api/admin/dict/check", { body: { vin, mjsid } })); } catch (x) { setErr(x.message); } setBusy(false); };
  return (
    <div className="card">
      <b>Проверка словаря</b>
      <div className="muted mt" style={{ fontSize: 13 }}>Прогоняет все китайские ключи словаря по одной машине и отмечает, сколько деталей нашёл каждый. Квоту не тратит (поиск бесплатный), идёт несколько минут.</div>
      <div className="row wrap mt" style={{ alignItems: "center" }}>
        <select className="cellin" style={{ width: 220 }} value={vin} onChange={(e) => { setVin(e.target.value); setMjsid(""); }}>
          <option value="">VIN…</option>{vins.map((x) => <option key={x.vin} value={x.vin}>{x.vin} {x.title}</option>)}
        </select>
        <select className="cellin" style={{ width: 360 }} value={mjsid} onChange={(e) => setMjsid(e.target.value)}>
          <option value="">комплектация…</option>{v && v.trims.map((t) => <option key={t.mjsid} value={t.mjsid}>{t.year} · {t.salesName_ru || t.salesName} · {t.frontTyre}</option>)}
        </select>
        <button className="btn small" disabled={!vin || !mjsid || busy} onClick={run}>{busy ? "Проверяю…" : "Проверить"}</button>
      </div>
      {err && <div className="err">{err}</div>}
      {res && <div className="mt" style={{ fontSize: 14 }}>Проверено ключей: {res.checked}. Без результата: {res.zero.length ? res.zero.join(", ") : "нет"}.</div>}
    </div>
  );
}

function Admin({ me, setCtx, onQuota }) {
  const [s, setS] = useState(null), [tab, setTab] = useState("log"), [forget, setForget] = useState("");
  useEffect(() => { setCtx("админка"); api("/api/admin/summary").then(setS); onQuota(); }, []);
  if (!me.admin) return <div className="page">Только для Вадима.</div>;
  if (!s) return <div className="page muted">загрузка…</div>;
  const doForget = async () => {
    if (!forget || !confirm(`Стереть ${forget} из памяти? Следующий ввод этого VIN спишет 1 запрос квоты.`)) return;
    await api(`/api/admin/vin/${forget.trim().toUpperCase()}`, { method: "DELETE" }); setForget("");
  };
  return (
    <div className="page" style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      <div className="tiles">
        <div className="card tile"><div className="label">Остаток квоты</div><div className="big">{s.quota.left != null ? s.quota.left : "—"}</div>
          <div className="muted mt" style={{ fontSize: 13 }}>по последнему ответу поставщика{s.quota.updated_at ? `, ${fmtTime(s.quota.updated_at)}` : ""}</div></div>
        <div className="card tile"><div className="label">VIN определено</div><div className="big">{s.vins_cached}</div>
          <div className="mt" style={{ fontSize: 13, color: "var(--ok)" }}>платных запросов из сервиса: {s.vin_calls}</div></div>
        <div className="card tile"><div className="label">Действий в журнале</div><div className="big">{s.requests}</div>
          <div className="muted mt" style={{ fontSize: 13 }}>из кэша {s.cache_hits} · вызовов API {s.api_calls}</div></div>
        {s.scd && s.scd.enabled && (
          <div className="card tile"><div className="label">SHICHEDAO: вызовы</div>
            <div className="big">{s.scd.calls}</div>
            <div className="mt" style={{ fontSize: 13, color: "var(--ok)" }}>сэкономлено кэшем {s.scd.saved}
              {s.scd.calls + s.scd.saved > 0 ? ` · ${Math.round(s.scd.saved / (s.scd.calls + s.scd.saved) * 100)}%` : ""}</div>
            {s.scd.last_quota_raw && <div className="mt" style={{ fontSize: 13, color: "var(--err)" }}>последний отказ «пакет исчерпан»: сырой ответ #{s.scd.last_quota_raw}</div>}
          </div>
        )}
        <div className="card tile"><div className="label">Ошибок</div><div className="big" style={{ color: "var(--err)" }}>{s.errors}</div>
          <div className="muted mt" style={{ fontSize: 13 }}>средний ответ API {s.avg_ms != null ? `${(s.avg_ms / 1000).toFixed(1)} с` : "—"}</div></div>
      </div>
      <div className="tabs">
        {[["log", "Журнал"], ["dict", "Словарь"], ["tr", "Переводы"], ["alias", "Модели"], ["wmi", "Префиксы"], ["route", "Маршруты"], ["donor", "Доноры"], ["confirm", "Подтверждения"], ["miss", "Не нашлось в словаре"], ["check", "Проверка словаря"], ["vin", "Память VIN"]].map(([k, t]) =>
          <button key={k} className={tab === k ? "on" : ""} onClick={() => setTab(k)}>{t}</button>)}
      </div>
      {tab === "log" && <AdminLog users={s.users} />}
      {tab === "route" && <FallbackStats />}
      {["dict", "tr", "alias", "wmi", "route", "donor", "confirm"].includes(tab) && <AdminTable name={tab} />}
      {tab === "check" && <DictCheck />}
      {tab === "miss" && <DictMiss />}
      {tab === "vin" && (
        <div className="card">
          <b>Стереть VIN из памяти</b>
          <div className="muted mt" style={{ fontSize: 13 }}>Ответы по VIN хранятся навсегда, чтобы не тратить квоту. Стирать — только если ответ поставщика был ошибочным и нужно спросить заново.</div>
          <div className="row mt"><input className="cellin" style={{ width: 260 }} placeholder="VIN" value={forget} onChange={(e) => setForget(e.target.value)} />
            <button className="btn small" onClick={doForget} disabled={!forget}>Стереть</button></div>
        </div>
      )}
    </div>
  );
}

// ------------------------------------------------------------ тариф и оплата
const RUB = (n) => `${n}`.replace(/\B(?=(\d{3})+(?!\d))/g, " ") + " ₽";
const ORDER_KEY = "vc_last_order";

function PayResult({ orderId, onDone }) {
  const [st, setSt] = useState(null), [err, setErr] = useState("");
  useEffect(() => {
    // возврат из кассы сам по себе ничего не значит: деньги подтверждает вебхук,
    // и между «вернулся» и «зачислено» бывает пауза. Поэтому спрашиваем заказ.
    let stop = false, tries = 0;
    const ask = () => api(`/api/billing/order/${orderId}`).then((d) => {
      if (stop) return;
      setSt(d);
      if (d.status === "succeeded") { localStorage.removeItem(ORDER_KEY); onDone(); return; }
      if (d.status === "pending" && ++tries < 10) setTimeout(ask, 3000);
    }).catch((e) => setErr(e.message));
    ask();
    return () => { stop = true; };
  }, [orderId]);
  if (err) return <div className="note">Не удалось узнать судьбу платежа: {err}</div>;
  if (!st) return <div className="info">Проверяем платёж…</div>;
  if (st.status === "succeeded")
    return <div className="info"><b>Оплачено.</b> {RUB(st.amount_rub)} зачислены, лимиты уже обновлены.</div>;
  if (st.status === "canceled")
    return <div className="note"><b>Платёж отменён.</b> Деньги не списаны, можно начать заново.</div>;
  return <div className="note"><b>Ждём подтверждения кассы.</b> Обычно это минута.
    Лимиты обновятся сами, страницу можно закрыть.</div>;
}

function Billing({ setCtx, onPaid }) {
  const [d, setD] = useState(null), [cab, setCab] = useState(null);
  const [email, setEmail] = useState("");
  const [busy, setBusy] = useState(""), [err, setErr] = useState("");
  const [order, setOrder] = useState(() => localStorage.getItem(ORDER_KEY) || "");
  useEffect(() => {
    setCtx("тариф и оплата");
    api("/api/billing/plans").then(setD).catch((e) => setErr(e.message));
    api("/api/cabinet").then((c) => { setCab(c); if (c.email) setEmail(c.email); });
  }, []);
  if (err) return <div className="page"><div className="err">{err}</div></div>;
  if (!d) return <div className="page"><div className="muted">Загружаем…</div></div>;
  const u = (cab && cab.usage) || {};
  const ok = /^[^@\s]+@[^@\s.]+\.[^@\s]{2,}$/.test(email.trim());

  const pay = async (kind, item, qty) => {
    setBusy(`${kind}:${item}`); setErr("");
    try {
      const r = await api("/api/billing/pay", { body: { kind, item, qty, email: email.trim() } });
      localStorage.setItem(ORDER_KEY, r.order_id);
      location.href = r.confirmation_url;
    } catch (x) { setErr(x.message); setBusy(""); }
  };

  return (
    <div className="page bill">
      <h1>Тариф и оплата</h1>
      {order && <PayResult orderId={order} onDone={() => { setOrder(""); onPaid();
                    api("/api/cabinet").then(setCab); }} />}

      {u.requests_limit >= 0 && (
        <div className="card mt">
          <div className="label">Остаток на {u.period}</div>
          <div className="row wrap" style={{ gap: 28 }}>
            <div><b style={{ fontSize: 26 }}>{Math.max(0, u.requests_limit - u.requests_used)}</b>
              <span className="muted"> из {u.requests_limit} номеров</span></div>
            <div><b style={{ fontSize: 26 }}>{Math.max(0, u.vin_limit - u.vin_used)}</b>
              <span className="muted"> из {u.vin_limit} машин</span></div>
            <div className="muted2">тариф «{u.plan_name}»</div>
          </div>
        </div>
      )}

      {!d.enabled && <div className="note mt">Оплата скоро появится. Тарифы ниже — те, что будут
        действовать; пока не подключили кассу, доступ продлеваем вручную — напишите нам.</div>}

      {d.enabled && (
        <div className="card mt">
          <label className="label" htmlFor="payemail">Почта для чека</label>
          <input id="payemail" className="field" type="email" value={email} placeholder="you@example.com"
                 onChange={(e) => setEmail(e.target.value)} style={{ maxWidth: 420 }} />
          <div className="muted mt">Пришлём чек. Без почты оплатить нельзя — этого требует закон.</div>
        </div>
      )}

      <h2 className="mt">Тарифы</h2>
      <div className="plans">
        {d.plans.filter((p) => p.price > 0).map((p) => (
          <div className="card plan" key={p.id}>
            <div className="label">{p.name}</div>
            <div className="price">{RUB(p.price)}<span className="per"> / мес</span></div>
            <ul><li><b>{p.requests}</b> {plural(p.requests, "раскрытие", "раскрытия", "раскрытий")} номеров</li>
              <li><b>{p.vin}</b> {plural(p.vin, "машина", "машины", "машин")} по VIN</li></ul>
            <button className="btn small" disabled={!d.enabled || !ok || busy === `plan:${p.id}`}
                    title={!d.enabled ? "оплата пока не подключена" : (!ok ? "сначала почта для чека" : "")}
                    onClick={() => pay("plan", p.id, 1)}>
              {busy === `plan:${p.id}` ? "Открываем кассу…" : "Оплатить"}</button>
          </div>
        ))}
      </div>

      <h2 className="mt">Докупка сверх тарифа</h2>
      <div className="plans">
        {d.packs.map((p) => (
          <div className="card plan" key={p.id}>
            <div className="label">{p.name}</div>
            <div className="price">{RUB(p.price)}<span className="per"> / {p.unit} {plural(p.unit, "штука", "штуки", "штук")}</span></div>
            <button className="btn small" disabled={!d.enabled || !ok || busy === `pack:${p.id}`}
                    title={!d.enabled ? "оплата пока не подключена" : (!ok ? "сначала почта для чека" : "")}
                    onClick={() => pay("pack", p.id, 1)}>
              {busy === `pack:${p.id}` ? "Открываем кассу…" : "Оплатить"}</button>
          </div>
        ))}
      </div>
      {d.public_pages && <p className="muted mt">Условия — в <a href="/oferta">публичной оферте</a>.</p>}
    </div>
  );
}

// ------------------------------------------------------------ приложение
function App() {
  const [me, setMe] = useState(undefined);
  const [ctx, setCtx] = useState("");
  const [lastSearch, setLastSearch] = useState(null);
  const route = useRoute();
  const refreshMe = useCallback(() => api("/api/me").then(setMe).catch(() => setMe(null)), []);
  useEffect(() => { refreshMe(); const f = () => setMe(null); addEventListener("vc-logout", f); return () => removeEventListener("vc-logout", f); }, []);
  useEffect(() => { setCtx(""); }, [route.parts.join("/")]);
  STAFF = !!(me && me.staff);
  if (me === undefined) return null;
  const linkMatch = location.hash.match(/^#\/in\/([\w-]+)(?:\/([\w-]+))?/) || [];
  if (!me && linkMatch[1]) return <LoginByLink token={linkMatch[1]} to={linkMatch[2] || ""} />;
  if (!me) return <Login onIn={setMe} />;
  const logout = async () => { if (confirm("Выйти?")) { await api("/api/logout", { body: {} }); setMe(null); } };
  const [a, vin, sub] = route.parts;
  let page;
  if (a === "vin" && vin && sub === "parts") page = <Parts vin={vin} route={route} setCtx={setCtx} lastSearch={lastSearch} setLastSearch={setLastSearch} />;
  else if (a === "vin" && vin && sub === "scheme") page = <Scheme vin={vin} route={route} setCtx={setCtx} lastSearch={lastSearch} />;
  else if (a === "vin" && vin) page = <Vehicle vin={vin} route={route} setCtx={setCtx} />;
  else if (a === "admin") page = <Admin me={me} setCtx={setCtx} onQuota={refreshMe} />;
  else if (a === "cabinet") page = <Billing setCtx={setCtx} onPaid={refreshMe} />;
  else if (a === "scd-models" && vin) page = <ScdModels wmi={vin} setCtx={setCtx} brand={route.q.brand || ""} />;
  else if (a === "scd-brands" && vin) page = <ScdBrands wmi={vin} setCtx={setCtx} />;
  else if (a === "car" && vin) page = <CarScreen vin={vin} route={route} setCtx={setCtx} setLastSearch={setLastSearch} />;
  else if (a === "scd" && vin && sub === "d") page = <ScdDiagram vid={vin} route={route} setCtx={setCtx} />;
  else if (a === "scd" && vin) page = <ScdCatalog vid={vin} route={route} setCtx={setCtx} />;
  else page = <Home me={me} onQuota={refreshMe} />;
  return (<><Top me={me} ctx={ctx} onLogout={logout} />{page}</>);
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);