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 carTitle = (v) => v.alias || [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>}
        <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>
        <button className="who" onClick={onLogout} title="Выйти">{me.name}</button>
      </div>
    </div>
  );
}

// ------------------------------------------------------------ 0. вход по ПИН
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 + последние
function Home({ me, onQuota }) {
  const [vin, setVin] = useState(""), [err, setErr] = useState(""), [busy, setBusy] = useState(false);
  const [recent, setRecent] = useState(null);
  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 local = clean.length >= 3 ? (wmi.find((w) => w.wmi === clean.slice(0, 3))
    || (clean[0] !== "L" ? { wmi: clean.slice(0, 3), generic: true } : null)) : null;
  const submit = async (e) => {
    e.preventDefault(); setErr("");
    if (!/^[A-HJ-NPR-Z0-9]{17}$/.test(clean)) { setErr("VIN — 17 знаков, латиница и цифры, без I, O, Q"); return; }
    setBusy(true);
    try { await api("/api/vin", { body: { vin: clean } }); onQuota(); go(`/vin/${clean}`); }
    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>
          <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.generic
                ? <b>Префикс {local.wmi} — машина собрана не в Китае (VIN китайских заводов начинаются на L).</b>
                : <b>Префикс {local.wmi} — {local.brands}, сборка: {local.plant}.</b>} Китайские каталоги VIN местной сборки обычно не знают —
              скорее всего, машина не найдётся. Квоту это не тратит: поставщик списывает запрос только за найденный VIN. {local.note}
            </div>
          )}
          {err && <div className="err">{err}</div>}
        </form>
        <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} href={`#/vin/${r.vin}`}>
              <span className="mono">{r.vin}</span>
              {r.found ? <span className="muted2">{[r.title, r.engine, r.year].filter(Boolean).join(" · ")}</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 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}`).then(setV).catch((x) => setErr(x.message)); }, [vin]);
  useEffect(() => { if (v && v.found) 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) return (
    <div className="page"><div className="card">
      <h1 className="mono" style={{ fontSize: 22 }}>{vin}</h1>
      <p>Поставщик не нашёл этот VIN в своей базе (код {v.code}, «{v.msg}»).</p>
      {v.local ? (
        <div className="note">
          {v.local.generic
            ? <b>Почему: префикс {v.local.wmi} — машина собрана не в Китае (VIN китайских заводов начинаются на L). Какой это завод, у нас пока не записано.</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>
      )}
      <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;
  const vinYear = v.trims.filter((t) => t.vin_year);
  const other = 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>{carTitle(v)}</h1>
        <div className="muted2">в базе поставщика: <b style={{ color: "var(--ink)" }}>{v.brand} {v.sys}</b>
          {v.alias ? " — внутреннее китайское название той же машины" : " — русское название модели не задано (админка → Модели)"}</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>{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">Комплектации {v.vin_year} года{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>
  );
}

// ------------------------------------------------------------ 3. подбор
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.partNumber}|${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()];
}

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

function PriceBox({ p, onScheme }) {
  const price = parseFloat(p.partPrice);
  return (
    <div style={{ flexShrink: 0, textAlign: "right", display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 6 }}>
      {price > 0 ? <><div className="price">{price.toFixed(0)} ¥</div><div className="muted" style={{ fontSize: 12 }}>заводская цена</div></>
                 : <div className="muted" style={{ fontSize: 14 }}>цены в прайсе нет</div>}
      <div className="kv">кол-во в позиции: <b>{p.qty || "—"}</b></div>
      {p.image && <button className="linkbtn" onClick={() => onScheme(p)}>Схема узла{p.refs && p.refs.length ? ` · поз. ${p.refs.join(", ")}` : ""}</button>}
    </div>
  );
}

function PartCard({ p, onScheme }) {
  const b = BADGE[p.badge];
  return (
    <div className={`part ${p.badge}`}>
      <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" }}>
            <span className="pn">{p.partNumber}</span>
            <span className={`badge ${b.cls}`} title={b.hint}>{b.text}</span>
          </div>
          <PartBody p={p} />
          {p.badge === "analog" && <div className="kv mt" style={{ color: "var(--warn-ink)" }}>{b.hint}</div>}
        </div>
        <PriceBox p={p} onScheme={onScheme} />
      </div>
    </div>
  );
}

function Variants({ list, onScheme }) {
  const dated = list.some((p) => p.date_split);
  return (
    <div className="part" style={{ borderLeftColor: "var(--warn)", borderColor: "var(--warn-line)" }}>
      <div style={{ fontWeight: 600, color: "var(--warn-ink)" }}>
        {list.length} варианта «{list[0].stdPartName_ru || list[0].stdPartName}» — {dated ? "зависят от даты сборки машины" : "смотрите примечания"}
      </div>
      <div className="variants">
        {list.map((p) => {
          const b = BADGE[p.badge];
          return (
            <div key={p.partNumber + (p.comment || "")} className="part" style={{ background: "var(--soft)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", marginBottom: 6 }}>
                <span className="pn" style={{ fontSize: 18 }}>{p.partNumber}</span>
                <span className={`badge ${b.cls}`} title={b.hint}>{b.text}</span>
              </div>
              <PartBody p={p} compact />
              <div className="mt"><PriceBox p={p} onScheme={onScheme} /></div>
            </div>
          );
        })}
      </div>
      {dated && <div className="kv mt" style={{ lineHeight: 1.5 }}>Точная дата сборки по VIN не приходит — только год. Проверьте по ПТС, табличке в проёме двери или по резьбе колёсного болта.</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}`).then(setV).catch((x) => setErr(x.message)); }, [vin]);
  const trim = v && 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.partNumber)}${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>

      <form className="row" onSubmit={(e) => { e.preventDefault(); run(); }}>
        <label htmlFor="q" className="sr">Название или номер детали</label>
        <input id="q" className="field" value={q} onChange={(e) => setQ(e.target.value)}
               placeholder="колодки передние · фильтр масляный · 204000453AA" autoFocus />
        <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.mode !== "no_dict" && (
        <>
          <div className="legend">
            <span>{res.mode === "oe" ? "Поиск по номеру" : res.mode === "zh" ? "Поиск по-китайски" : `Запрос к поставщику: ${res.keys.join(", ")}`}</span>
            <span>найдено {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>
            </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} />
            : list.map((p) => <PartCard key={p.key + p.partNumber + (p.comment || "")} p={p} onScheme={onScheme} />))}
        </>
      )}
    </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.partNumber + p.ref) && seen.add(p.partNumber + 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.partNumber === focus ? "on" : ""}`}>
                  <span className="n">{p.ref || "–"}</span>
                  <div style={{ flexGrow: 1 }}>
                    <div className="mono" style={{ fontSize: 15 }}>{p.partNumber}</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.length > 0 && (
              <button className="btn" style={{ width: "100%", marginTop: 16 }}
                      onClick={() => navigator.clipboard && navigator.clipboard.writeText(list.map((p) => p.partNumber).join("\n"))}>Скопировать номера</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", "Что сказать менеджеру"]], pk: "wmi" },
  alias: { title: "Русские названия моделей", cols: [["brand", "Марка (кит.)"], ["sys", "Модель у поставщика"], ["ru_name", "Название для менеджера"]], pk: "id" },
};

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 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>
        <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", "Префиксы"], ["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 === "dict" || tab === "tr" || tab === "alias" || tab === "wmi") && <AdminTable name={tab} />}
      {tab === "check" && <DictCheck />}
      {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>
  );
}

// ------------------------------------------------------------ приложение
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("/")]);
  if (me === undefined) return null;
  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 page = <Home me={me} onQuota={refreshMe} />;
  return (<><Top me={me} ctx={ctx} onLogout={logout} />{page}</>);
}

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