// MDM SORP — Capability matrix, Nomenclature, Documents, Sanctions, Search, Form-link, Schema.

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

/* =====================  CAPABILITY MATRIX  ===================== */
function CapabilityScreen({ navigate }) {
  const { lang, t } = useI18n();
  const cats = ["Подш. качения", "Подш. конические", "Гидравлика 8481", "ЧПУ Siemens 840D", "Редукторы", "Литьё чугунное", "Метизы A4", "Прокатные валки"];
  const suppliers = [
    { p: "p_2001", name: "SKF Middle East FZE", c: "ae", rel: "Производитель", russia: "neutral", loi: true, vals: [0.96, 0.92, 0, 0, 0, 0, 0, 0] },
    { p: "p_2002", name: "Schaeffler Middle East FZE", c: "ae", rel: "Производитель", russia: "neutral", loi: true, vals: [0.94, 0.88, 0, 0, 0.4, 0, 0, 0] },
    { p: "p_2004", name: "Wuxi WLR Bearings", c: "cn", rel: "Производитель", russia: "friendly", loi: false, vals: [0.91, 0.85, 0, 0, 0, 0.3, 0, 0] },
    { p: "p_2005", name: "Erkunt Sanayi A.Ş.", c: "tr", rel: "Производитель", russia: "neutral", loi: false, vals: [0, 0, 0, 0, 0.72, 0.88, 0, 0] },
    { p: "p_2006", name: "Siemens (Shanghai)", c: "cn", rel: "Дистрибутор", russia: "review", loi: false, vals: [0, 0, 0.7, 0.74, 0, 0, 0, 0] },
    { p: null, name: "Bosch Rexroth ME", c: "ae", rel: "Дистрибутор", russia: "neutral", loi: true, vals: [0, 0, 0.94, 0.5, 0.6, 0, 0, 0] },
    { p: null, name: "ZWZ Wafangdian Bearing", c: "cn", rel: "Производитель", russia: "friendly", loi: false, vals: [0.85, 0.78, 0, 0, 0, 0, 0, 0] },
    { p: null, name: "Vesuvius UAE Trading", c: "ae", rel: "Дистрибутор", russia: "neutral", loi: true, vals: [0, 0, 0, 0, 0, 0, 0, 0.92] },
    { p: null, name: "Severstal Forge LLC", c: "ae", rel: "Производитель", russia: "—", loi: true, vals: [0, 0, 0, 0, 0.5, 0.6, 0.96, 0.7] },
  ];

  return (
    <div style={{ flex: 1, overflow: "auto" }}>
      <div className="grid-toolbar">
        <h2>{lang === "ru" ? "Матрица возможностей" : "Capability matrix"}</h2>
        <span className="count tabular">{suppliers.length} поставщиков × {cats.length} категорий</span>
        <button className="filter-pill active">Страна: AE, CN, TR</button>
        <button className="filter-pill">Отношения с РФ: дружественные</button>
        <button className="filter-pill">LOI подписан</button>
        <div style={{ flex: 1 }}/>
        <button className="btn ghost sm"><Icon name="filter" size={12}/> Все фильтры</button>
        <button className="btn ghost sm"><Icon name="download" size={12}/> Export</button>
      </div>

      <div style={{ padding: 16, overflow: "auto" }}>
        <div className="card">
          <div style={{ overflow: "auto" }}>
            <table className="dg dense" style={{ tableLayout: "fixed", width: "100%" }}>
              <colgroup>
                <col style={{ width: 240 }}/>
                <col style={{ width: 60 }}/>
                <col style={{ width: 110 }}/>
                <col style={{ width: 80 }}/>
                <col style={{ width: 80 }}/>
                {cats.map((_, i) => <col key={i} style={{ width: 90 }}/>)}
              </colgroup>
              <thead>
                <tr>
                  <th>Поставщик</th>
                  <th>Страна</th>
                  <th>Тип</th>
                  <th>РФ</th>
                  <th>LOI</th>
                  {cats.map((c, i) => <th key={i} style={{ writingMode: "vertical-rl", transform: "rotate(180deg)", textAlign: "left", padding: "8px 4px", height: 100, verticalAlign: "bottom" }}>{c}</th>)}
                </tr>
              </thead>
              <tbody>
                {suppliers.map((s, i) => (
                  <tr key={i} onClick={() => s.p && navigate("party", { id: s.p })}>
                    <td><strong>{s.name}</strong></td>
                    <td><Flag code={s.c}/></td>
                    <td className="muted">{s.rel}</td>
                    <td>{s.russia === "friendly" ? <Chip tone="success">друж.</Chip> : s.russia === "review" ? <Chip tone="warning">review</Chip> : <Chip tone="outline">{s.russia}</Chip>}</td>
                    <td>{s.loi ? <Chip tone="success">✓</Chip> : <Chip tone="outline">—</Chip>}</td>
                    {s.vals.map((v, j) => (
                      <td key={j} style={{ textAlign: "center", background: v > 0 ? `rgba(214,61,74,${(v * 0.55).toFixed(2)})` : "transparent", color: v > 0.5 ? "#fff" : "var(--fg-1)", fontWeight: v > 0 ? 600 : 400 }}>
                        {v > 0 ? Math.round(v * 100) : <span className="empty-cell">·</span>}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
        <div className="muted" style={{ marginTop: 12, fontSize: 12 }}>
          Значения — confidence-оценка от ИИ (0–100) с учётом каталога, открытых источников и истории сделок. Клик по ячейке откроет таблицу источников.
        </div>
      </div>
    </div>
  );
}

/* =====================  NOMENCLATURE  ===================== */
function NomenclatureScreen({ navigate }) {
  const { lang, t } = useI18n();
  const rows = [
    { id: "n_4421", sku: "SKF 6313-2RS1/C3", name: "Подшипник радиальный однорядный 65×140×33 мм", hs: "8482.10", category: "bearings", an: 4, sup: 3 },
    { id: "n_4422", sku: "SKF 6315-2Z/C3", name: "Подшипник радиальный однорядный 75×160×37 мм", hs: "8482.10", category: "bearings", an: 4, sup: 3 },
    { id: "n_4438", sku: "SKF 32320/Q", name: "Подшипник конический 100×215×77.5 мм", hs: "8482.20", category: "bearings", an: 3, sup: 2 },
    { id: "n_4501", sku: "SKF 22220 E", name: "Подшипник самовыравнивающийся 100×180×46 мм", hs: "8482.30", category: "bearings", an: 5, sup: 4 },
    { id: "n_4502", sku: "NN3014K/P5", name: "Подшипник двухрядный цилиндрический", hs: "8482.10", category: "bearings", an: 2, sup: 1 },
    { id: "n_5102", sku: "BOSCH 4WE6E62/EW230N9K4", name: "Гидрораспределитель Bosch Rexroth 4/3", hs: "8481.20", category: "hydraulics", an: 1, sup: 2 },
    { id: "n_5103", sku: "FESTO ADVU-25-50-A-P-A", name: "Цилиндр пневматический ADVU 25×50", hs: "8412.31", category: "pneumatics", an: 1, sup: 1 },
    { id: "n_6004", sku: "Siemens 6FC5398-1AP10-0AA1", name: "Карта ЧПУ Siemens 840D", hs: "8537.10", category: "cnc", an: 0, sup: 1 },
  ];
  const categoryOpts = [
    { value: "bearings",   label: "Подшипники",     color: "blue" },
    { value: "hydraulics", label: "Гидравлика",     color: "teal" },
    { value: "pneumatics", label: "Пневматика",     color: "purple" },
    { value: "cnc",        label: "ЧПУ / электроника", color: "orange" },
  ];
  const columns = [
    { id: "id", label: "ID", type: "text", width: 90, mono: true },
    { id: "sku", label: "Артикул", type: "primary", width: 280 },
    { id: "name", label: "Название", type: "text", width: 360 },
    { id: "hs", label: "HS-код", type: "text", width: 110, mono: true },
    { id: "category", label: "Категория", type: "select", width: 200, options: categoryOpts },
    { id: "an", label: "Аналогов", type: "number", width: 100 },
    { id: "sup", label: "Поставщиков", type: "number", width: 110 },
  ];
  const views = [
    { name: "Все", kind: "grid", count: rows.length },
    { name: "Группа по категории", kind: "grid", groupBy: "category", sort: [{ field: "an", dir: "desc" }] },
    { name: "Без аналогов", kind: "grid", filter: [{ field: "an", op: "is", value: 0 }] },
    { name: "Карты", kind: "gallery" },
  ];
  return (
    <AirtableGrid entity="nomenclature" views={views} columns={columns} rows={rows} primaryField="sku" navigate={navigate}/>
  );
}

/* =====================  DOCUMENTS  ===================== */
function DocumentsScreen({ navigate }) {
  const { lang, t } = useI18n();
  const rows = [
    { id: "d_001", name: "КП-Schaeffler-SORP-3929-v3.pdf", type: "proposal", deal: [{ id: "SORP-3929", label: "ТМК подшипники" }], size: "486 KB", date: "2026-05-26", scan: false },
    { id: "d_002", name: "Spec-bearings-confirmed.xlsx", type: "spec", deal: [{ id: "SORP-3929", label: "ТМК подшипники" }], size: "112 KB", date: "2026-05-22", scan: false },
    { id: "d_003", name: "Заявка-Магнитка-Bosch.pdf", type: "inquiry", deal: [{ id: "SORP-3941", label: "Bosch Магнитка" }], size: "1.4 MB", date: "2026-04-25", scan: true },
    { id: "d_004", name: "Invoice INV-2026-04321.pdf", type: "invoice", deal: [{ id: "SORP-3929", label: "ТМК подшипники" }], size: "230 KB", date: "2026-05-20", scan: true },
    { id: "d_005", name: "Bill_of_Lading_MSC_38421.pdf", type: "customs", deal: [{ id: "SORP-3941", label: "Bosch Магнитка" }], size: "1.8 MB", date: "2026-05-18", scan: true },
    { id: "d_006", name: "Pmt-Caspian-USD-104k.pdf", type: "payment", deal: [{ id: "SORP-3941", label: "Bosch Магнитка" }], size: "210 KB", date: "2026-05-16", scan: false },
    { id: "d_007", name: "EAC-cert-SKF-bearings.pdf", type: "cert", deal: [{ id: "SORP-3929", label: "ТМК подшипники" }], size: "780 KB", date: "2026-04-30", scan: false },
    { id: "d_008", name: "Photo-pre-shipment-MMK.jpg", type: "photo", deal: [{ id: "SORP-3941", label: "Bosch Магнитка" }], size: "3.4 MB", date: "2026-05-24", scan: false },
  ];
  const typeOpts = [
    { value: "inquiry",  label: "Заявка",      color: "gray" },
    { value: "proposal", label: "КП",          color: "blue" },
    { value: "spec",     label: "Спецификация", color: "teal" },
    { value: "invoice",  label: "Инвойс",      color: "purple" },
    { value: "customs",  label: "Таможня",     color: "yellow" },
    { value: "payment",  label: "Платёж",      color: "green" },
    { value: "photo",    label: "Фото",        color: "pink" },
    { value: "cert",     label: "Сертификат",  color: "orange" },
  ];
  const columns = [
    { id: "name", label: "Файл", type: "primary", width: 360 },
    { id: "type", label: "Тип (ИИ)", type: "select", width: 160, options: typeOpts },
    { id: "deal", label: "Сделка", type: "linked", width: 220 },
    { id: "date", label: "Дата", type: "date", width: 140 },
    { id: "size", label: "Размер", type: "text", width: 90, mono: true },
    { id: "scan", label: "Скан", type: "select", width: 110, options: [{ value: true, label: "Скан + OCR", color: "yellow" }, { value: false, label: "Цифровой", color: "gray" }] },
  ];
  const views = [
    { name: "Все документы", kind: "grid", count: rows.length, sort: [{ field: "date", dir: "desc" }] },
    { name: "По типу", kind: "kanban", stackBy: "type" },
    { name: "Сканы + OCR", kind: "grid", filter: [{ field: "scan", op: "is", value: true }] },
    { name: "Группа по сделке", kind: "grid", groupBy: "deal" },
  ];
  return <AirtableGrid entity="documents" views={views} columns={columns} rows={rows} primaryField="name" navigate={navigate}/>;
}

/* =====================  SANCTIONS  ===================== */
function SanctionsScreen({ navigate }) {
  const { lang, t } = useI18n();
  return (
    <>
      <div className="grid-toolbar">
        <h2>{t("sanctions")}</h2>
        <span className="count tabular">3 активных · 12 за всё время</span>
        <button className="filter-pill active">Требует решения</button>
        <button className="filter-pill">Решено</button>
        <button className="filter-pill">False positive</button>
        <div style={{ flex: 1 }}/>
        <span className="muted" style={{ fontSize: 11 }}>Последний скрининг: 2026-05-27 03:21 · OpenSanctions</span>
        <button className="btn ghost sm"><Icon name="shield" size={12}/> Запустить скрининг</button>
      </div>
      <div style={{ padding: 20 }}>
        {[
          { who: "Siemens (Shanghai) Industrial Trading", role: "supplier", list: "EAR99 advisory", det: "Связь с подсанкционной материнской · OFAC press 2026-05-24", deals: 2, val: 91000, severity: "review" },
          { who: "SORP-3955 поз. 04 — Подшипник 7224", role: "deal_item", list: "Dual-use HS 8482.10", det: "Возможное применение в военной технике (роликовые подшипники для прокатных станов)", deals: 1, val: 18400, severity: "flag" },
          { who: "Конечник = ТМК Волжский (≠ Северсталь-Метиз)", role: "end_user", list: "Внутренняя политика", det: "Конечный получатель отличается от заказчика. Требуется LOA от конечника для подтверждения end-use.", deals: 1, val: 1204000, severity: "review" },
        ].map((c, i) => (
          <div key={i} className="card" style={{ marginBottom: 12, padding: 16 }}>
            <div className="row" style={{ alignItems: "flex-start" }}>
              <div style={{ width: 40, height: 40, borderRadius: 10, background: c.severity === "flag" ? "var(--sorp-red-wash)" : "rgba(199,122,31,0.10)", color: c.severity === "flag" ? "var(--sorp-red)" : "var(--status-warning)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name="shield" size={20}/>
              </div>
              <div style={{ flex: 1, marginLeft: 12 }}>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{c.who}</div>
                <div className="row" style={{ marginTop: 4, gap: 6 }}>
                  <RoleChip role={c.role === "deal_item" ? "supplier" : c.role}/>
                  <Chip tone={c.severity === "flag" ? "danger" : "warning"}>{c.list}</Chip>
                  <Chip tone="outline">{c.deals} сделок</Chip>
                  <Chip tone="outline">${(c.val / 1000).toFixed(0)}k</Chip>
                </div>
                <div className="muted" style={{ marginTop: 8, fontSize: 12.5, maxWidth: 720 }}>{c.det}</div>
              </div>
              <div className="row" style={{ gap: 6 }}>
                <button className="btn ghost sm"><Icon name="eye" size={12}/> Детали</button>
                <button className="btn sm">Запросить документы</button>
                <button className="btn primary sm">Принять решение</button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

/* =====================  GLOBAL SEARCH (Ask AI overlay)  ===================== */
function SearchScreen({ navigate, query }) {
  const { lang, t } = useI18n();
  const [q, setQ] = useState(query || "подшипники в обход санкций");
  const [tab, setTab] = useState("ai");
  return (
    <div style={{ flex: 1, overflow: "auto" }}>
      <div style={{ background: "var(--bg-surface)", borderBottom: "1px solid var(--border-subtle)", padding: "20px 24px" }}>
        <div className="omnibox" style={{ maxWidth: 720, margin: 0 }}>
          <Icon name="search" size={14} className="icon"/>
          <input value={q} onChange={(e) => setQ(e.target.value)}/>
          <span className="hk">⏎</span>
        </div>
        <div className="row" style={{ marginTop: 12, gap: 4 }}>
          <button className={"tab " + (tab === "ai" ? "active" : "")} onClick={() => setTab("ai")}><Icon name="sparkle" size={12}/> {t("ask_ai")}</button>
          <button className={"tab " + (tab === "all" ? "active" : "")} onClick={() => setTab("all")}>Все <span className="count">28</span></button>
          <button className={"tab " + (tab === "deal" ? "active" : "")} onClick={() => setTab("deal")}>Сделки <span className="count">6</span></button>
          <button className={"tab " + (tab === "party" ? "active" : "")} onClick={() => setTab("party")}>Контрагенты <span className="count">8</span></button>
          <button className={"tab " + (tab === "doc" ? "active" : "")} onClick={() => setTab("doc")}>Документы <span className="count">11</span></button>
          <button className={"tab " + (tab === "nom" ? "active" : "")} onClick={() => setTab("nom")}>Номенклатура <span className="count">3</span></button>
        </div>
      </div>

      {tab === "ai" && <AiAnswer q={q} navigate={navigate}/>}
      {tab !== "ai" && (
        <div style={{ padding: 24, maxWidth: 920 }}>
          {window.DATA.searchResults.filter(r => tab === "all" || r.type === tab).map(r => (
            <div key={r.id} className="card" style={{ marginBottom: 8, padding: 14, cursor: "pointer" }} onClick={() => navigate(r.type === "deal" ? "deal" : "party", { id: r.id })}>
              <div className="row">
                <Chip tone="outline">{r.type}</Chip>
                <strong style={{ marginLeft: 8 }}>{r.title}</strong>
                <span style={{ flex: 1 }}/>
                <span className="mono muted" style={{ fontSize: 11 }}>{r.id}</span>
              </div>
              <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{r.sub}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function AiAnswer({ q, navigate }) {
  return (
    <div style={{ padding: 24, maxWidth: 920 }}>
      <div className="card" style={{ padding: 20 }}>
        <div className="row" style={{ marginBottom: 12 }}>
          <Icon name="sparkle" size={16} style={{ color: "var(--sorp-red)" }}/>
          <strong style={{ marginLeft: 6 }}>ИИ-ответ</strong>
          <span className="muted" style={{ marginLeft: 8, fontSize: 11 }}>Claude · 2.4 секунды · 5 источников</span>
          <span style={{ flex: 1 }}/>
          <button className="btn ghost sm"><Icon name="undo" size={12}/> Перегенерировать</button>
        </div>
        <div style={{ fontSize: 14, lineHeight: 1.65 }}>
          <p>По матрице возможностей и истории сделок <strong>4 поставщика</strong> в нашей базе могут поставить промышленные подшипники без риска вторичных санкций для конечника:</p>
          <ol style={{ paddingLeft: 20 }}>
            <li><strong>SKF Middle East FZE</strong> (JAFZA, OAE) — прямой производитель, складская программа<sup style={{ color: "var(--sorp-red)" }}>[1]</sup>. История 14 сделок, средний lead 32 дня.</li>
            <li><strong>Wuxi WLR Bearings</strong> (Китай) — независимый производитель, дружественная юрисдикция<sup style={{ color: "var(--sorp-red)" }}>[2]</sup>. MOQ 100 шт.</li>
            <li><strong>ZWZ Wafangdian</strong> (Китай) — каталог под HS 8482.10, в номенклатуре есть аналог 7224C<sup style={{ color: "var(--sorp-red)" }}>[3]</sup>.</li>
            <li><strong>Erkunt Sanayi</strong> (Турция) — комплектующие через производство, см. <a onClick={() => navigate("party", { id: "p_2005" })} style={{ color: "var(--sorp-red)", cursor: "pointer" }}>карточку поставщика</a>.</li>
          </ol>
          <p style={{ marginTop: 12 }}><strong>Внимание:</strong> Siemens (Shanghai) сейчас под review из-за advisory OFAC<sup style={{ color: "var(--sorp-red)" }}>[4]</sup>. На уровне позиций — подшипник 7224 имеет dual-use флаг (HS 8482.10) для прокатных станов<sup style={{ color: "var(--sorp-red)" }}>[5]</sup>, требуется LOA от конечника.</p>
        </div>
        <div className="divider"/>
        <div className="t-eyebrow" style={{ marginBottom: 8 }}>Источники</div>
        {[
          { i: 1, name: "Capability matrix · SKF Middle East FZE", path: "/parties/p_2001" },
          { i: 2, name: "Capability matrix · Wuxi WLR", path: "/parties/p_2004" },
          { i: 3, name: "Nomenclature · аналоги для 7224", path: "/nomenclature/n_4501" },
          { i: 4, name: "OpenSanctions advisory · 2026-05-24", path: "external" },
          { i: 5, name: "Comment in Asana task 1207001984822", path: "asana://..." },
        ].map(s => (
          <div key={s.i} className="row" style={{ padding: "6px 0", fontSize: 12.5, borderBottom: "1px solid var(--neutral-100)" }}>
            <span style={{ width: 24, color: "var(--sorp-red)", fontWeight: 700 }}>[{s.i}]</span>
            <Icon name="file" size={13} className="muted"/>
            <span style={{ marginLeft: 6 }}>{s.name}</span>
            <span className="mono muted" style={{ marginLeft: "auto", fontSize: 11 }}>{s.path}</span>
            <button className="btn ghost sm"><Icon name="arrow_up_right" size={11}/></button>
          </div>
        ))}
      </div>
    </div>
  );
}

/* =====================  EXTERNAL FORM-LINK  ===================== */
function FormLinkScreen() {
  const [vals, setVals] = useState({
    phone: "+7 916 ", inn: "", role: "contact", note: ""
  });
  const [saving, setSaving] = useState(false);
  const [done, setDone] = useState(false);
  const filled = (vals.phone.length > 8 ? 1 : 0) + (vals.inn ? 1 : 0);
  const total = 2;

  if (done) {
    return (
      <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "var(--bg-page)" }}>
        <div style={{ width: 460, textAlign: "center", padding: 40 }}>
          <div style={{ display: "inline-flex", width: 64, height: 64, borderRadius: 999, background: "rgba(47, 125, 91, 0.10)", color: "var(--status-success)", alignItems: "center", justifyContent: "center" }}>
            <Icon name="check" size={32}/>
          </div>
          <h2 style={{ marginTop: 16 }}>Спасибо</h2>
          <div className="muted" style={{ marginTop: 8 }}>Данные отправлены стюарду на проверку. Ссылка стала недействительной.</div>
        </div>
      </div>
    );
  }

  return (
    <div style={{ minHeight: "100vh", background: "var(--bg-page)", padding: "32px 16px" }}>
      <div style={{ maxWidth: 580, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 24 }}>
          <img src="assets/logo-dark.png" style={{ height: 24, opacity: 0.9 }}/>
          <h1 style={{ marginTop: 16, fontSize: 22 }}>Уточните данные по контрагенту</h1>
          <div className="muted" style={{ marginTop: 6, maxWidth: 460, margin: "6px auto 0" }}>
            Сергей К. из SORP попросил дополнить запись. Заполните только то, что знаете — ссылка действует до <strong>2026-05-29</strong>.
          </div>
        </div>

        <div className="card" style={{ padding: 0 }}>
          <div style={{ padding: "12px 20px", background: "var(--bg-page)", borderBottom: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", gap: 12, fontSize: 12 }}>
            <span className="t-eyebrow">Запись</span>
            <span className="mono">p_9007</span>
            <span style={{ flex: 1 }}/>
            <span className="muted">Сделка</span>
            <span className="mono" style={{ color: "var(--sorp-red)" }}>SORP-3974</span>
          </div>

          <div style={{ padding: 24 }}>
            <FormField label="Полное имя контактного лица" placeholder="Иванов Алексей Сергеевич">
              <input type="text" placeholder="Иванов Алексей Сергеевич" autoFocus style={ffInput}/>
              <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>В нашей базе у этой записи в имени попал служебный ID. Подскажите настоящее.</div>
            </FormField>

            <FormField label="Телефон" hint="формат: +7 916 123-45-67">
              <input type="tel" value={vals.phone} onChange={(e) => setVals(v => ({ ...v, phone: e.target.value }))} style={ffInput}/>
              <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>У нас сейчас: <code style={{ background: "var(--bg-page)", padding: "1px 6px", borderRadius: 4 }}>+7-916-четыре-нольсем</code> — текст вместо цифр</div>
            </FormField>

            <FormField label="E-mail">
              <input type="email" placeholder="ivanov@severstal-metiz.com" style={ffInput}/>
              <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>В записи: <code style={{ background: "var(--bg-page)", padding: "1px 6px", borderRadius: 4 }}>ivanov@…</code> — обрезано</div>
            </FormField>

            <FormField label="Роль" hint="кем является в сделке">
              <div className="row" style={{ gap: 6 }}>
                {[
                  { id: "contact", l: "Контакт" }, { id: "buyer", l: "Покупатель" },
                  { id: "tech", l: "Технический специалист" }, { id: "manager", l: "Руководитель" },
                ].map(o => (
                  <button key={o.id} className={"filter-pill " + (vals.role === o.id ? "active" : "")}
                          onClick={() => setVals(v => ({ ...v, role: o.id }))}>{o.l}</button>
                ))}
              </div>
            </FormField>

            <FormField label="Комментарий" hint="опционально, любые подробности">
              <textarea rows="3" style={{ ...ffInput, resize: "vertical", padding: 10 }}/>
            </FormField>
          </div>

          <div style={{ padding: 16, borderTop: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", gap: 12, background: "var(--bg-page)" }}>
            <div style={{ flex: 1 }}>
              <div className="row" style={{ fontSize: 12, marginBottom: 4 }}>
                <span className="muted">Прогресс</span>
                <span style={{ flex: 1 }}/>
                <span className="tabular">{filled}/{total} обязательных</span>
              </div>
              <div style={{ height: 4, background: "var(--neutral-200)", borderRadius: 2 }}>
                <div style={{ width: (filled / total * 100) + "%", height: "100%", background: "var(--sorp-red)", borderRadius: 2 }}/>
              </div>
            </div>
            <button className="btn primary lg" disabled={saving} onClick={() => { setSaving(true); setTimeout(() => setDone(true), 600); }}>
              {saving ? "Отправляем…" : "Отправить"} <Icon name="arrow_right" size={13}/>
            </button>
          </div>
        </div>

        <div className="muted" style={{ marginTop: 16, textAlign: "center", fontSize: 11 }}>
          Защищённая одноразовая ссылка · SSL · данные шифруются · вход в систему не требуется
        </div>
      </div>
    </div>
  );
}

const ffInput = {
  width: "100%",
  border: "1px solid var(--border-subtle)",
  borderRadius: 8,
  padding: "10px 12px",
  fontSize: 14,
  background: "var(--bg-surface)",
  fontFamily: "var(--font-sans)",
};

function FormField({ label, hint, children }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <label style={{ display: "block", fontSize: 13, fontWeight: 600, marginBottom: 6 }}>{label}{hint && <span className="muted" style={{ fontWeight: 400, marginLeft: 8 }}>· {hint}</span>}</label>
      {children}
    </div>
  );
}

/* =====================  SCHEMA / CATALOG (lightweight) ===================== */
function SchemaScreen() {
  const tables = [
    { name: "party", rows: 2184, cols: 27, desc: "Единая запись идентичности — человек или организация" },
    { name: "party_role", rows: 3120, cols: 7, desc: "Роль party в контексте — заказчик/поставщик/конечник/заход" },
    { name: "deal", rows: 312, cols: 18, desc: "Сделка с SORP-ключом, связь с Amo/Asana/Drive" },
    { name: "deal_item", rows: 1840, cols: 24, desc: "Позиция спецификации — requested vs accepted" },
    { name: "nomenclature", rows: 1248, cols: 14, desc: "Каталог + HS + аналоги" },
    { name: "supplier_capability", rows: 612, cols: 9, desc: "Матрица возможностей поставщика" },
    { name: "document", rows: 1248, cols: 12, desc: "Drive-индекс + OCR + тип-классификация" },
    { name: "system_link", rows: 4204, cols: 6, desc: "Внешние ID: amo/asana/drive/1c" },
    { name: "fx_rate", rows: 1820, cols: 4, desc: "Курсы валют по датам" },
    { name: "compliance_screen", rows: 8412, cols: 8, desc: "Скрининг по OpenSanctions" },
    { name: "audit_log", rows: 184_201, cols: 9, desc: "Кто/когда/что/было→стало" },
    { name: "party_merge", rows: 8, cols: 6, desc: "Tombstone слияний — для отката" },
  ];
  return (
    <>
      <div className="grid-toolbar">
        <h2>Каталог таблиц</h2>
        <span className="count">12 таблиц · схема mdm</span>
        <div style={{ flex: 1 }}/>
        <button className="btn ghost sm"><Icon name="grid" size={12}/> ER-диаграмма</button>
        <button className="btn ghost sm"><Icon name="history" size={12}/> Миграции</button>
        <button className="btn primary sm"><Icon name="plus" size={12}/> Новая таблица</button>
      </div>
      <div className="grid-wrap">
        <table className="dg dense">
          <thead><tr><th>Таблица</th><th className="num">Строк</th><th className="num">Колонок</th><th>Описание</th><th>Связи</th><th></th></tr></thead>
          <tbody>
            {tables.map(t => (
              <tr key={t.name}>
                <td><span className="mono" style={{ fontWeight: 600, color: "var(--sorp-red)" }}>{t.name}</span></td>
                <td className="num tabular">{t.rows.toLocaleString("ru-RU")}</td>
                <td className="num tabular">{t.cols}</td>
                <td>{t.desc}</td>
                <td><div className="row" style={{ gap: 4 }}>{Array.from({ length: Math.min(4, t.cols > 10 ? 4 : 2) }).map((_, i) => <Chip key={i} tone="outline" style={{ fontSize: 9 }}>FK</Chip>)}</div></td>
                <td><button className="btn ghost sm">Открыть</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

window.CapabilityScreen = CapabilityScreen;
window.NomenclatureScreen = NomenclatureScreen;
window.DocumentsScreen = DocumentsScreen;
window.SanctionsScreen = SanctionsScreen;
window.SearchScreen = SearchScreen;
window.FormLinkScreen = FormLinkScreen;
window.SchemaScreen = SchemaScreen;