// Settings screen

const { useState: useStateT, useEffect: useEffectT, useMemo: useMemoT } = React;

// Все контентные настройки (промпт, БЗ, автоматизация, шаблоны, рассылка)
// пер-сервисные — запросы всегда несут service_id открытого ВПН-а.
function svcQuery(service, extra = "") {
  const q = service ? `service_id=${service.id}` : "";
  const all = [q, extra].filter(Boolean).join("&");
  return all ? "?" + all : "";
}

// Плашка «какой ВПН сейчас правим» — чтобы админ не отредактировал промпт или
// не отправил рассылку не тому сервису.
function ServiceBanner({ service, hint }) {
  if (!service) return null;
  return (
    <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-[#13131a] border border-[#2a2a3a]/60 text-xs">
      <span className="w-2 h-2 rounded-full shrink-0" style={{ background: service.color }}></span>
      <span className="text-[#6b7280]">Сервис:</span>
      <span className="text-[#f1f1f5] font-semibold">{service.name}</span>
      <span className="text-[#6b7280] font-mono text-[10px]">{service.slug}</span>
      {hint && <span className="text-[#6b7280] ml-auto">{hint}</span>}
    </div>
  );
}

function SettingsScreen({ operators: ops, setOperators, showToast, currentOperator,
                          services = [], serviceId = null, onServicesChanged,
                          mobileChrome = null }) {
  const isAdmin = currentOperator?.role === "admin";
  const defaultSection = isAdmin ? "operators" : "profile";
  const [section, setSection] = useStateT(defaultSection);
  const [modalOpen, setModalOpen] = useStateT(false);
  const [editingOp, setEditingOp] = useStateT(null);
  const [confirmDelete, setConfirmDelete] = useStateT(null);
  // Телефон: null — список разделов, иначе открыт конкретный раздел.
  const [mobileSection, setMobileSection] = useStateT(null);

  // Настройки всегда правятся у конкретного ВПН-а: промпт, база знаний,
  // автоматизация и рассылка у каждого свои.
  const svc = services.find((s) => s.id === serviceId) || null;

  // hint — подпись под названием в мобильном списке; scope делит список на
  // «настройки этого ВПН-а» и «общие для всех».
  const allSections = [
    { id: "operators",  label: "Операторы",     icon: "operators", adminOnly: true,  scope: "common",
      hint: "команда, роли, доступ к ВПН" },
    { id: "services",   label: "Сервисы",       icon: "server",    adminOnly: true,  scope: "common",
      hint: "подключить ВПН: API, токен, business_id" },
    { id: "profile",    label: "Профиль",       icon: "user",      adminOnly: false, scope: "common",
      hint: "имя, пароль, уведомления" },
    { id: "ai",         label: "ИИ-настройки",  icon: "sparkles",  adminOnly: true,  scope: "service",
      hint: "промпт, модель, автоответ" },
    { id: "kb",         label: "База знаний",   icon: "book",      adminOnly: false, scope: "service",
      hint: "статьи для ответов ИИ" },
    { id: "automation", label: "Автоматизация", icon: "zap",       adminOnly: true,  scope: "service",
      hint: "эскалация, оценки, лимиты" },
    // advanced: URL и токен теперь спрашивают прямо в форме сервиса, поэтому
    // сюда заходят редко — только чтобы выбрать другой источник или погасить
    // отдельные кнопки. В меню уезжает вниз, под разделитель.
    { id: "customer",   label: "Источник данных", icon: "user",    adminOnly: true,  scope: "service",
      advanced: true, hint: "нужно, только если это не Support API бота" },
    { id: "sounds",     label: "Звуки",         icon: "bellRing",  adminOnly: true,  scope: "common",
      hint: "новое сообщение, вызов оператора" },
    { id: "broadcast",  label: "Рассылка",      icon: "megaphone", adminOnly: true,  scope: "service",
      hint: "сообщение клиентам сервиса" },
    { id: "templates",  label: "Шаблоны",       icon: "template",  adminOnly: false, scope: "service",
      hint: "быстрые ответы по «/»" },
    { id: "folders",    label: "Папки",         icon: "grid",      adminOnly: false, scope: "service",
      hint: "свои разделы в списке тикетов" },
  ];
  const sections = allSections.filter(s => !s.adminOnly || isAdmin);

  async function saveOperator(data) {
    try {
      if (editingOp) {
        const updated = await window.apiFetch("PUT", `/api/operators/${editingOp.id}`, data);
        setOperators((arr) => arr.map((o) => (o.id === editingOp.id ? { ...o, ...updated } : o)));
        showToast("Оператор обновлён");
      } else {
        const created = await window.apiFetch("POST", "/api/operators", data);
        setOperators((arr) => [...arr, { ...created, closed: 0, avgTime: "—" }]);
        showToast("Оператор добавлен");
      }
    } catch (e) {
      showToast("Ошибка сохранения");
    }
    setModalOpen(false);
  }

  async function deleteOperator(op) {
    try {
      await window.apiFetch("DELETE", `/api/operators/${op.id}`);
      setOperators((arr) => arr.filter((o) => o.id !== op.id));
      showToast("Оператор удалён");
    } catch (e) {
      showToast("Ошибка удаления");
    }
    setConfirmDelete(null);
  }

  const sectionBody = (
    <>
      {section === "operators"     && <OperatorsSection operators={ops} services={services} showToast={showToast} setOperators={setOperators} onAdd={() => { setEditingOp(null); setModalOpen(true); }} onEdit={(op) => { setEditingOp(op); setModalOpen(true); }} onDelete={(op) => setConfirmDelete(op)} />}
      {section === "services"      && <ServicesSection showToast={showToast} onChanged={onServicesChanged} />}
      {section === "profile"       && <ProfileSection showToast={showToast} />}
      {section === "ai"            && <AISection showToast={showToast} service={svc} />}
      {section === "kb"            && <KBSection service={svc} isAdmin={isAdmin} />}
      {section === "automation"    && <AutomationSection showToast={showToast} service={svc} />}
      {section === "customer"      && <CustomerSection showToast={showToast} service={svc} />}
      {section === "sounds"        && <SoundsSection showToast={showToast} />}
      {section === "broadcast"     && <BroadcastSection showToast={showToast} service={svc} />}
      {section === "templates"     && <TemplatesSection showToast={showToast} service={svc} />}
      {section === "folders"       && <FoldersSection showToast={showToast} service={svc} />}
    </>
  );

  const modals = (
    <>
      {modalOpen && <OperatorModal editing={editingOp} services={services} onClose={() => setModalOpen(false)} onSave={saveOperator} />}

      {confirmDelete && (
        <ModalOverlay onClose={() => setConfirmDelete(null)}>
          <div className="bg-[#13131a] border border-[#2a2a3a] rounded-xl p-6 w-full max-w-sm">
            <div className="font-semibold text-[#f1f1f5] mb-1">Удалить оператора?</div>
            <div className="text-sm text-[#6b7280] mb-5">«{confirmDelete.name}» больше не сможет отвечать.</div>
            <div className="flex justify-end gap-2">
              <button onClick={() => setConfirmDelete(null)} className="px-3 py-1.5 rounded-lg text-sm text-[#6b7280] hover:text-[#f1f1f5] hover:bg-[#1a1a24]">Отмена</button>
              <button onClick={() => deleteOperator(confirmDelete)} className="px-3 py-1.5 rounded-lg text-sm font-medium bg-[#ef4444]/20 text-[#ef4444] border border-[#ef4444]/30 hover:bg-[#ef4444]/30">Удалить</button>
            </div>
          </div>
        </ModalOverlay>
      )}
    </>
  );

  // ── Телефон: боковое меню превращается в список с провалами ──────────────
  if (mobileChrome) {
    const chrome = mobileChrome;
    const current = sections.find((x) => x.id === section);
    if (mobileSection) {
      return (
        <div className="h-full flex flex-col min-h-0 bg-[#0d0d12]">
          <MobileAppBar title={current?.label || "Настройки"}
                        subtitle={current?.scope === "service" ? (svc?.name || "") : "общая настройка"}
                        onBack={() => setMobileSection(null)} />
          <div className="flex-1 min-h-0 overflow-y-auto scrollbar-thin">{sectionBody}</div>
          {modals}
        </div>
      );
    }
    const groups = [
      { title: "Этот сервис", items: sections.filter((x) => x.scope === "service" && !x.advanced) },
      { title: "Общее",       items: sections.filter((x) => x.scope === "common"  && !x.advanced) },
      { title: "Дополнительно", items: sections.filter((x) => x.advanced) },
    ].filter((g) => g.items.length);
    return (
      <div className="h-full flex flex-col min-h-0 bg-[#0d0d12]">
        <MobileAppBar title="Настройки" subtitle={svc?.name || ""}
          right={<>
            <AppBarButton icon="user" label="Профиль оператора" onClick={chrome.onProfile} />
            <AppBarButton icon="bell" label="Уведомления" badge={chrome.bellBadge} onClick={chrome.onBell} />
          </>} />
        <ServiceRail services={chrome.services} currentServiceId={chrome.currentServiceId}
                     onSelect={chrome.onSelectService} />
        <div className="flex-1 min-h-0 overflow-y-auto scrollbar-thin pb-4">
          {svc && (
            <div className="flex items-center gap-3 m-3 p-3 bg-[#13131a] border border-[#2a2a3a] rounded-xl">
              <span className="w-9 h-9 rounded-[11px] flex items-center justify-center font-bold shrink-0"
                    style={{ background: svc.color, color: contrastOn(svc.color) }}>
                {svc.emoji || svc.name[0]}
              </span>
              <div className="min-w-0">
                <div className="text-sm font-semibold text-[#f1f1f5] truncate">{svc.name}</div>
                <div className="text-[11px] text-[#6b7280] font-mono truncate">{svc.qdrantCollection}</div>
              </div>
            </div>
          )}
          {groups.map((g) => (
            <div key={g.title}>
              <div className="text-[10.5px] uppercase tracking-wider text-[#4F8EF7] font-semibold mx-4 mt-4 mb-1.5">
                {g.title}
              </div>
              <div className="mx-3 bg-[#13131a] border border-[#2a2a3a] rounded-xl overflow-hidden">
                {g.items.map((x) => (
                  <button key={x.id}
                    onClick={() => { setSection(x.id); setMobileSection(x.id); }}
                    className="w-full min-h-[56px] px-3.5 py-3 flex items-center gap-3 text-left border-b border-[#2a2a3a] last:border-0 active:bg-[#1a1a24]">
                    <span className="w-8 h-8 shrink-0 rounded-[9px] bg-[#1a1a24] flex items-center justify-center text-[#9095a3]">
                      <Icon name={x.icon} className="w-[18px] h-[18px]" />
                    </span>
                    <span className="flex-1 min-w-0">
                      <span className="block text-sm text-[#f1f1f5]">{x.label}</span>
                      <span className="block text-[11.5px] text-[#6b7280] truncate">{x.hint}</span>
                    </span>
                    <Icon name="chevronRight" className="w-4 h-4 text-[#6b7280] shrink-0" />
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>
        {modals}
      </div>
    );
  }

  return (
    <div className="flex-1 flex bg-[#0d0d12] min-h-0">
      <aside className="w-[240px] shrink-0 bg-[#13131a] border-r border-[#2a2a3a] p-4">
        <div className="text-[10px] uppercase tracking-wider text-[#6b7280] font-semibold mb-3 px-2">Настройки</div>
        <nav className="space-y-0.5">
          {sections.filter((s) => !s.advanced).map((s) => (
            <button key={s.id} onClick={() => setSection(s.id)}
              className={"w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition " +
                (section === s.id ? "bg-[#4F8EF7]/15 text-[#7BA8F9]" : "text-[#6b7280] hover:text-[#f1f1f5] hover:bg-[#1a1a24]")}>
              <Icon name={s.icon} className="w-4 h-4" />
              {s.label}
            </button>
          ))}
          {sections.some((s) => s.advanced) && (
            <div className="text-[10px] uppercase tracking-wider text-[#3a3a4a] font-semibold pt-4 pb-1 px-3">
              Дополнительно
            </div>
          )}
          {sections.filter((s) => s.advanced).map((s) => (
            <button key={s.id} onClick={() => setSection(s.id)} title={s.hint}
              className={"w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition " +
                (section === s.id ? "bg-[#4F8EF7]/15 text-[#7BA8F9]" : "text-[#4a4a5a] hover:text-[#d1d1d8] hover:bg-[#1a1a24]")}>
              <Icon name={s.icon} className="w-4 h-4" />
              {s.label}
            </button>
          ))}
        </nav>
      </aside>

      <div className="flex-1 overflow-y-auto scrollbar-thin">{sectionBody}</div>

      {modals}
    </div>
  );
}

function OperatorsSection({ operators, services = [], setOperators, showToast, onAdd, onEdit, onDelete }) {
  const [saving, setSaving] = useStateT(null);

  // Флаг = доступ оператора к ВПН-сервису. Снятие возвращает его тикеты в
  // этом сервисе в очередь, установка сразу подключает к раздаче.
  async function toggleService(op, serviceId) {
    const current = op.serviceIds || [];
    const next = current.includes(serviceId)
      ? current.filter((id) => id !== serviceId)
      : [...current, serviceId];
    setSaving(`${op.id}:${serviceId}`);
    try {
      await window.apiFetch("PUT", `/api/operators/${op.id}/services`, { service_ids: next });
      setOperators((arr) => arr.map((o) => (o.id === op.id ? { ...o, serviceIds: next } : o)));
    } catch {
      showToast && showToast("Ошибка изменения доступа");
    } finally {
      setSaving(null);
    }
  }

  return (
    <div className="max-w-[1100px] mx-auto p-3 sm:p-6 space-y-4 sm:space-y-5">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-semibold text-[#f1f1f5]">Операторы</h1>
          <div className="text-xs text-[#6b7280] mt-0.5">{operators.length} операторов · {operators.filter((o) => o.online).length} онлайн</div>
        </div>
        <button onClick={onAdd} className="px-3 py-2 rounded-lg bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white text-xs font-semibold transition flex items-center gap-1.5">
          <Icon name="plus" className="w-3.5 h-3.5" strokeWidth={2.5} />
          Добавить оператора
        </button>
      </div>
      {/* Телефон: шесть колонок не помещаются — те же данные карточками */}
      <div className="sm:hidden space-y-2">
        {operators.length === 0 && (
          <div className="text-center text-xs text-[#6b7280] py-8">Нет операторов</div>
        )}
        {operators.map((op) => (
          <div key={op.id} className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl p-3.5">
            <div className="flex items-center gap-3">
              <Avatar initials={op.initials || "??"} color={op.color || "#4F8EF7"} size={36} />
              <div className="min-w-0 flex-1">
                <div className="font-medium text-[#f1f1f5] truncate">{op.name}</div>
                <div className="text-[11px] text-[#6b7280] font-mono truncate">
                  {op.tg}{op.tgId ? ` · ID ${op.tgId}` : ""}
                </div>
              </div>
              <button onClick={() => onEdit(op)} aria-label="Изменить"
                className="w-11 h-11 shrink-0 flex items-center justify-center text-[#6b7280] active:text-[#7BA8F9] rounded-lg"><Icon name="edit" className="w-4 h-4" /></button>
              <button onClick={() => onDelete(op)} aria-label="Удалить"
                className="w-11 h-11 shrink-0 flex items-center justify-center text-[#6b7280] active:text-[#ef4444] rounded-lg"><Icon name="trash" className="w-4 h-4" /></button>
            </div>
            <div className="flex items-center gap-2 mt-2.5 flex-wrap">
              <span className={"inline-flex px-2 py-0.5 rounded-md text-[11px] font-medium border " +
                (op.role === "admin" ? "bg-[#A855F7]/15 text-[#C084FC] border-[#A855F7]/30" : "bg-[#1a1a24] text-[#f1f1f5] border-[#2a2a3a]")}>
                {op.role === "admin" ? "Администратор" : "Агент"}
              </span>
              <PresenceLabel online={op.online} paused={op.paused} lastSeen={op.lastSeen} />
            </div>
            <div className="mt-2.5">
              <div className="text-[10px] uppercase tracking-wider text-[#6b7280] font-semibold mb-1.5">Доступ к ВПН</div>
              {op.role === "admin" ? (
                <span className="text-[11px] text-[#6b7280]">все сервисы</span>
              ) : services.length === 0 ? (
                <span className="text-[11px] text-[#6b7280]">—</span>
              ) : (
                <div className="flex flex-wrap gap-1.5">
                  {services.map((sv) => {
                    const on = (op.serviceIds || []).includes(sv.id);
                    const busy = saving === `${op.id}:${sv.id}`;
                    return (
                      <button key={sv.id} disabled={busy} onClick={() => toggleService(op, sv.id)}
                        className={"inline-flex items-center gap-1.5 min-h-[36px] px-2.5 rounded-md text-[11px] font-medium border transition disabled:opacity-40 " +
                          (on ? "bg-[#1a1a24] text-[#f1f1f5] border-[#3a3a4a]" : "text-[#6b7280] border-[#2a2a3a]")}>
                        <span className="w-1.5 h-1.5 rounded-full shrink-0"
                              style={{ background: on ? sv.color : "#3a3a4a" }}></span>
                        {sv.name}
                      </button>
                    );
                  })}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>

      {/* overflow-x-auto, а не hidden: на планшете таблица шире колонки, и
          скрытые колонки иначе не достать. */}
      <div className="hidden sm:block bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl overflow-hidden">
        <div className="overflow-x-auto scrollbar-thin">
        <table className="w-full text-sm min-w-[640px]">
          <thead>
            <tr className="text-[10px] uppercase tracking-wider text-[#6b7280] border-b border-[#2a2a3a]/60">
              <th className="text-left px-5 py-3 font-medium">Имя</th>
              <th className="text-left px-3 py-3 font-medium">Telegram</th>
              <th className="text-left px-3 py-3 font-medium">Роль</th>
              <th className="text-left px-3 py-3 font-medium">Доступ к ВПН</th>
              <th className="text-left px-3 py-3 font-medium w-[200px]">Статус</th>
              <th className="text-right px-5 py-3 font-medium w-[120px]">Действия</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-[#2a2a3a]/40">
            {operators.map((op) => (
              <tr key={op.id} className="hover:bg-[#1a1a24]/40 transition">
                <td className="px-5 py-3">
                  <div className="flex items-center gap-3">
                    <Avatar initials={op.initials || "??"} color={op.color || "#4F8EF7"} size={32} />
                    <div className="font-medium text-[#f1f1f5]">{op.name}</div>
                  </div>
                </td>
                <td className="px-3 py-3 font-mono text-xs">
                  <div className="text-[#6b7280]">{op.tg}</div>
                  {op.tgId && <div className="text-[#3a3a4a] text-[10px] mt-0.5">ID {op.tgId}</div>}
                  {!op.tgId && <div className="text-[#ef4444]/60 text-[10px] mt-0.5">ID не задан</div>}
                </td>
                <td className="px-3 py-3">
                  <span className={"inline-flex px-2 py-0.5 rounded-md text-[11px] font-medium border " +
                    (op.role === "admin" ? "bg-[#A855F7]/15 text-[#C084FC] border-[#A855F7]/30" : "bg-[#1a1a24] text-[#f1f1f5] border-[#2a2a3a]")}>
                    {op.role === "admin" ? "Администратор" : "Агент"}
                  </span>
                </td>
                <td className="px-3 py-3">
                  {op.role === "admin" ? (
                    <span className="text-[11px] text-[#6b7280]">все сервисы</span>
                  ) : services.length === 0 ? (
                    <span className="text-[11px] text-[#6b7280]">—</span>
                  ) : (
                    <div className="flex flex-wrap gap-1">
                      {services.map((s) => {
                        const on = (op.serviceIds || []).includes(s.id);
                        const busy = saving === `${op.id}:${s.id}`;
                        return (
                          <button key={s.id} disabled={busy} onClick={() => toggleService(op, s.id)}
                            title={on ? `Снять доступ к ${s.name}` : `Выдать доступ к ${s.name}`}
                            className={"inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md text-[11px] font-medium border transition disabled:opacity-40 " +
                              (on ? "bg-[#1a1a24] text-[#f1f1f5] border-[#3a3a4a]"
                                  : "text-[#6b7280] border-[#2a2a3a] hover:text-[#f1f1f5] hover:bg-[#1a1a24]/60")}>
                            <span className="w-1.5 h-1.5 rounded-full shrink-0"
                                  style={{ background: on ? s.color : "#3a3a4a" }}></span>
                            {s.name}
                          </button>
                        );
                      })}
                    </div>
                  )}
                </td>
                <td className="px-3 py-3">
                  <PresenceLabel online={op.online} paused={op.paused} lastSeen={op.lastSeen} />
                </td>
                <td className="px-5 py-3">
                  <div className="flex items-center justify-end gap-1">
                    <button onClick={() => onEdit(op)} className="p-1.5 text-[#6b7280] hover:text-[#7BA8F9] hover:bg-[#4F8EF7]/10 rounded transition"><Icon name="edit" className="w-4 h-4" /></button>
                    <button onClick={() => onDelete(op)} className="p-1.5 text-[#6b7280] hover:text-[#ef4444] hover:bg-[#ef4444]/10 rounded transition"><Icon name="trash" className="w-4 h-4" /></button>
                  </div>
                </td>
              </tr>
            ))}
            {operators.length === 0 && <tr><td colSpan={6} className="px-5 py-8 text-center text-xs text-[#6b7280]">Нет операторов</td></tr>}
          </tbody>
        </table>
        </div>
      </div>
    </div>
  );
}

// ── Секция «Клиенты»: откуда панель берёт профиль клиента ────────────────────
// Список источников приходит из реестра app.customer — свой провайдер
// появляется здесь сам, достаточно положить файл в app/providers/.

function CustomerSection({ showToast, service }) {
  const [cfg, setCfg] = useStateT(null);
  const [configText, setConfigText] = useStateT("{}");
  const [saving, setSaving] = useStateT(false);
  const [err, setErr] = useStateT(null);

  useEffectT(() => {
    setCfg(null);
    setErr(null);
    window.apiFetch("GET", "/api/settings/customer" + svcQuery(service))
      .then((d) => {
        setCfg(d);
        setConfigText(JSON.stringify(d.config || {}, null, 2));
      })
      .catch(() => setCfg(null));
  }, [service?.id]);

  async function save(next) {
    setSaving(true);
    try {
      await window.apiFetch("PUT", "/api/settings/customer" + svcQuery(service), {
        provider: next.provider, config: next.config, cacheTtl: next.cacheTtl,
      });
      showToast("Источник данных о клиентах сохранён");
      setErr(null);
    } catch (e) {
      showToast("Ошибка сохранения");
    }
    setSaving(false);
  }

  function pickProvider(name) {
    const next = { ...cfg, provider: name };
    setCfg(next);
    save(next);
  }

  function saveConfig() {
    let parsed;
    try {
      parsed = JSON.parse(configText || "{}");
    } catch (e) {
      setErr("Это не похоже на JSON: " + e.message);
      return;
    }
    const next = { ...cfg, config: parsed };
    setCfg(next);
    save(next);
  }

  if (!cfg) return <div className="p-6 text-[#6b7280] text-sm">Загрузка...</div>;

  const current = (cfg.available || []).find((p) => p.name === cfg.provider);
  const supported = new Set(current?.actions || []);
  const disabled = new Set((cfg.config || {}).disable || []);

  return (
    <div className="max-w-[1100px] mx-auto p-3 sm:p-6 space-y-4 sm:space-y-5">
      <div>
        <h1 className="text-xl font-semibold text-[#f1f1f5]">Источник данных о клиентах</h1>
        <div className="text-xs text-[#6b7280] mt-0.5">
          Адрес и токен Support API спрашивают прямо в форме сервиса — сюда
          заходят, только чтобы выбрать другой источник или погасить лишние кнопки
        </div>
      </div>

      <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl p-4 space-y-3">
        <div className="text-[10px] uppercase tracking-wider text-[#6b7280] font-semibold">
          Источник данных · {cfg.serviceName}
        </div>
        <div className="flex items-center gap-2 flex-wrap">
          {/* Остальные источники (http, mock, remnawave и свои) в проде не
              используются — показываем только bot_api, плюс то, что уже
              реально выбрано у этого сервиса, чтобы не спрятать активный
              выбор молча, если он вдруг не bot_api. */}
          {(cfg.available || [])
            .filter((p) => p.name === "bot_api" || p.name === cfg.provider)
            .map((p) => {
              const on = cfg.provider === p.name;
              return (
                <button key={p.name} disabled={saving} onClick={() => pickProvider(p.name)}
                  title={p.description}
                  className={"px-3 py-1.5 rounded-md text-xs font-medium border transition disabled:opacity-40 " +
                    (on ? "bg-[#1a1a24] text-[#f1f1f5] border-[#3a3a4a]"
                        : "text-[#6b7280] border-[#2a2a3a] hover:text-[#f1f1f5] hover:bg-[#1a1a24]/60")}>
                  {p.name}{p.isMock ? " (мок)" : ""}
                </button>
              );
            })}
        </div>
        {current && <div className="text-[11px] text-[#6b7280]">{current.description}</div>}
        {current?.isMock && (
          <div className="text-[11px] text-[#f59e0b] bg-[#f59e0b]/10 border border-[#f59e0b]/30 rounded-lg px-3 py-2">
            Сейчас показываются выдуманные данные. Чтобы подключить настоящую API,
            выберите <code className="text-[#7BA8F9]">bot_api</code> и заполните адрес и
            токен Support API в форме сервиса («Настройки → Сервисы»).
          </div>
        )}
      </div>

      <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl p-4 space-y-3">
        <div className="flex items-center justify-between gap-3 flex-wrap">
          <div className="text-[10px] uppercase tracking-wider text-[#6b7280] font-semibold">
            Конфигурация источника
          </div>
          <label className="flex items-center gap-2 text-xs text-[#6b7280]">
            Кэш профиля, сек
            <input type="number" min="0" value={cfg.cacheTtl}
              onChange={(e) => setCfg({ ...cfg, cacheTtl: Number(e.target.value) })}
              onBlur={() => save(cfg)}
              className="w-20 bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-2 py-1 text-xs text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50" />
          </label>
        </div>
        <textarea value={configText} onChange={(e) => setConfigText(e.target.value)} rows={10}
          spellCheck={false}
          className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2.5 text-xs font-mono text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50 resize-y scrollbar-thin" />
        {err && (
          <div className="text-xs text-[#ef4444] bg-[#ef4444]/10 border border-[#ef4444]/20 rounded-lg px-3 py-2">
            {err}
          </div>
        )}
        <div className="flex items-center justify-between gap-3 flex-wrap">
          <div className="text-[10px] text-[#6b7280]">
            Для <code className="text-[#7BA8F9]">http</code>: base_url, token, paths и mapping —
            см. README, «Карточка клиента: подключение своего API».
          </div>
          <button onClick={saveConfig} disabled={saving}
            className="px-3 py-2 rounded-lg bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white text-xs font-semibold transition disabled:opacity-40">
            Сохранить конфигурацию
          </button>
        </div>
      </div>

      <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl p-4">
        <div className="text-[10px] uppercase tracking-wider text-[#6b7280] font-semibold mb-3">
          Действия над клиентом
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-1.5">
          {(cfg.catalog || []).map((a) => {
            const off = !supported.has(a.name) || disabled.has(a.name);
            return (
              <div key={a.name}
                className="flex items-center gap-2 px-3 py-2 rounded-lg bg-[#0d0d12] border border-[#2a2a3a]/60">
                <span className={"w-1.5 h-1.5 rounded-full shrink-0 " + (off ? "bg-zinc-600" : "bg-[#22c55e]")}></span>
                <span className={"text-xs truncate flex-1 " + (off ? "text-[#6b7280]" : "text-[#f1f1f5]")}>
                  {a.label}
                </span>
                {a.danger && (
                  <span className="text-[9px] px-1.5 py-0.5 rounded bg-[#ef4444]/15 text-[#ef4444] shrink-0">
                    админ
                  </span>
                )}
                <span className="text-[10px] text-[#3a3a4a] font-mono shrink-0">{a.name}</span>
              </div>
            );
          })}
        </div>
        <div className="text-[10px] text-[#6b7280] mt-3 leading-relaxed">
          Зелёным — то, что умеет выбранный источник; такие кнопки видны оператору в карточке
          клиента. Погасить лишнее можно списком <code className="text-[#7BA8F9]">disable</code> в
          конфигурации. Помеченные «админ» доступны только администратору.
        </div>
      </div>
    </div>
  );
}

// ── Секция «Сервисы»: CRUD ВПН-ов ────────────────────────────────────────────
// slug, коллекция Qdrant и префикс dialog_id задаются один раз при создании:
// они зашиваются в воркфлоу n8n, ключи Redis и первичные ключи диалогов.

const SERVICE_COLORS = ["#4F8EF7", "#A855F7", "#22c55e", "#eab308", "#ef4444", "#06b6d4", "#f97316", "#ec4899"];

function ServicesSection({ showToast, onChanged }) {
  const [services, setServices] = useStateT(null);
  const [modal, setModal] = useStateT(null);      // {} — новый, объект — правка
  const [confirmDel, setConfirmDel] = useStateT(null);

  async function reload() {
    try {
      const list = await window.apiFetch("GET", "/api/services/all");
      setServices(list);
      onChanged && onChanged();
    } catch { setServices([]); }
  }
  useEffectT(() => { reload(); }, []);

  async function save(form) {
    try {
      if (form.id) {
        await window.apiFetch("PUT", `/api/services/${form.id}`, form);
        showToast("Сервис обновлён");
      } else {
        await window.apiFetch("POST", "/api/services", form);
        showToast("Сервис добавлен");
      }
      setModal(null);
      reload();
    } catch (e) {
      showToast(e?.detail || "Ошибка сохранения");
    }
  }

  async function remove(svc) {
    try {
      await window.apiFetch("DELETE", `/api/services/${svc.id}`);
      showToast("Сервис удалён");
      reload();
    } catch (e) {
      showToast(e?.detail || "Ошибка удаления");
    }
    setConfirmDel(null);
  }

  if (services === null) return <div className="p-6 text-[#6b7280] text-sm">Загрузка...</div>;

  return (
    <div className="max-w-[1100px] mx-auto p-3 sm:p-6 space-y-4 sm:space-y-5">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-semibold text-[#f1f1f5]">ВПН-сервисы</h1>
          <div className="text-xs text-[#6b7280] mt-0.5">
            Название, адрес API бота, токен и business_id — этого достаточно,
            чтобы сервис заработал
          </div>
        </div>
        <button onClick={() => setModal({})}
          className="px-3 py-2 rounded-lg bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white text-xs font-semibold flex items-center gap-1.5">
          <Icon name="plus" className="w-3.5 h-3.5" strokeWidth={2.5} />
          Добавить сервис
        </button>
      </div>

      <div className="sm:hidden space-y-2">
        {services.map((s) => (
          <div key={s.id} className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl p-3.5">
            <div className="flex items-center gap-2.5">
              <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ background: s.color }}></span>
              <span className="font-medium text-[#f1f1f5] truncate flex-1">
                {s.emoji ? s.emoji + " " : ""}{s.name}
              </span>
              <button onClick={() => setModal(s)} aria-label="Изменить"
                className="w-11 h-11 shrink-0 flex items-center justify-center text-[#6b7280] active:text-[#7BA8F9] rounded-lg"><Icon name="edit" className="w-4 h-4" /></button>
              <button onClick={() => setConfirmDel(s)} aria-label="Удалить"
                className="w-11 h-11 shrink-0 flex items-center justify-center text-[#6b7280] active:text-[#ef4444] rounded-lg"><Icon name="trash" className="w-4 h-4" /></button>
            </div>
            <div className="mt-2 space-y-1 text-[11px]">
              <div className="flex gap-2"><span className="text-[#6b7280] w-[86px] shrink-0">API</span>
                <span className="font-mono text-[#d1d1d8] truncate">
                  {s.hasApiBaseUrl ? s.apiBaseUrlMask : <span className="text-[#ef4444]">не задан</span>}</span></div>
              <div className="flex gap-2"><span className="text-[#6b7280] w-[86px] shrink-0">business_id</span>
                <span className="font-mono text-[#d1d1d8] truncate">
                  {s.hasBusinessId ? s.businessIdMask : <span className="text-[#f59e0b]">не задан</span>}</span></div>
              <div className="flex gap-2"><span className="text-[#6b7280] w-[86px] shrink-0">Слаг</span>
                <span className="font-mono text-[#d1d1d8] truncate">{s.slug}</span></div>
              <div className="flex gap-2 items-center"><span className="text-[#6b7280] w-[86px] shrink-0">Статус</span>
                <span className="inline-flex items-center gap-1.5">
                  <span className={"w-1.5 h-1.5 rounded-full " + (s.isActive ? "bg-[#22c55e]" : "bg-zinc-600")}></span>
                  <span className={s.isActive ? "text-[#22c55e]" : "text-[#6b7280]"}>
                    {s.isActive ? "Активен" : "Выключен"}
                  </span>
                </span></div>
            </div>
          </div>
        ))}
      </div>

      {/* overflow-x-auto, а не hidden: на планшете таблица шире колонки, и
          скрытые колонки иначе не достать. */}
      <div className="hidden sm:block bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl overflow-hidden">
        <div className="overflow-x-auto scrollbar-thin">
        <table className="w-full text-sm min-w-[640px]">
          <thead>
            <tr className="text-[10px] uppercase tracking-wider text-[#6b7280] border-b border-[#2a2a3a]/60">
              <th className="text-left px-5 py-3 font-medium">Название</th>
              <th className="text-left px-3 py-3 font-medium">API бота</th>
              <th className="text-left px-3 py-3 font-medium">business_id</th>
              <th className="text-left px-3 py-3 font-medium">Слаг</th>
              <th className="text-left px-3 py-3 font-medium">Статус</th>
              <th className="text-right px-5 py-3 font-medium w-[120px]">Действия</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-[#2a2a3a]/40">
            {services.map((s) => (
              <tr key={s.id} className="hover:bg-[#1a1a24]/40 transition">
                <td className="px-5 py-3">
                  <div className="flex items-center gap-2.5">
                    <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ background: s.color }}></span>
                    <span className="font-medium text-[#f1f1f5]">{s.emoji ? s.emoji + " " : ""}{s.name}</span>
                  </div>
                </td>
                <td className="px-3 py-3 font-mono text-xs text-[#6b7280] max-w-[220px] truncate">
                  {s.hasApiBaseUrl ? s.apiBaseUrlMask : <span className="text-[#ef4444]">не задан</span>}
                </td>
                <td className="px-3 py-3 font-mono text-xs text-[#6b7280] max-w-[180px] truncate">
                  {s.hasBusinessId ? s.businessIdMask : <span className="text-[#f59e0b]">не задан</span>}
                </td>
                <td className="px-3 py-3 font-mono text-xs text-[#6b7280]">{s.slug}</td>
                <td className="px-3 py-3">
                  <span className="inline-flex items-center gap-1.5 text-xs">
                    <span className={"w-1.5 h-1.5 rounded-full " + (s.isActive ? "bg-[#22c55e]" : "bg-zinc-600")}></span>
                    <span className={s.isActive ? "text-[#22c55e]" : "text-[#6b7280]"}>
                      {s.isActive ? "Активен" : "Выключен"}
                    </span>
                  </span>
                </td>
                <td className="px-5 py-3">
                  <div className="flex items-center justify-end gap-1">
                    <button onClick={() => setModal(s)} className="p-1.5 text-[#6b7280] hover:text-[#7BA8F9] hover:bg-[#4F8EF7]/10 rounded transition"><Icon name="edit" className="w-4 h-4" /></button>
                    <button onClick={() => setConfirmDel(s)} className="p-1.5 text-[#6b7280] hover:text-[#ef4444] hover:bg-[#ef4444]/10 rounded transition"><Icon name="trash" className="w-4 h-4" /></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        </div>
      </div>

      <div className="text-[11px] text-[#6b7280] leading-relaxed bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl p-4">
        <div className="text-[#f1f1f5] font-medium mb-1.5">Как подключить новый ВПН</div>
        1. Создайте сервис здесь — слаг попадёт в ключи Redis и имя коллекции Qdrant.<br />
        2. Скопируйте воркфлоу n8n, подставьте токен своего бота и добавьте в стартовую
        Set-ноду поле <code className="font-mono text-[#7BA8F9]">service</code> со слагом сервиса.<br />
        3. Переключите Redis-ключи на <code className="font-mono text-[#7BA8F9]">vpn_bot:&lt;слаг&gt;:ai_settings</code> и
        коллекцию Qdrant на указанную в таблице.<br />
        4. Выдайте операторам флаги доступа на вкладке «Операторы».<br />
        5. Загрузите базу знаний и задайте промпт — они пер-сервисные.
      </div>

      {modal && <ServiceModal editing={modal.id ? modal : null} onSave={save}
                              showToast={showToast} onClose={() => setModal(null)} />}

      {confirmDel && (
        <ModalOverlay onClose={() => setConfirmDel(null)}>
          <div className="bg-[#13131a] border border-[#2a2a3a] rounded-xl p-6 w-full max-w-sm">
            <div className="font-semibold text-[#f1f1f5] mb-1">Удалить сервис «{confirmDel.name}»?</div>
            <div className="text-sm text-[#6b7280] mb-5">
              Вместе с ним удалятся все его диалоги, сообщения, статьи базы знаний и коллекция
              Qdrant <span className="font-mono">{confirmDel.qdrantCollection}</span>. Действие необратимо.
            </div>
            <div className="flex justify-end gap-2">
              <button onClick={() => setConfirmDel(null)} className="px-3 py-1.5 rounded-lg text-sm text-[#6b7280] hover:text-[#f1f1f5] hover:bg-[#1a1a24]">Отмена</button>
              <button onClick={() => remove(confirmDel)} className="px-3 py-1.5 rounded-lg text-sm font-medium bg-[#ef4444]/20 text-[#ef4444] border border-[#ef4444]/30 hover:bg-[#ef4444]/30">Удалить</button>
            </div>
          </div>
        </ModalOverlay>
      )}
    </div>
  );
}

// Подключение ВПН-сервиса. На виду только то, что нельзя не заполнить:
// название, адрес и токен Support API, business_id аккаунта поддержки.
// Слаг, цвет, эмодзи и вебхук n8n заполняются сами и лежат под «Дополнительно».
// Резервный канал доставки. Ответ оператора уходит через n8n в business-чат
// Telegram, и тот иногда отвечает BUSINESS_PEER_USAGE_MISSING — сообщение
// теряется. Здесь подключается тот же аккаунт поддержки по MTProto: панель
// повторит отправку им и покажет результат прямо в переписке.
//
// Авторизация требует сохранённого сервиса: коду из Телеграм нужно, куда
// вернуться, а у несохранённого сервиса ещё нет id.
function FallbackBlock({ service, showToast }) {
  const [appId, setAppId] = useStateT(service?.fallbackAppId ? String(service.fallbackAppId) : "");
  const [appHash, setAppHash] = useStateT("");
  // fallbackPhone приходит маской («…0000»), а не номером: в поле её класть
  // нельзя — уедет в send-code вместо телефона. Показываем подсказкой.
  const [phone, setPhone] = useStateT("");
  const [code, setCode] = useStateT("");
  const [password, setPassword] = useStateT("");
  const [session, setSession] = useStateT("");
  // idle | code | 2fa
  const [step, setStep] = useStateT("idle");
  const [busy, setBusy] = useStateT(false);
  const [state, setState] = useStateT({
    enabled: !!service?.fallbackEnabled,
    account: service?.fallbackAccount || "",
    linked: !!service?.hasFallbackSession,
  });
  const [check, setCheck] = useStateT(null);

  const base = service ? `/api/services/${service.id}/fallback` : null;

  async function call(path, body, method = "POST") {
    setBusy(true);
    try {
      return await window.apiFetch(method, base + path, body);
    } finally {
      setBusy(false);
    }
  }

  async function sendCode() {
    setCheck(null);
    try {
      await call("/send-code", { app_id: Number(appId), app_hash: appHash.trim(), phone: phone.trim() });
      setStep("code");
      showToast("Код отправлен в Телеграм");
    } catch (e) { setCheck({ ok: false, error: e?.detail || "Не удалось отправить код" }); }
  }

  async function signIn() {
    setCheck(null);
    try {
      const r = await call("/sign-in", { code: code.trim(), password });
      if (r.needs2fa) { setStep("2fa"); showToast("Нужен пароль двухфакторки"); return; }
      setState({ enabled: true, account: r.account, linked: true });
      setStep("idle"); setCode(""); setPassword(""); setAppHash("");
      showToast(`Аккаунт подключён: ${r.account}`);
    } catch (e) { setCheck({ ok: false, error: e?.detail || "Не удалось войти" }); }
  }

  async function useSession() {
    setCheck(null);
    try {
      const r = await call("/session", { app_id: Number(appId), app_hash: appHash.trim(),
                                         phone: phone.trim(), session: session.trim() });
      setCheck(r);
      if (r.ok) {
        setState({ enabled: true, account: r.account, linked: true });
        setSession(""); setAppHash("");
        showToast(`Аккаунт подключён: ${r.account}`);
      }
    } catch (e) { setCheck({ ok: false, error: e?.detail || "Сессия не подошла" }); }
  }

  async function test() {
    setCheck("…");
    try { setCheck(await call("/test", {})); }
    catch (e) { setCheck({ ok: false, error: e?.detail || "Не удалось проверить" }); }
  }

  async function toggle() {
    const next = !state.enabled;
    try {
      await call("", { enabled: next }, "PATCH");
      setState((s) => ({ ...s, enabled: next }));
    } catch { showToast("Не удалось переключить"); }
  }

  async function forget() {
    try {
      await call("", undefined, "DELETE");
      setState({ enabled: false, account: "", linked: false });
      setCheck(null);
      showToast("Аккаунт отвязан");
    } catch { showToast("Не удалось отвязать"); }
  }

  const input = "w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] placeholder:text-[#6b7280] focus:outline-none focus:border-[#4F8EF7]/50";

  if (!service) {
    return (
      <div className="text-[11px] text-[#6b7280] bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2.5">
        Резервная отправка настраивается после сохранения сервиса — коду из
        Телеграм нужно, куда вернуться.
      </div>
    );
  }

  return (
    <div className="space-y-3">
      {state.linked ? (
        <>
          <div className="flex items-center justify-between gap-3">
            <div className="min-w-0">
              <div className="text-sm text-[#f1f1f5] truncate">
                Аккаунт {state.account || "подключён"}
              </div>
              <div className="text-[10px] text-[#6b7280]">
                {state.enabled
                  ? "Панель повторит недоставленный ответ этим аккаунтом"
                  : "Канал выключен — недоставленные ответы останутся недоставленными"}
              </div>
            </div>
            <Switch on={state.enabled} onChange={toggle} />
          </div>
          <div className="flex items-center gap-2">
            <button type="button" onClick={test} disabled={busy || check === "…"}
              className="px-3 py-2 rounded-lg border border-[#2a2a3a] text-xs text-[#d1d1d8] hover:bg-[#1a1a24] disabled:opacity-40">
              {check === "…" ? "Проверяем…" : "Проверить"}
            </button>
            <button type="button" onClick={forget} disabled={busy}
              className="px-3 py-2 rounded-lg border border-[#ef4444]/30 text-xs text-[#ef4444] hover:bg-[#ef4444]/10 disabled:opacity-40">
              Отвязать
            </button>
          </div>
        </>
      ) : (
        <>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-xs text-[#6b7280] mb-1.5">app_id</label>
              <input value={appId} onChange={(e) => setAppId(e.target.value.replace(/\D/g, ""))}
                placeholder="123456" className={input + " font-mono text-xs"} />
            </div>
            <div>
              <label className="block text-xs text-[#6b7280] mb-1.5">Телефон</label>
              <input value={phone} onChange={(e) => setPhone(e.target.value)}
                placeholder={service?.fallbackPhone || "+79990000000"}
                className={input + " font-mono text-xs"} />
            </div>
          </div>
          <div>
            <label className="block text-xs text-[#6b7280] mb-1.5">app_hash</label>
            <input type="password" value={appHash} onChange={(e) => setAppHash(e.target.value)}
              placeholder="из my.telegram.org" className={input + " font-mono text-xs"} />
          </div>

          {step === "idle" && (
            <button type="button" onClick={sendCode}
              disabled={busy || !appId || !appHash.trim() || !phone.trim()}
              className="px-3 py-2 rounded-lg bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white text-xs font-semibold disabled:opacity-40">
              {busy ? "Отправляем код…" : "Подключить аккаунт"}
            </button>
          )}

          {step !== "idle" && (
            <div className="space-y-3 border-l-2 border-[#4F8EF7]/40 pl-3">
              <div>
                <label className="block text-xs text-[#6b7280] mb-1.5">Код из Телеграм</label>
                <input value={code} onChange={(e) => setCode(e.target.value)} placeholder="12345"
                  className={input + " font-mono"} />
              </div>
              {step === "2fa" && (
                <div>
                  <label className="block text-xs text-[#6b7280] mb-1.5">Пароль двухфакторки</label>
                  <input type="password" value={password} onChange={(e) => setPassword(e.target.value)}
                    className={input} />
                </div>
              )}
              <div className="flex items-center gap-2">
                <button type="button" onClick={signIn} disabled={busy || (!code.trim() && step !== "2fa")}
                  className="px-3 py-2 rounded-lg bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white text-xs font-semibold disabled:opacity-40">
                  {busy ? "Входим…" : "Войти"}
                </button>
                <button type="button" onClick={() => { setStep("idle"); setCode(""); setPassword(""); }}
                  className="px-3 py-2 rounded-lg text-xs text-[#6b7280] hover:text-[#f1f1f5] hover:bg-[#1a1a24]">
                  Отмена
                </button>
              </div>
            </div>
          )}

          <details className="text-[11px] text-[#6b7280]">
            <summary className="cursor-pointer hover:text-[#d1d1d8]">Уже есть строка сессии</summary>
            <div className="mt-2 space-y-2">
              <textarea value={session} onChange={(e) => setSession(e.target.value)} rows={3}
                placeholder="StringSession, сгенерированная снаружи"
                className={input + " font-mono text-[10px] resize-y"} />
              <button type="button" onClick={useSession}
                disabled={busy || !appId || !appHash.trim() || !session.trim()}
                className="px-3 py-2 rounded-lg border border-[#2a2a3a] text-xs text-[#d1d1d8] hover:bg-[#1a1a24] disabled:opacity-40">
                Использовать сессию
              </button>
            </div>
          </details>
        </>
      )}

      {check && check !== "…" && (
        <div className={"rounded-lg px-3 py-2 text-[11px] border " + (check.ok
          ? "bg-[#22c55e]/10 border-[#22c55e]/25 text-[#22c55e]"
          : "bg-[#ef4444]/10 border-[#ef4444]/25 text-[#ef4444]")}>
          {check.ok ? <>Связь есть: <b>{check.account}</b></> : check.error}
        </div>
      )}
    </div>
  );
}

function ServiceModal({ editing, onSave, onClose, showToast }) {
  const [name,  setName]  = useStateT(editing?.name  || "");
  const [slug,  setSlug]  = useStateT(editing?.slug  || "");
  const [color, setColor] = useStateT(editing?.color || SERVICE_COLORS[0]);
  const [emoji, setEmoji] = useStateT(editing?.emoji || "");
  // Адреса, business_id и токены сервер наружу не отдаёт — только маску и
  // флаг «задан». Поэтому поля правки открываются пустыми, а пустое поле при
  // сохранении означает «оставить прежнее».
  const [hook,  setHook]  = useStateT("");
  const [active, setActive] = useStateT(editing ? editing.isActive : true);
  const [apiUrl, setApiUrl] = useStateT("");
  const [token, setToken] = useStateT("");
  const [business, setBusiness] = useStateT("");
  const [more, setMore] = useStateT(false);
  const [fb, setFb] = useStateT(false);
  const [check, setCheck] = useStateT(null);      // null | "…" | {ok, ...}
  const [rwUrl, setRwUrl] = useStateT("");
  const [rwToken, setRwToken] = useStateT("");
  const [rwCookie, setRwCookie] = useStateT("");
  const [rwCheck, setRwCheck] = useStateT(null);   // null | "…" | {ok, ...}

  // Слаг сам предлагается из названия, но остаётся редактируемым.
  function changeName(v) {
    setName(v);
    if (!editing && !slug) return;
    if (!editing) setSlug(slugify(v));
  }
  function slugify(v) {
    return v.toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 31);
  }

  // Проверка идёт до сохранения: опечатку в токене лучше увидеть здесь, чем
  // на первом клиенте. Токен при правке может быть пустым — сервер тогда
  // проверяет сохранённым.
  async function testConnection() {
    setCheck("…");
    try {
      const r = await window.apiFetch("POST", "/api/services/test-connection",
                                      { base_url: apiUrl.trim(), token: token.trim(),
                                        provider: "bot_api", service_id: editing?.id ?? null });
      setCheck(r);
    } catch (e) {
      setCheck({ ok: false, error: e?.detail || "Не удалось проверить" });
    }
  }

  // Токен и кука Remnawave лежат в monitoring.servers.config — пустое поле
  // при правке значит «сервер, проверь сохранённое».
  async function testRwConnection() {
    setRwCheck("…");
    try {
      const r = await window.apiFetch("POST", "/api/services/test-connection",
                                      { base_url: rwUrl.trim(), token: rwToken.trim(),
                                        cookie: rwCookie.trim(),
                                        provider: "remnawave", service_id: editing?.id ?? null });
      setRwCheck(r);
    } catch (e) {
      setRwCheck({ ok: false, error: e?.detail || "Не удалось проверить" });
    }
  }

  function submit(e) {
    e?.preventDefault();
    if (!name.trim()) return;
    const finalSlug = editing ? editing.slug : (slug || slugify(name));
    onSave({
      id: editing?.id, name: name.trim(), slug: finalSlug, color,
      emoji: emoji.trim() || null, n8n_webhook_url: hook.trim(), is_active: active,
      business_id: business.trim(),
      api_base_url: apiUrl.trim(), api_token: token.trim(),
      remnawave_base_url: rwUrl.trim(), remnawave_token: rwToken.trim(),
      remnawave_cookie: rwCookie.trim(),
    });
  }

  return (
    <ModalOverlay onClose={onClose}>
      <form onSubmit={submit} className="bg-[#13131a] border border-[#2a2a3a] rounded-xl w-full max-w-md overflow-hidden">
        <div className="px-5 py-4 border-b border-[#2a2a3a] flex items-center justify-between">
          <div className="font-semibold text-[#f1f1f5]">{editing ? "Редактировать сервис" : "Новый ВПН-сервис"}</div>
          <button type="button" onClick={onClose} className="p-1 text-[#6b7280] hover:text-[#f1f1f5] rounded"><Icon name="x" /></button>
        </div>
        <div className="p-5 space-y-4 max-h-[70vh] overflow-y-auto scrollbar-thin">
          <div>
            <label className="block text-xs text-[#6b7280] mb-1.5">Название</label>
            <input autoFocus value={name} onChange={(e) => changeName(e.target.value)} placeholder="NordFlow"
              className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] placeholder:text-[#6b7280] focus:outline-none focus:border-[#4F8EF7]/50" />
          </div>

          <div>
            <label className="block text-xs text-[#6b7280] mb-1.5">Адрес API бота {editing && editing.hasApiBaseUrl && !apiUrl &&
                <span className="text-[#22c55e]">— сохранён: {editing.apiBaseUrlMask}, оставьте пустым, чтобы не менять</span>}
            </label>
            <input value={apiUrl} onChange={(e) => { setApiUrl(e.target.value); setCheck(null); }}
              placeholder={editing && editing.hasApiBaseUrl ? editing.apiBaseUrlMask : "https://host/nemoivpn/api/v1"}
              className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] placeholder:text-[#6b7280] focus:outline-none focus:border-[#4F8EF7]/50 font-mono text-xs" />
          </div>

          <div>
            <label className="block text-xs text-[#6b7280] mb-1.5">
              Токен {editing && editing.hasApiToken && !token &&
                <span className="text-[#22c55e]">— сохранён, оставьте пустым, чтобы не менять</span>}
            </label>
            <input type="password" value={token} onChange={(e) => { setToken(e.target.value); setCheck(null); }}
              placeholder={editing && editing.hasApiToken ? "••••••••" : "токен этого бота"}
              className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] placeholder:text-[#6b7280] focus:outline-none focus:border-[#4F8EF7]/50 font-mono text-xs" />
          </div>

          <div>
            <button type="button" onClick={testConnection} disabled={(!apiUrl.trim() && !editing?.hasApiBaseUrl) || check === "…"}
              className="px-3 py-2 rounded-lg border border-[#2a2a3a] text-xs text-[#d1d1d8] hover:bg-[#1a1a24] disabled:opacity-40">
              {check === "…" ? "Проверяем…" : "Проверить подключение"}
            </button>
            {check && check !== "…" && (
              <div className={"mt-2 rounded-lg px-3 py-2 text-[11px] border " + (check.ok
                ? "bg-[#22c55e]/10 border-[#22c55e]/25 text-[#22c55e]"
                : "bg-[#ef4444]/10 border-[#ef4444]/25 text-[#ef4444]")}>
                {check.ok
                  ? <>Связь есть: <b>{check.botName || check.botId}</b>
                      <span className="opacity-70"> · {check.botId}</span>
                      {check.scopes?.length ? <span className="opacity-70"> · {check.scopes.join(", ")}</span> : null}</>
                  : check.error}
              </div>
            )}
          </div>

          <div>
            <label className="block text-xs text-[#6b7280] mb-1.5">business_id {editing && editing.hasBusinessId && !business &&
                <span className="text-[#22c55e]">— сохранён: {editing.businessIdMask}, оставьте пустым, чтобы не менять</span>}
            </label>
            <input value={business} onChange={(e) => setBusiness(e.target.value)}
              placeholder={editing && editing.hasBusinessId ? editing.businessIdMask : "business_connection_id аккаунта поддержки"}
              className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] placeholder:text-[#6b7280] focus:outline-none focus:border-[#4F8EF7]/50 font-mono text-xs" />
            <div className="text-[10px] text-[#6b7280] mt-1">
              По нему панель узнаёт, чей это тикет. Приходит от Telegram, когда бот
              подключён к аккаунту поддержки этого ВПН-а.
            </div>
          </div>

          <div className="pt-1 border-t border-[#2a2a3a]/60 space-y-3">
            <div className="text-[10px] uppercase tracking-wider text-[#6b7280] font-semibold pt-2">
              Remnawave
            </div>
            <div>
              <label className="block text-xs text-[#6b7280] mb-1.5">Адрес панели {editing && editing.hasRemnawaveBaseUrl && !rwUrl &&
                <span className="text-[#22c55e]">— сохранён: {editing.remnawaveBaseUrlMask}, оставьте пустым, чтобы не менять</span>}
              </label>
              <input value={rwUrl} onChange={(e) => { setRwUrl(e.target.value); setRwCheck(null); }}
                placeholder={editing && editing.hasRemnawaveBaseUrl ? editing.remnawaveBaseUrlMask : "https://panel.example.com"}
                className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] placeholder:text-[#6b7280] focus:outline-none focus:border-[#4F8EF7]/50 font-mono text-xs" />
            </div>
            <div>
              <label className="block text-xs text-[#6b7280] mb-1.5">
                Токен {editing && editing.hasRemnawaveToken && !rwToken &&
                  <span className="text-[#22c55e]">— сохранён, оставьте пустым, чтобы не менять</span>}
              </label>
              <input type="password" value={rwToken} onChange={(e) => { setRwToken(e.target.value); setRwCheck(null); }}
                placeholder={editing && editing.hasRemnawaveToken ? "••••••••" : "токен из /api/tokens панели"}
                className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] placeholder:text-[#6b7280] focus:outline-none focus:border-[#4F8EF7]/50 font-mono text-xs" />
            </div>
            <div>
              <label className="block text-xs text-[#6b7280] mb-1.5">
                Cookie <span className="text-[#3a3a4a]">— только если панель за прокси/WAF</span>
                {editing && editing.hasRemnawaveCookie && !rwCookie &&
                  <span className="text-[#22c55e]"> — сохранена, оставьте пустым, чтобы не менять</span>}
              </label>
              <input type="password" value={rwCookie} onChange={(e) => { setRwCookie(e.target.value); setRwCheck(null); }}
                placeholder={editing && editing.hasRemnawaveCookie ? "••••••••" : "ИмяКуки=значение"}
                className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] placeholder:text-[#6b7280] focus:outline-none focus:border-[#4F8EF7]/50 font-mono text-xs" />
              <div className="text-[10px] text-[#6b7280] mt-1">
                Нужна, если сервер отдаёт 403 даже с верным токеном — значение то же,
                что после «Cookie:» в рабочем curl-запросе.
              </div>
            </div>
            <div>
              <button type="button" onClick={testRwConnection} disabled={(!rwUrl.trim() && !editing?.hasRemnawaveBaseUrl) || rwCheck === "…"}
                className="px-3 py-2 rounded-lg border border-[#2a2a3a] text-xs text-[#d1d1d8] hover:bg-[#1a1a24] disabled:opacity-40">
                {rwCheck === "…" ? "Проверяем…" : "Проверить подключение"}
              </button>
              {rwCheck && rwCheck !== "…" && (
                <div className={"mt-2 rounded-lg px-3 py-2 text-[11px] border " + (rwCheck.ok
                  ? "bg-[#22c55e]/10 border-[#22c55e]/25 text-[#22c55e]"
                  : "bg-[#ef4444]/10 border-[#ef4444]/25 text-[#ef4444]")}>
                  {rwCheck.ok
                    ? <>Связь есть: <b>{rwCheck.botName}</b>
                        {rwCheck.scopes?.length ? <span className="opacity-70"> · {rwCheck.scopes.join(", ")}</span> : null}</>
                    : rwCheck.error}
                </div>
              )}
            </div>
            <div className="text-[10px] text-[#6b7280]">
              Только для статистики серверов на экране «Состояние». Источник
              данных о клиенте (Профиль/Ключи в карточке) это не меняет —
              он настраивается отдельно, в «Настройки → Источник данных».
            </div>
          </div>

          <div className="pt-1 border-t border-[#2a2a3a]/60">
            <button type="button" onClick={() => setFb((v) => !v)}
              className="w-full flex items-center gap-1.5 text-[11px] text-[#6b7280] hover:text-[#d1d1d8] py-1">
              <Icon name={fb ? "chevronDown" : "chevronRight"} className="w-3.5 h-3.5" />
              Резервная отправка
              <span className={"ml-auto text-[10px] " +
                (editing?.hasFallbackSession
                  ? (editing?.fallbackEnabled ? "text-[#22c55e]" : "text-[#eab308]")
                  : "text-[#3a3a4a]")}>
                {editing?.hasFallbackSession
                  ? (editing?.fallbackEnabled
                      ? (editing.fallbackAccount || "включена")
                      : "выключена")
                  : "не настроена"}
              </span>
            </button>
            {fb && (
              <div className="mt-2 mb-1">
                <div className="text-[10px] text-[#6b7280] mb-3 leading-relaxed">
                  Если n8n не смог доставить ответ в business-чат (например,
                  <span className="font-mono text-[#7BA8F9]"> BUSINESS_PEER_USAGE_MISSING</span>),
                  панель повторит отправку по MTProto от этого же аккаунта поддержки
                  и покажет результат в переписке.
                </div>
                <FallbackBlock service={editing} showToast={showToast} />
              </div>
            )}
          </div>

          <button type="button" onClick={() => setMore((v) => !v)}
            className="w-full flex items-center gap-1.5 text-[11px] text-[#6b7280] hover:text-[#d1d1d8] pt-1">
            <Icon name={more ? "chevronDown" : "chevronRight"} className="w-3.5 h-3.5" />
            Дополнительно {!more && <span className="text-[#3a3a4a]">— заполнено автоматически</span>}
          </button>

          {more && (
            <div className="space-y-4 border-l-2 border-[#2a2a3a] pl-3">
              <div className="grid grid-cols-[1fr_80px] gap-3">
                <div>
                  <label className="block text-xs text-[#6b7280] mb-1.5">
                    Слаг {editing && <span className="text-[#3a3a4a]">— неизменяем</span>}
                  </label>
                  <input value={editing ? editing.slug : slug} disabled={!!editing}
                    onChange={(e) => setSlug(slugify(e.target.value))} placeholder="nordflow"
                    className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] placeholder:text-[#6b7280] focus:outline-none focus:border-[#4F8EF7]/50 font-mono disabled:opacity-50" />
                </div>
                <div>
                  <label className="block text-xs text-[#6b7280] mb-1.5">Эмодзи</label>
                  <input value={emoji} onChange={(e) => setEmoji(e.target.value)} placeholder="🛡"
                    className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] placeholder:text-[#6b7280] focus:outline-none focus:border-[#4F8EF7]/50 text-center" />
                </div>
              </div>
              {!editing && (
                <div className="text-[10px] text-[#6b7280] -mt-2">
                  Коллекция Qdrant: <span className="font-mono text-[#7BA8F9]">kb_{slug || "…"}</span> ·
                  префикс ID диалогов: <span className="font-mono text-[#7BA8F9]">{slug || "…"}_</span>
                </div>
              )}
              <div>
                <label className="block text-xs text-[#6b7280] mb-1.5">Цвет</label>
                <div className="flex flex-wrap gap-2">
                  {SERVICE_COLORS.map((c) => (
                    <button key={c} type="button" onClick={() => setColor(c)}
                      className={"w-7 h-7 rounded-lg transition " + (color === c ? "ring-2 ring-offset-2 ring-offset-[#13131a] ring-white/60" : "")}
                      style={{ background: c }}></button>
                  ))}
                </div>
              </div>
              <div>
                <label className="block text-xs text-[#6b7280] mb-1.5">
                  Вебхук n8n <span className="text-[#3a3a4a]">— пусто = общий</span>
                </label>
                <input value={hook} onChange={(e) => setHook(e.target.value)}
                  placeholder={editing && editing.hasN8nWebhookUrl ? editing.n8nWebhookUrlMask : "https://n8n.example.com/webhook/..."}
                  className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] placeholder:text-[#6b7280] focus:outline-none focus:border-[#4F8EF7]/50 font-mono text-xs" />
              </div>
            </div>
          )}

          {editing && (
            <div className="flex items-center justify-between">
              <div>
                <div className="text-sm text-[#f1f1f5]">Активен</div>
                <div className="text-[10px] text-[#6b7280]">Выключенный сервис пропадает из переключателя</div>
              </div>
              <Switch on={active} onChange={() => setActive((v) => !v)} />
            </div>
          )}
        </div>
        <div className="px-5 py-4 border-t border-[#2a2a3a] flex justify-end gap-2">
          <button type="button" onClick={onClose} className="px-3 py-2 rounded-lg text-sm text-[#6b7280] hover:text-[#f1f1f5] hover:bg-[#1a1a24]">Отмена</button>
          <button type="submit" disabled={!name.trim() || (!editing && !slug)}
            className="px-4 py-2 rounded-lg bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white text-sm font-semibold disabled:opacity-40">
            {editing ? "Сохранить" : "Создать"}
          </button>
        </div>
      </form>
    </ModalOverlay>
  );
}

function OperatorModal({ editing, services = [], onClose, onSave }) {
  const [name,     setName]     = useStateT(editing?.name || "");
  const [tg,       setTg]       = useStateT(editing?.tg   || "@");
  const [tgId,     setTgId]     = useStateT(editing?.tgId != null ? String(editing.tgId) : "");
  const [role,     setRole]     = useStateT(editing?.role  || "agent");
  const [password, setPassword] = useStateT("");
  const [pwErr,    setPwErr]    = useStateT(null);
  // Флаги доступа задаются при создании; у существующего правятся прямо в
  // таблице операторов, поэтому здесь показываются только для нового.
  const [serviceIds, setServiceIds] = useStateT(editing?.serviceIds || []);

  function submit(e) {
    e?.preventDefault();
    if (!name.trim() || tg.length < 2) return;
    if (!editing && password && password.length < 6) {
      setPwErr("Минимум 6 символов"); return;
    }
    setPwErr(null);
    const tg_id = tgId.trim() ? parseInt(tgId.trim(), 10) : null;
    onSave({ name: name.trim(), tg: tg.trim(), tg_id, role, password, service_ids: serviceIds });
  }

  return (
    <ModalOverlay onClose={onClose}>
      <form onSubmit={submit} className="bg-[#13131a] border border-[#2a2a3a] rounded-xl w-full max-w-md overflow-hidden">
        <div className="px-5 py-4 border-b border-[#2a2a3a] flex items-center justify-between">
          <div className="font-semibold text-[#f1f1f5]">{editing ? "Редактировать" : "Добавить оператора"}</div>
          <button type="button" onClick={onClose} className="p-1 text-[#6b7280] hover:text-[#f1f1f5] rounded"><Icon name="x" /></button>
        </div>
        <div className="p-5 space-y-4">
          <div>
            <label className="block text-xs text-[#6b7280] mb-1.5">Имя</label>
            <input autoFocus value={name} onChange={(e) => setName(e.target.value)} placeholder="Алексей Петров"
              className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] placeholder:text-[#6b7280] focus:outline-none focus:border-[#4F8EF7]/50" />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-xs text-[#6b7280] mb-1.5">Telegram username</label>
              <input value={tg} onChange={(e) => { let v = e.target.value; if (!v.startsWith("@")) v = "@" + v.replace(/^@*/, ""); setTg(v); }} placeholder="@username"
                className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] placeholder:text-[#6b7280] focus:outline-none focus:border-[#4F8EF7]/50 font-mono" />
            </div>
            <div>
              <label className="block text-xs text-[#6b7280] mb-1.5">Telegram ID <span className="text-[#3a3a4a]">(числовой)</span></label>
              <input value={tgId} onChange={(e) => setTgId(e.target.value.replace(/\D/g, ""))} placeholder="123456789"
                className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] placeholder:text-[#6b7280] focus:outline-none focus:border-[#4F8EF7]/50 font-mono" />
            </div>
          </div>
          <div>
            <label className="block text-xs text-[#6b7280] mb-1.5">Роль</label>
            <div className="grid grid-cols-2 gap-2">
              {[["agent","Агент","Отвечает на диалоги"],["admin","Администратор","Полный доступ"]].map(([val, label, desc]) => (
                <button key={val} type="button" onClick={() => setRole(val)}
                  className={"px-3 py-2.5 rounded-lg text-sm font-medium border transition text-left " +
                    (role === val ? (val === "admin" ? "bg-[#A855F7]/15 border-[#A855F7]/40 text-[#C084FC]" : "bg-[#4F8EF7]/15 border-[#4F8EF7]/40 text-[#7BA8F9]") : "bg-[#0d0d12] border-[#2a2a3a] text-[#6b7280] hover:text-[#f1f1f5]")}>
                  <div>{label}</div>
                  <div className="text-[10px] text-[#6b7280] mt-0.5">{desc}</div>
                </button>
              ))}
            </div>
            {role === "agent" && services.length > 0 && (
              <div className="mt-4">
                <label className="block text-xs text-[#6b7280] mb-1.5">
                  Доступ к ВПН-сервисам
                  <span className="text-[#3a3a4a]"> — по каким тикетам сможет отвечать</span>
                </label>
                <div className="flex flex-wrap gap-1.5">
                  {services.map((s) => {
                    const on = serviceIds.includes(s.id);
                    return (
                      <button key={s.id} type="button"
                        onClick={() => setServiceIds((ids) =>
                          on ? ids.filter((i) => i !== s.id) : [...ids, s.id])}
                        className={"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium border transition " +
                          (on ? "bg-[#1a1a24] text-[#f1f1f5] border-[#3a3a4a]"
                              : "bg-[#0d0d12] text-[#6b7280] border-[#2a2a3a] hover:text-[#f1f1f5]")}>
                        <span className="w-1.5 h-1.5 rounded-full shrink-0"
                              style={{ background: on ? s.color : "#3a3a4a" }}></span>
                        {s.name}
                      </button>
                    );
                  })}
                </div>
              </div>
            )}
            {role === "admin" && (
              <div className="mt-3 text-[10px] text-[#6b7280]">
                Администратор видит все ВПН-сервисы — отдельные флаги не нужны.
              </div>
            )}
          </div>
          {!editing && (
            <div>
              <label className="block text-xs text-[#6b7280] mb-1.5">Пароль <span className="text-[#3a3a4a]">(необязательно — можно задать позже)</span></label>
              <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="••••••••"
                className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] placeholder:text-[#6b7280] focus:outline-none focus:border-[#4F8EF7]/50" />
              {pwErr && <div className="text-xs text-[#ef4444] mt-1">{pwErr}</div>}
            </div>
          )}
        </div>
        <div className="px-5 py-4 border-t border-[#2a2a3a] flex justify-end gap-2 bg-[#0d0d12]/50">
          <button type="button" onClick={onClose} className="px-3 py-1.5 rounded-lg text-sm text-[#6b7280] hover:text-[#f1f1f5] hover:bg-[#1a1a24]">Отмена</button>
          <button type="submit" disabled={!name.trim() || tg.length < 2}
            className="px-4 py-1.5 rounded-lg text-sm font-semibold bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white transition disabled:opacity-40 disabled:cursor-not-allowed">
            {editing ? "Сохранить" : "Добавить"}
          </button>
        </div>
      </form>
    </ModalOverlay>
  );
}

function ProfileSection({ showToast }) {
  const [current,    setCurrent]    = useStateT("");
  const [newPw,      setNewPw]      = useStateT("");
  const [newPw2,     setNewPw2]     = useStateT("");
  const [loading,    setLoading]    = useStateT(false);
  const [err,        setErr]        = useStateT(null);
  const [notifPrefs, setNotifPrefs] = useStateT(null);

  useEffectT(() => {
    window.apiFetch("GET", "/api/operators/me/notifications").then(setNotifPrefs).catch(() => {});
  }, []);

  async function saveNotifPrefs() {
    try {
      await window.apiFetch("PUT", "/api/operators/me/notifications", notifPrefs);
      if (window._setSoundEnabled) window._setSoundEnabled(!!notifPrefs.sound_enabled);
      showToast("Настройки уведомлений сохранены");
    } catch { showToast("Ошибка сохранения"); }
  }

  async function submit(e) {
    e?.preventDefault();
    if (newPw !== newPw2)  { setErr("Пароли не совпадают"); return; }
    if (newPw.length < 6)  { setErr("Новый пароль — минимум 6 символов"); return; }
    setLoading(true);
    setErr(null);
    try {
      await window.apiFetch("PUT", "/api/auth/password", {
        current_password: current,
        new_password: newPw,
      });
      setCurrent(""); setNewPw(""); setNewPw2("");
      showToast("Пароль изменён");
    } catch {
      setErr("Неверный текущий пароль");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="max-w-[600px] mx-auto p-3 sm:p-6 space-y-4 sm:space-y-5">
      <div>
        <h1 className="text-xl font-semibold text-[#f1f1f5]">Профиль</h1>
        <div className="text-xs text-[#6b7280] mt-0.5">Управление своим аккаунтом</div>
      </div>

      {notifPrefs && (
        <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl divide-y divide-[#2a2a3a]/60">
          <div className="px-5 py-3.5 flex items-center justify-between">
            <div>
              <div className="text-sm font-medium text-[#f1f1f5]">Уведомления в Telegram</div>
              <div className="text-xs text-[#6b7280] mt-0.5">Какие события присылать вам в личку</div>
            </div>
            <button onClick={saveNotifPrefs} className="px-3 py-1.5 rounded-lg text-xs font-semibold bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white transition">Сохранить</button>
          </div>
          {[
            ["new_dialog",      "Новый диалог",        "Пользователь впервые написал в бот"],
            ["operator_called", "Вызов оператора",     "Пользователь или ИИ запросили человека"],
          ].map(([key, title, desc]) => (
            <div key={key} className="px-5 py-3 flex items-center justify-between">
              <div>
                <div className="text-sm text-[#f1f1f5]">{title}</div>
                <div className="text-xs text-[#6b7280]">{desc}</div>
              </div>
              <Switch on={!!notifPrefs[key]} onChange={() => setNotifPrefs((p) => ({ ...p, [key]: !p[key] }))} />
            </div>
          ))}
          <div className="px-5 py-3 flex items-center justify-between">
            <div>
              <div className="text-sm text-[#f1f1f5]">Звуки уведомлений</div>
              <div className="text-xs text-[#6b7280]">Воспроизводить звук при новых событиях в браузере</div>
            </div>
            <Switch on={!!notifPrefs.sound_enabled} onChange={() => setNotifPrefs((p) => ({ ...p, sound_enabled: !p.sound_enabled }))} />
          </div>
        </div>
      )}

      <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl p-5">
        <div className="text-sm font-medium text-[#f1f1f5] mb-4">Смена пароля</div>
        <form onSubmit={submit} className="space-y-4">
          <div>
            <label className="block text-xs text-[#6b7280] mb-1.5">Текущий пароль</label>
            <input type="password" value={current} onChange={(e) => setCurrent(e.target.value)}
              className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50" />
          </div>
          <div>
            <label className="block text-xs text-[#6b7280] mb-1.5">Новый пароль</label>
            <input type="password" value={newPw} onChange={(e) => setNewPw(e.target.value)}
              className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50" />
          </div>
          <div>
            <label className="block text-xs text-[#6b7280] mb-1.5">Повторите новый пароль</label>
            <input type="password" value={newPw2} onChange={(e) => setNewPw2(e.target.value)}
              className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50" />
          </div>
          {err && (
            <div className="text-xs text-[#ef4444] bg-[#ef4444]/10 border border-[#ef4444]/20 rounded-lg px-3 py-2">
              {err}
            </div>
          )}
          <button type="submit" disabled={loading || !current || !newPw || !newPw2}
            className="px-4 py-2 rounded-lg bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white text-sm font-semibold transition disabled:opacity-40 disabled:cursor-not-allowed">
            {loading ? "Сохранение..." : "Изменить пароль"}
          </button>
        </form>
      </div>
    </div>
  );
}

function ScheduleSection({ showToast }) {
  const DAYS = [
    {key:"mon",label:"Пн"},{key:"tue",label:"Вт"},{key:"wed",label:"Ср"},
    {key:"thu",label:"Чт"},{key:"fri",label:"Пт"},{key:"sat",label:"Сб"},{key:"sun",label:"Вс"},
  ];
  const [schedule, setSchedule] = useStateT(null);

  useEffectT(() => {
    window.apiFetch("GET", "/api/settings/schedule").then(setSchedule).catch(() => {});
  }, []);

  function setDay(key, field, value) {
    setSchedule((s) => ({ ...s, [key]: { ...s[key], [field]: value } }));
  }

  async function save() {
    try {
      await window.apiFetch("PUT", "/api/settings/schedule", { schedule });
      showToast("Расписание сохранено");
    } catch { showToast("Ошибка сохранения"); }
  }

  if (!schedule) return <div className="p-6 text-[#6b7280] text-sm">Загрузка...</div>;

  return (
    <div className="max-w-[1100px] mx-auto p-3 sm:p-6 space-y-4 sm:space-y-5">
      <div>
        <h1 className="text-xl font-semibold text-[#f1f1f5]">Расписание</h1>
        <div className="text-xs text-[#6b7280] mt-0.5">Уведомления в нерабочее время накапливаются и отправляются операторам в начале рабочего дня. ИИ работает круглосуточно.</div>
      </div>
      <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl divide-y divide-[#2a2a3a]/60">
        {DAYS.map(({ key, label }) => {
          const day = schedule[key] || { enabled: false, from: "09:00", to: "21:00" };
          return (
            <div key={key} className="px-5 py-3 flex items-center gap-4 flex-wrap">
              <div className="w-8 text-sm text-[#f1f1f5] font-medium">{label}</div>
              <Switch on={day.enabled} onChange={() => setDay(key, "enabled", !day.enabled)} />
              {day.enabled ? (
                <div className="flex items-center gap-2">
                  <input type="time" value={day.from} onChange={(e) => setDay(key, "from", e.target.value)}
                    className="bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-2 py-1 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50" />
                  <span className="text-[#6b7280]">—</span>
                  <input type="time" value={day.to} onChange={(e) => setDay(key, "to", e.target.value)}
                    className="bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-2 py-1 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50" />
                  <span className="text-xs text-[#22c55e]">Рабочий</span>
                </div>
              ) : (
                <span className="text-xs text-[#6b7280]">Выходной</span>
              )}
            </div>
          );
        })}
      </div>
      <div className="flex justify-end">
        <button onClick={save} className="px-4 py-2 rounded-lg bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white text-sm font-semibold">Сохранить</button>
      </div>
    </div>
  );
}

function AISection({ showToast, service }) {
  const [settings, setSettings] = useStateT(null);

  useEffectT(() => {
    setSettings(null);
    window.apiFetch("GET", "/api/settings/ai" + svcQuery(service)).then(setSettings).catch(() => {});
  }, [service?.id]);

  async function save() {
    try {
      await window.apiFetch("PUT", "/api/settings/ai" + svcQuery(service), settings);
      showToast("Настройки ИИ сохранены");
    } catch { showToast("Ошибка сохранения"); }
  }

  if (!settings) return <div className="p-6 text-[#6b7280] text-sm">Загрузка...</div>;

  return (
    <div className="max-w-[1100px] mx-auto p-3 sm:p-6 space-y-4 sm:space-y-5">
      <div>
        <h1 className="text-xl font-semibold text-[#f1f1f5]">ИИ-настройки</h1>
        <div className="text-xs text-[#6b7280] mt-0.5">Сохраняется в БД и Redis — n8n подхватывает сразу</div>
      </div>
      <ServiceBanner service={service} hint={service ? `ключ Redis: vpn_bot:${service.slug}:ai_settings` : ""} />
      <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl divide-y divide-[#2a2a3a]/60">
        <SettingsRow title="Автоматические ответы" desc="ИИ сам отвечает на сообщения" control={<Switch on={settings.auto_reply} onChange={() => setSettings((s) => ({ ...s, auto_reply: !s.auto_reply }))} />} />
        <div className="px-5 py-4">
          <div className="text-sm text-[#f1f1f5] mb-1">Модель</div>
          <div className="text-xs text-[#6b7280] mb-2">Модель OpenAI для ответов ИИ (n8n подхватывает после сохранения)</div>
          <input
            list="ai-model-options"
            value={settings.model ?? "gpt-4o-mini"}
            onChange={(e) => setSettings((s) => ({ ...s, model: e.target.value }))}
            placeholder="gpt-4o-mini"
            className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50"
          />
          <datalist id="ai-model-options">
            <option value="gpt-4o-mini" />
            <option value="gpt-4o" />
            <option value="gpt-4.1-mini" />
            <option value="gpt-4.1" />
            <option value="gpt-4.1-nano" />
            <option value="o4-mini" />
          </datalist>
        </div>
        <div className="px-5 py-4">
          <div className="flex justify-between mb-2">
            <div>
              <div className="text-sm text-[#f1f1f5]">Температура модели</div>
              <div className="text-xs text-[#6b7280]">Чем выше — тем креативнее</div>
            </div>
            <div className="text-sm font-medium text-[#7BA8F9] tabular-nums">{Number(settings.temperature).toFixed(2)}</div>
          </div>
          <input type="range" min="0" max="1" step="0.05" value={settings.temperature}
            onChange={(e) => setSettings((s) => ({ ...s, temperature: parseFloat(e.target.value) }))}
            className="w-full accent-[#4F8EF7]" />
        </div>
      </div>
      <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl p-5">
        <div className="text-sm font-medium text-[#f1f1f5] mb-1">Системный промпт</div>
        <div className="text-xs text-[#6b7280] mb-3">Инструкции для ИИ в начале каждого диалога</div>
        <textarea value={settings.prompt} onChange={(e) => setSettings((s) => ({ ...s, prompt: e.target.value }))} rows={6}
          className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50 leading-relaxed" />
      </div>
      <div className="flex justify-end">
        <button onClick={save} className="px-4 py-2 rounded-lg bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white text-sm font-semibold">Сохранить</button>
      </div>
    </div>
  );
}

function NotificationsSection({ showToast }) {
  const [s, setS] = useStateT(null);

  useEffectT(() => {
    window.apiFetch("GET", "/api/settings/notifications").then(setS).catch(() => {});
  }, []);

  async function save() {
    try {
      await window.apiFetch("PUT", "/api/settings/notifications", s);
      showToast("Настройки уведомлений сохранены");
    } catch { showToast("Ошибка сохранения"); }
  }

  function toggle(key) { setS(v => ({ ...v, [key]: !v[key] })); }

  if (!s) return <div className="p-6 text-[#6b7280] text-sm">Загрузка...</div>;

  return (
    <div className="max-w-[1100px] mx-auto p-3 sm:p-6 space-y-4 sm:space-y-5">
      <div>
        <h1 className="text-xl font-semibold text-[#f1f1f5]">Уведомления</h1>
        <div className="text-xs text-[#6b7280] mt-0.5">Python публикует события в Redis → n8n доставляет в Telegram</div>
      </div>
      <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl divide-y divide-[#2a2a3a]/60">
        <SettingsRow title="Новый диалог" desc="Пинг в Telegram при новом обращении" control={<Switch on={s.new_dialog} onChange={()=>toggle("new_dialog")} />} />
        <SettingsRow title="Пользователь вызвал оператора" desc="При handoff или operator_called из n8n" control={<Switch on={s.operator_called} onChange={()=>toggle("operator_called")} />} />
        <SettingsRow title="Сервер VPN недоступен" desc="Мгновенное оповещение при переходе в down" control={<Switch on={s.server_down} onChange={()=>toggle("server_down")} />} />
      </div>
      <div className="flex justify-end">
        <button onClick={() => showToast("Настройки уведомлений сохранены")} className="px-4 py-2 rounded-lg bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white text-sm font-semibold">Сохранить</button>
      </div>
    </div>
  );
}

const CATEGORY_LABELS = {
  troubleshooting: "Решение проблем",
  setup:           "Настройка",
  payment:         "Оплата",
  faq:             "FAQ",
  escalation:      "Эскалация",
};

const CATEGORY_COLORS = {
  troubleshooting: "bg-[#ef4444]/15 text-[#f87171] border-[#ef4444]/30",
  setup:           "bg-[#22c55e]/15 text-[#4ade80] border-[#22c55e]/30",
  payment:         "bg-[#eab308]/15 text-[#facc15] border-[#eab308]/30",
  faq:             "bg-[#4F8EF7]/15 text-[#7BA8F9] border-[#4F8EF7]/30",
  escalation:      "bg-[#A855F7]/15 text-[#C084FC] border-[#A855F7]/30",
};

// Агенту база знаний доступна только на просмотр: список статей и их текст
// видны всем, а загрузка, сброс и удаление — по-прежнему только у админа
// (бэкенд на /api/kb/upload и DELETE /api/kb тоже это проверяет).
function KBSection({ service, isAdmin = false }) {
  const [articles,   setArticles]   = useStateT(null);
  const [uploading,  setUploading]  = useStateT(false);
  const [uploadErr,  setUploadErr]  = useStateT(null);
  const [deleting,   setDeleting]   = useStateT(null);
  const [expanded,   setExpanded]   = useStateT(null);
  const [resetting,  setResetting]  = useStateT(false);
  const fileRef = React.createRef();

  useEffectT(() => {
    setArticles(null);
    window.apiFetch("GET", "/api/kb" + svcQuery(service)).then(setArticles).catch(() => setArticles([]));
  }, [service?.id]);

  async function handleUpload(e) {
    const file = e.target.files?.[0];
    if (!file) return;
    e.target.value = "";
    // Загрузка заменяет базу знаний целиком, а не дополняет её — иначе разделы,
    // удалённые из документа при правке, навсегда оставались бы в поиске ИИ.
    // Поэтому спрашиваем, когда есть что потерять.
    if (articles && articles.length > 0 &&
        !window.confirm(`Загрузка заменит базу знаний целиком: ${articles.length} ` +
                        `чанков будут удалены, вместо них встанут чанки из нового файла. ` +
                        `Продолжить?`)) return;
    setUploading(true);
    setUploadErr(null);
    try {
      const form = new FormData();
      form.append("file", file);
      const headers = {};
      const token = localStorage.getItem("hd_token");
      if (token) headers["Authorization"] = "Bearer " + token;
      const res = await fetch("/api/kb/upload" + svcQuery(service), { method: "POST", headers, body: form });
      if (!res.ok) {
        const err = await res.json().catch(() => ({}));
        throw new Error(err.detail || res.statusText);
      }
      const data = await res.json();
      const fresh = await window.apiFetch("GET", "/api/kb" + svcQuery(service));
      setArticles(fresh);
      setUploadErr(null);
    } catch (err) {
      setUploadErr(err.message || "Ошибка загрузки");
    } finally {
      setUploading(false);
    }
  }

  async function handleDelete(id) {
    setDeleting(id);
    try {
      await window.apiFetch("DELETE", `/api/kb/${id}` + svcQuery(service));
      setArticles((arr) => arr.filter((a) => a.id !== id));
    } catch {
    } finally {
      setDeleting(null);
    }
  }

  async function handleReset() {
    if (!window.confirm("Сбросить всю базу знаний? Все статьи и векторы будут удалены без возможности восстановления.")) return;
    setResetting(true);
    try {
      await window.apiFetch("DELETE", "/api/kb" + svcQuery(service));
      setArticles([]);
    } catch {
    } finally {
      setResetting(false);
    }
  }

  if (articles === null) return <div className="p-6 text-[#6b7280] text-sm">Загрузка...</div>;

  return (
    <div className="max-w-[1100px] mx-auto p-3 sm:p-6 space-y-4 sm:space-y-5">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-semibold text-[#f1f1f5]">База знаний</h1>
          <div className="text-xs text-[#6b7280] mt-0.5">
            {articles.length} чанков · используется ИИ для поиска
            {isAdmin
              ? <> · <span className="text-[#f59e0b]">загрузка заменяет базу целиком</span></>
              : <> · только просмотр</>}
          </div>
        </div>
        <div className="flex items-center gap-2">
          {uploading && <span className="text-xs text-[#6b7280] animate-pulse">Обработка ИИ...</span>}
          {isAdmin && articles && articles.length > 0 && (
            <button onClick={handleReset} disabled={resetting}
              className="px-3 py-2 rounded-lg bg-[#ef4444]/10 hover:bg-[#ef4444]/20 text-[#ef4444] text-xs font-semibold flex items-center gap-1.5 disabled:opacity-50 border border-[#ef4444]/20">
              <Icon name="trash-2" className="w-3.5 h-3.5" strokeWidth={2.5} />
              {resetting ? "Сброс..." : "Сбросить всё"}
            </button>
          )}
          {isAdmin && (
            <>
              <button onClick={() => fileRef.current?.click()} disabled={uploading}
                className="px-3 py-2 rounded-lg bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white text-xs font-semibold flex items-center gap-1.5 disabled:opacity-50">
                <Icon name="plus" className="w-3.5 h-3.5" strokeWidth={2.5} />
                Загрузить документ
              </button>
              <input ref={fileRef} type="file" accept=".txt,.md" className="hidden" onChange={handleUpload} />
            </>
          )}
        </div>
      </div>
      <ServiceBanner service={service}
                     hint={service ? `коллекция Qdrant: ${service.qdrantCollection}` : ""} />

      {uploadErr && (
        <div className="text-sm text-[#ef4444] bg-[#ef4444]/10 border border-[#ef4444]/20 rounded-lg px-4 py-2">
          {uploadErr}
        </div>
      )}

      {!uploading && articles.length === 0 && (
        <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl p-10 text-center">
          <div className="w-12 h-12 rounded-xl bg-[#4F8EF7]/10 text-[#7BA8F9] flex items-center justify-center mx-auto mb-3">
            <Icon name="book" className="w-6 h-6" />
          </div>
          <div className="text-sm text-[#f1f1f5] font-medium mb-1">База знаний пуста</div>
          <div className="text-xs text-[#6b7280]">
            {isAdmin
              ? "Загрузите .txt или .md файл — ИИ разобьёт его на чанки и проиндексирует"
              : "Статьи загружает администратор"}
          </div>
        </div>
      )}

      {articles.length > 0 && (
        <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl divide-y divide-[#2a2a3a]/40">
          {articles.map((a) => {
            const kw = Array.isArray(a.keywords) ? a.keywords : [];
            const catColor = CATEGORY_COLORS[a.category] || CATEGORY_COLORS.faq;
            const catLabel = CATEGORY_LABELS[a.category] || a.category;
            const isOpen = expanded === a.id;
            return (
              <div key={a.id}>
                <div className="px-5 py-3 flex items-start justify-between gap-3 hover:bg-[#1a1a24]/40 transition">
                  <button className="flex items-start gap-3 min-w-0 flex-1 text-left" onClick={() => setExpanded(isOpen ? null : a.id)}>
                    <div className="w-9 h-9 rounded-lg bg-[#4F8EF7]/10 text-[#7BA8F9] flex items-center justify-center shrink-0 mt-0.5">
                      <Icon name="book" />
                    </div>
                    <div className="min-w-0">
                      <div className="flex items-center gap-2 flex-wrap">
                        <span className="text-sm text-[#f1f1f5] font-medium">{a.title}</span>
                        <span className={"inline-flex px-1.5 py-0.5 rounded text-[10px] font-medium border " + catColor}>{catLabel}</span>
                      </div>
                      {kw.length > 0 && (
                        <div className="flex flex-wrap gap-1 mt-1">
                          {kw.slice(0, 6).map((k, i) => (
                            <span key={i} className="text-[10px] text-[#6b7280] bg-[#1a1a24] px-1.5 py-0.5 rounded">{k}</span>
                          ))}
                          {kw.length > 6 && <span className="text-[10px] text-[#6b7280]">+{kw.length - 6}</span>}
                        </div>
                      )}
                    </div>
                  </button>
                  {isAdmin && (
                    <button onClick={() => handleDelete(a.id)} disabled={deleting === a.id}
                      className="p-1.5 text-[#6b7280] hover:text-[#ef4444] hover:bg-[#ef4444]/10 rounded transition shrink-0 mt-0.5 disabled:opacity-40">
                      <Icon name="trash" className="w-4 h-4" />
                    </button>
                  )}
                </div>
                {isOpen && (
                  <div className="px-5 pb-4 pt-0">
                    <div className="ml-12 bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-4 py-3 text-xs text-[#9ca3af] leading-relaxed whitespace-pre-wrap">
                      {a.content}
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

function AutomationSection({ showToast, service }) {
  const [s, setS] = useStateT(null);

  useEffectT(() => {
    setS(null);
    window.apiFetch("GET", "/api/settings/automation" + svcQuery(service)).then(setS).catch(() => {});
  }, [service?.id]);

  async function save() {
    try {
      await window.apiFetch("PUT", "/api/settings/automation" + svcQuery(service), s);
      showToast("Настройки автоматизации сохранены");
    } catch { showToast("Ошибка сохранения"); }
  }

  // Switches save immediately (like the operator's «Пауза» toggle elsewhere
  // in the app) — otherwise a toggle silently reverts if the operator
  // navigates away or reloads before finding the distant «Сохранить» button,
  // which is exactly the bug this fixes.
  async function toggle(key) {
    const next = { ...s, [key]: !s[key] };
    setS(next);
    try {
      await window.apiFetch("PUT", "/api/settings/automation" + svcQuery(service), next);
      showToast("Настройки автоматизации сохранены");
    } catch { showToast("Ошибка сохранения"); }
  }
  function set(key, val) { setS(v => ({ ...v, [key]: val })); }

  if (!s) return <div className="p-6 text-[#6b7280] text-sm">Загрузка...</div>;

  return (
    <div className="max-w-[1100px] mx-auto p-3 sm:p-6 space-y-4 sm:space-y-5">
      <div>
        <h1 className="text-xl font-semibold text-[#f1f1f5]">Автоматизация</h1>
        <div className="text-xs text-[#6b7280] mt-0.5">Автоматические действия при диалогах. Все параметры настраиваются отдельно для каждого ВПН-сервиса</div>
      </div>
      <ServiceBanner service={service} />

      {/* Operator handoff */}
      <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl divide-y divide-[#2a2a3a]/60">
        <div className="px-5 py-3.5">
          <div className="text-[10px] uppercase tracking-wider text-[#6b7280] font-semibold mb-3">Передача оператору</div>
          <div className="flex items-center justify-between">
            <div>
              <div className="text-sm text-[#f1f1f5]">Показывать кнопку «Позвать оператора»</div>
              <div className="text-xs text-[#6b7280] mt-0.5">Кнопка появляется у пользователя в Telegram</div>
            </div>
            <Switch on={s.operator_button_enabled} onChange={() => toggle("operator_button_enabled")} />
          </div>
          {s.operator_button_enabled && (
            <div className="mt-3 flex items-center gap-3">
              <span className="text-sm text-[#6b7280] shrink-0">Показать после</span>
              <input
                type="number" min="1" max="20" value={s.operator_button_after_msgs}
                onChange={e => set("operator_button_after_msgs", Math.max(1, parseInt(e.target.value) || 1))}
                className="w-20 bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-1.5 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50 text-center"
              />
              <span className="text-sm text-[#6b7280] shrink-0">сообщений от пользователя</span>
            </div>
          )}
        </div>
        <div className="px-5 py-4">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-sm text-[#f1f1f5]">Авто-вызов от ИИ</div>
              <div className="text-xs text-[#6b7280] mt-0.5">ИИ сам передаёт диалог оператору, если не уверен в ответе</div>
            </div>
            <Switch on={s.auto_handoff_enabled} onChange={() => toggle("auto_handoff_enabled")} />
          </div>
          {s.auto_handoff_enabled && (
            <div className="mt-3">
              <label className="block text-xs text-[#6b7280] mb-2">Промпт авто-передачи (гейт)</label>
              <textarea
                value={s.handoff_instruction_text ?? ""}
                onChange={e => set("handoff_instruction_text", e.target.value)}
                rows={5}
                className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50 leading-relaxed"
              />
              <div className="text-xs text-[#6b7280] mt-1.5">Отдельный промпт модуля-маршрутизатора (гейта): он решает, передать диалог оператору или продолжать. К основному промпту НЕ приклеивается — хранится отдельно и подставляется в гейт. Гейт должен возвращать одно слово: HANDOFF или CONTINUE (тег [HANDOFF] внутри писать не нужно). Счётчик шагов и историю диалога дописывает сам сценарий. Не используйте одиночные символы {'{'} и {'}'}. Пустое поле = стандартный текст. Сохраняется кнопкой «Сохранить»</div>
            </div>
          )}
        </div>
        <div className="px-5 py-4">
          <div className="text-sm text-[#f1f1f5]">Стоп-слова вызова оператора</div>
          <div className="text-xs text-[#6b7280] mt-0.5 mb-2">Если клиент пишет ИИ сообщение с любым из этих слов — тикет сразу передаётся оператору, независимо от ИИ. Через запятую; регистр не важен, совпадение по подстроке («оператор» покрывает «оператора»). Фраза из нескольких слов срабатывает, когда встречаются все её части — используйте основы слов: «жив человек» покрывает «живого человека»</div>
          <input
            type="text"
            value={s.operator_call_keywords ?? ""}
            onChange={e => set("operator_call_keywords", e.target.value)}
            placeholder="оператор, менеджер, жив человек"
            className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50"
          />
        </div>
      </div>

      {/* Rating */}
      <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl divide-y divide-[#2a2a3a]/60">
        <SettingsRow
          title="Запрашивать оценку после закрытия"
          desc="Пользователь получает кнопки ⭐ — ⭐⭐⭐⭐⭐ в Telegram"
          control={<Switch on={s.rating_enabled} onChange={() => toggle("rating_enabled")} />}
        />
        {s.rating_enabled && (
          <div className="px-5 py-4 space-y-4">
            <div>
              <label className="block text-xs text-[#6b7280] mb-2">Текст запроса оценки</label>
              <textarea
                value={s.rating_message_text}
                onChange={e => set("rating_message_text", e.target.value)}
                rows={2}
                className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50 leading-relaxed"
                placeholder="Оцените качество поддержки:"
              />
            </div>
            <div>
              <label className="block text-xs text-[#6b7280] mb-2">Текст после получения оценки</label>
              <textarea
                value={s.rating_thanks_text ?? "Спасибо за оценку! 🙏"}
                onChange={e => set("rating_thanks_text", e.target.value)}
                rows={2}
                className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50 leading-relaxed"
                placeholder="Спасибо за оценку! 🙏"
              />
            </div>
          </div>
        )}
      </div>

      {/* Close message */}
      <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl divide-y divide-[#2a2a3a]/60">
        <SettingsRow
          title="Отправлять сообщение при закрытии"
          desc="Пользователь получает текст после закрытия диалога оператором"
          control={<Switch on={s.close_message_enabled} onChange={() => toggle("close_message_enabled")} />}
        />
        {s.close_message_enabled && (
          <div className="px-5 py-4">
            <label className="block text-xs text-[#6b7280] mb-2">Текст сообщения</label>
            <textarea
              value={s.close_message_text}
              onChange={e => set("close_message_text", e.target.value)}
              rows={3}
              className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50 leading-relaxed"
              placeholder="Спасибо за обращение!..."
            />
          </div>
        )}
      </div>

      {/* Distribution settings */}
      <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl">
        <div className="px-5 py-4 space-y-4">
          <div className="text-[10px] uppercase tracking-wider text-[#6b7280] font-semibold">Распределение</div>
          <div className="flex items-center gap-4">
            <div>
              <div className="text-sm text-[#f1f1f5]">Макс. тикетов на оператора</div>
              <div className="text-xs text-[#6b7280] mt-0.5">Слот занимают только тикеты «В работе»; сверх лимита — очередь</div>
            </div>
            <input
              type="number" min="1" max="100"
              value={s.max_tickets_per_operator ?? 10}
              onChange={e => set("max_tickets_per_operator", Math.max(1, parseInt(e.target.value) || 1))}
              className="w-20 bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-1.5 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50 text-center ml-auto"
            />
          </div>
          <div className="flex items-center gap-4">
            <div>
              <div className="text-sm text-[#f1f1f5]">Грейс-период офлайна, сек</div>
              <div className="text-xs text-[#6b7280] mt-0.5">Сколько ждать возвращения оператора, прежде чем передать его тикеты «В работе» другим</div>
            </div>
            <input
              type="number" min="0" max="3600"
              value={s.offline_grace_seconds ?? 60}
              onChange={e => set("offline_grace_seconds", Math.max(0, parseInt(e.target.value) || 0))}
              className="w-20 bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-1.5 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50 text-center ml-auto"
            />
          </div>
        </div>
      </div>

      <div className="flex justify-end">
        <button onClick={save} className="px-4 py-2 rounded-lg bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white text-sm font-semibold">
          Сохранить
        </button>
      </div>
    </div>
  );
}

function SoundsSection({ showToast }) {
  const [sounds, setSounds] = useStateT({});

  useEffectT(() => {
    window.apiFetch("GET", "/api/settings/sounds").then(setSounds).catch(() => {});
  }, []);

  async function handleUpload(event, file) {
    if (!file) return;
    try {
      const res = await window.apiFetch("UPLOAD", `/api/settings/sounds/upload?event=${event}`, file);
      setSounds((prev) => {
        const next = { ...prev, [`${event}_url`]: res.url };
        if (window._setSoundsConfig) window._setSoundsConfig(next);
        return next;
      });
      showToast("Звук загружен");
    } catch {
      showToast("Ошибка загрузки");
    }
  }

  const cards = [
    { event: "operator_called", label: "Оператор вызван", desc: "Играет когда диалог передаётся на поддержку" },
    { event: "new_message",     label: "Новое сообщение",  desc: "Играет при входящем сообщении в активный диалог" },
  ];

  return (
    <div className="max-w-[600px] mx-auto p-3 sm:p-6 space-y-4 sm:space-y-5">
      <div>
        <h1 className="text-xl font-semibold text-[#f1f1f5]">Звуки уведомлений</h1>
        <div className="text-xs text-[#6b7280] mt-0.5">Загрузите аудиофайлы для браузерных уведомлений</div>
      </div>
      <div className="space-y-4">
        {cards.map(({ event, label, desc }) => {
          const url = sounds[`${event}_url`];
          return (
            <div key={event} className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl p-5 space-y-3">
              <div>
                <div className="text-sm font-medium text-[#f1f1f5]">{label}</div>
                <div className="text-xs text-[#6b7280] mt-0.5">{desc}</div>
              </div>
              {url ? (
                <audio controls src={url} className="w-full h-9 rounded-lg" style={{ accentColor: "#4F8EF7" }} />
              ) : (
                <div className="text-xs text-[#6b7280] bg-[#0d0d12] rounded-lg px-3 py-2 border border-dashed border-[#2a2a3a]">Звук не загружен</div>
              )}
              <label className="inline-flex items-center gap-2 cursor-pointer px-3 py-1.5 rounded-lg bg-[#1a1a24] border border-[#2a2a3a] hover:border-[#4F8EF7]/50 text-xs text-[#7BA8F9] transition">
                <Icon name="plus" className="w-3.5 h-3.5" />
                {url ? "Заменить файл" : "Загрузить файл"}
                <input type="file" accept="audio/*" className="hidden" onChange={(e) => handleUpload(event, e.target.files[0])} />
              </label>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function BroadcastSection({ showToast, service }) {
  const [text, setText] = useStateT("");
  const [confirm, setConfirm] = useStateT(false);
  const [result, setResult] = useStateT(null);
  const [loading, setLoading] = useStateT(false);

  async function sendBroadcast() {
    setConfirm(false);
    setLoading(true);
    setResult(null);
    try {
      const res = await window.apiFetch("POST", "/api/broadcast" + svcQuery(service), { text });
      setResult(res);
      if (res.failed === 0) showToast(`Отправлено ${res.sent} пользователям`);
      else showToast(`Отправлено ${res.sent}, ошибок ${res.failed}`);
    } catch (e) {
      showToast("Ошибка рассылки");
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="max-w-[700px] mx-auto p-3 sm:p-6 space-y-4 sm:space-y-5">
      <div>
        <h1 className="text-xl font-semibold text-[#f1f1f5]">Рассылка</h1>
        <div className="text-xs text-[#6b7280] mt-0.5">
          Сообщение уйдёт клиентам выбранного ВПН-сервиса через его бота. Рассылки разных сервисов идут независимо
        </div>
      </div>
      <ServiceBanner service={service} />

      <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl p-5 space-y-4">
        <div>
          <label className="block text-xs text-[#6b7280] mb-2">Текст сообщения</label>
          <textarea
            value={text}
            onChange={e => setText(e.target.value)}
            rows={5}
            placeholder="Введите текст рассылки..."
            className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2.5 text-sm text-[#f1f1f5] placeholder:text-[#6b7280] focus:outline-none focus:border-[#4F8EF7]/50 leading-relaxed"
          />
        </div>

        {result && (
          <div className="bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-4 py-3 text-sm">
            <div className="flex items-center gap-4">
              <span className="text-[#22c55e]">✓ Отправлено: <span className="font-semibold tabular-nums">{result.sent}</span></span>
              {result.failed > 0 && <span className="text-[#ef4444]">✗ Ошибок: <span className="font-semibold tabular-nums">{result.failed}</span></span>}
              <span className="text-[#6b7280]">Всего: {result.total}</span>
            </div>
          </div>
        )}

        <div className="flex justify-end">
          <button
            onClick={() => setConfirm(true)}
            disabled={!text.trim() || loading}
            className="px-4 py-2 rounded-lg bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white text-sm font-semibold transition disabled:opacity-40 disabled:cursor-not-allowed flex items-center gap-2"
          >
            <Icon name="megaphone" className="w-4 h-4" />
            {loading ? "Отправка..." : "Отправить всем"}
          </button>
        </div>
      </div>

      {confirm && (
        <ModalOverlay onClose={() => setConfirm(false)}>
          <div className="bg-[#13131a] border border-[#2a2a3a] rounded-xl p-6 w-full max-w-sm">
            <div className="font-semibold text-[#f1f1f5] mb-2">Отправить рассылку?</div>
            <div className="text-sm text-[#6b7280] mb-4 leading-relaxed">
              Сообщение получат все пользователи, которые когда-либо писали боту. Отменить нельзя.
            </div>
            <div className="bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-xs text-[#f1f1f5] mb-5 leading-relaxed max-h-24 overflow-y-auto">
              {text}
            </div>
            <div className="flex justify-end gap-2">
              <button onClick={() => setConfirm(false)} className="px-3 py-1.5 rounded-lg text-sm text-[#6b7280] hover:text-[#f1f1f5] hover:bg-[#1a1a24]">Отмена</button>
              <button onClick={sendBroadcast} className="px-4 py-1.5 rounded-lg text-sm font-semibold bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white transition">
                Отправить
              </button>
            </div>
          </div>
        </ModalOverlay>
      )}
    </div>
  );
}

function SettingsRow({ title, desc, control }) {
  return (
    <div className="px-5 py-4 flex items-center justify-between gap-4">
      <div>
        <div className="text-sm text-[#f1f1f5]">{title}</div>
        <div className="text-xs text-[#6b7280] mt-0.5">{desc}</div>
      </div>
      {control}
    </div>
  );
}

function Switch({ on, onChange }) {
  return (
    <button type="button" onClick={onChange}
      className={"relative w-10 h-[22px] rounded-full transition shrink-0 " + (on ? "bg-[#4F8EF7]" : "bg-[#2a2a3a]")}>
      <span className={"absolute top-[2px] w-[18px] h-[18px] bg-white rounded-full transition-all " + (on ? "left-[20px]" : "left-[2px]")}></span>
    </button>
  );
}

function TemplateModal({ template, groups, onSave, onClose }) {
  const [form, setForm] = useStateT({
    title: template?.title || "",
    group_name: template?.group_name || (groups[0] || "Общие"),
    text: template?.text || "",
  });
  function set(k, v) { setForm(f => ({ ...f, [k]: v })); }
  function submit(e) {
    e.preventDefault();
    if (!form.title.trim() || !form.text.trim()) return;
    onSave({ ...form, id: template?.id });
  }
  return (
    <ModalOverlay onClose={onClose}>
      <div className="bg-[#13131a] border border-[#2a2a3a] rounded-xl p-6 w-full max-w-lg">
        <div className="font-semibold text-[#f1f1f5] mb-4">{template ? "Редактировать шаблон" : "Добавить шаблон"}</div>
        <form onSubmit={submit} className="space-y-4">
          <div>
            <label className="block text-xs text-[#6b7280] mb-1.5">Название</label>
            <input value={form.title} onChange={e => set("title", e.target.value)} required
              placeholder="Занимаюсь решением вопроса"
              className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50 placeholder:text-[#6b7280]" />
          </div>
          <div>
            <label className="block text-xs text-[#6b7280] mb-1.5">Группа</label>
            <input value={form.group_name} onChange={e => set("group_name", e.target.value)}
              list="tpl-groups" placeholder="Общие"
              className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50 placeholder:text-[#6b7280]" />
            <datalist id="tpl-groups">
              {groups.map(g => <option key={g} value={g} />)}
            </datalist>
          </div>
          <div>
            <label className="block text-xs text-[#6b7280] mb-1.5">Текст шаблона</label>
            <textarea value={form.text} onChange={e => set("text", e.target.value)} required rows={4}
              placeholder="Принял вашу заявку. Как только у меня будет решение, вернусь к вам..."
              className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50 leading-relaxed resize-none placeholder:text-[#6b7280]" />
          </div>
          <div className="flex justify-end gap-2 pt-1">
            <button type="button" onClick={onClose}
              className="px-3 py-1.5 rounded-lg text-sm text-[#6b7280] hover:text-[#f1f1f5] hover:bg-[#1a1a24]">Отмена</button>
            <button type="submit"
              className="px-4 py-1.5 rounded-lg text-sm font-medium bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white">Сохранить</button>
          </div>
        </form>
      </div>
    </ModalOverlay>
  );
}

// ── Секция «Папки»: свои разделы списка тикетов ──────────────────────────────
// Папка — ярлык поверх статуса: тикет остаётся в «В работе» или «Ожидании» и
// дополнительно лежит в папке, куда его положил оператор. Папки пер-сервисные.

const FOLDER_EMOJI = ["📁", "🔥", "⭐", "💳", "🐞", "🔒", "📌", "🚚", "🎯", "🧊", "📞", "🧾"];

function FoldersSection({ showToast, service }) {
  const [folders, setFolders] = useStateT(null);
  const [modal, setModal] = useStateT(null);      // {} — новая, объект — правка
  const [confirmDel, setConfirmDel] = useStateT(null);
  const [busy, setBusy] = useStateT(false);

  async function reload() {
    try {
      setFolders(await window.apiFetch("GET", "/api/folders" + svcQuery(service)));
    } catch { setFolders([]); }
  }
  useEffectT(() => { setFolders(null); if (service) reload(); }, [service?.id]);

  async function save(form) {
    try {
      if (form.id) {
        await window.apiFetch("PUT", `/api/folders/${form.id}`, form);
        showToast("Папка обновлена");
      } else {
        await window.apiFetch("POST", "/api/folders" + svcQuery(service), form);
        showToast("Папка создана");
      }
      setModal(null);
      reload();
    } catch (e) { showToast(e?.detail || "Ошибка сохранения"); }
  }

  async function remove(f) {
    try {
      await window.apiFetch("DELETE", `/api/folders/${f.id}`);
      showToast("Папка удалена");
      reload();
    } catch (e) { showToast(e?.detail || "Ошибка удаления"); }
    setConfirmDel(null);
  }

  // Порядок правится стрелками: меняем sort_order соседей местами.
  async function move(index, delta) {
    const next = index + delta;
    if (next < 0 || next >= folders.length) return;
    const a = folders[index], b = folders[next];
    setBusy(true);
    try {
      await window.apiFetch("PUT", `/api/folders/${a.id}`,
        { name: a.name, emoji: a.emoji, color: a.color, sort_order: b.sortOrder });
      await window.apiFetch("PUT", `/api/folders/${b.id}`,
        { name: b.name, emoji: b.emoji, color: b.color, sort_order: a.sortOrder });
      await reload();
    } catch { showToast("Не удалось изменить порядок"); }
    setBusy(false);
  }

  if (folders === null) return <div className="p-6 text-[#6b7280] text-sm">Загрузка...</div>;

  return (
    <div className="max-w-[1100px] mx-auto p-3 sm:p-6 space-y-4 sm:space-y-5">
      <div className="flex items-center justify-between gap-3">
        <div>
          <h1 className="text-xl font-semibold text-[#f1f1f5]">Папки</h1>
          <div className="text-xs text-[#6b7280] mt-0.5">
            Свои разделы в списке тикетов — рядом со статусными
          </div>
        </div>
        <button onClick={() => setModal({})}
          className="shrink-0 px-3 py-2 rounded-lg bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white text-xs font-semibold flex items-center gap-1.5">
          <Icon name="plus" className="w-3.5 h-3.5" strokeWidth={2.5} />
          Добавить папку
        </button>
      </div>

      <ServiceBanner service={service} hint="папки свои у каждого ВПН-а" />

      <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl overflow-hidden divide-y divide-[#2a2a3a]/40">
        {folders.length === 0 && (
          <div className="px-5 py-10 text-center text-xs text-[#6b7280]">
            Папок нет. Тикеты раскладываются по ним вручную — из меню действий над тикетом.
          </div>
        )}
        {folders.map((f, i) => (
          <div key={f.id} className="px-4 py-3 flex items-center gap-3 hover:bg-[#1a1a24]/40 transition">
            <span className="w-9 h-9 shrink-0 rounded-[11px] flex items-center justify-center text-lg"
                  style={{ background: f.color + "22", border: `1px solid ${f.color}55` }}>
              {f.emoji}
            </span>
            <div className="min-w-0 flex-1">
              <div className="text-sm text-[#f1f1f5] truncate">{f.name}</div>
              <div className="text-[11px] text-[#6b7280]">
                {f.openCount > 0 ? `${f.openCount} открытых тикетов` : "пусто"}
              </div>
            </div>
            <div className="flex items-center gap-0.5 shrink-0">
              <button onClick={() => move(i, -1)} disabled={busy || i === 0} aria-label="Выше"
                className="p-1.5 text-[#6b7280] hover:text-[#f1f1f5] hover:bg-[#1a1a24] rounded disabled:opacity-25">↑</button>
              <button onClick={() => move(i, 1)} disabled={busy || i === folders.length - 1} aria-label="Ниже"
                className="p-1.5 text-[#6b7280] hover:text-[#f1f1f5] hover:bg-[#1a1a24] rounded disabled:opacity-25">↓</button>
              <button onClick={() => setModal(f)} aria-label="Изменить"
                className="p-1.5 text-[#6b7280] hover:text-[#7BA8F9] hover:bg-[#4F8EF7]/10 rounded transition"><Icon name="edit" className="w-4 h-4" /></button>
              <button onClick={() => setConfirmDel(f)} aria-label="Удалить"
                className="p-1.5 text-[#6b7280] hover:text-[#ef4444] hover:bg-[#ef4444]/10 rounded transition"><Icon name="trash" className="w-4 h-4" /></button>
            </div>
          </div>
        ))}
      </div>

      {modal && <FolderModal editing={modal.id ? modal : null}
                             onSave={save} onClose={() => setModal(null)} />}

      {confirmDel && (
        <ModalOverlay onClose={() => setConfirmDel(null)}>
          <div className="bg-[#13131a] border border-[#2a2a3a] rounded-xl p-6 w-full max-w-sm">
            <div className="font-semibold text-[#f1f1f5] mb-1">Удалить папку «{confirmDel.name}»?</div>
            <div className="text-sm text-[#6b7280] mb-5">
              Тикеты не пропадут — они просто перестанут быть разложенными.
            </div>
            <div className="flex justify-end gap-2">
              <button onClick={() => setConfirmDel(null)} className="px-3 py-1.5 rounded-lg text-sm text-[#6b7280] hover:text-[#f1f1f5] hover:bg-[#1a1a24]">Отмена</button>
              <button onClick={() => remove(confirmDel)} className="px-3 py-1.5 rounded-lg text-sm font-medium bg-[#ef4444]/20 text-[#ef4444] border border-[#ef4444]/30 hover:bg-[#ef4444]/30">Удалить</button>
            </div>
          </div>
        </ModalOverlay>
      )}
    </div>
  );
}

function FolderModal({ editing, onSave, onClose }) {
  const [name, setName] = useStateT(editing?.name || "");
  const [emoji, setEmoji] = useStateT(editing?.emoji || FOLDER_EMOJI[0]);
  const [color, setColor] = useStateT(editing?.color || SERVICE_COLORS[0]);

  function submit(e) {
    e?.preventDefault();
    if (!name.trim()) return;
    onSave({ id: editing?.id, name: name.trim(), emoji: emoji.trim() || "📁", color });
  }

  return (
    <ModalOverlay onClose={onClose}>
      <form onSubmit={submit} className="bg-[#13131a] border border-[#2a2a3a] rounded-xl w-full max-w-md overflow-hidden">
        <div className="px-5 py-4 border-b border-[#2a2a3a] flex items-center justify-between">
          <div className="font-semibold text-[#f1f1f5]">{editing ? "Редактировать папку" : "Новая папка"}</div>
          <button type="button" onClick={onClose} className="p-1 text-[#6b7280] hover:text-[#f1f1f5] rounded"><Icon name="x" /></button>
        </div>
        <div className="p-5 space-y-4">
          <div className="flex items-center gap-3">
            <span className="w-11 h-11 shrink-0 rounded-xl flex items-center justify-center text-xl"
                  style={{ background: color + "22", border: `1px solid ${color}55` }}>
              {emoji || "📁"}
            </span>
            <div className="flex-1 min-w-0">
              <label className="block text-xs text-[#6b7280] mb-1.5">Название</label>
              <input autoFocus value={name} onChange={(e) => setName(e.target.value)} placeholder="Оплаты"
                className="w-full bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-3 py-2 text-sm text-[#f1f1f5] placeholder:text-[#6b7280] focus:outline-none focus:border-[#4F8EF7]/50" />
            </div>
          </div>
          <div>
            <label className="block text-xs text-[#6b7280] mb-1.5">
              Эмодзи <span className="text-[#3a3a4a]">— или впишите своё</span>
            </label>
            <div className="flex items-center gap-2">
              <input value={emoji} onChange={(e) => setEmoji(e.target.value)} maxLength={4}
                className="w-16 bg-[#0d0d12] border border-[#2a2a3a] rounded-lg px-2 py-2 text-base text-center text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50" />
              <div className="flex flex-wrap gap-1 flex-1">
                {FOLDER_EMOJI.map((e) => (
                  <button key={e} type="button" onClick={() => setEmoji(e)}
                    className={"w-8 h-8 rounded-lg text-base transition " +
                      (emoji === e ? "bg-[#1a1a24] ring-1 ring-[#4F8EF7]/50" : "hover:bg-[#1a1a24]")}>
                    {e}
                  </button>
                ))}
              </div>
            </div>
          </div>
          <div>
            <label className="block text-xs text-[#6b7280] mb-1.5">Цвет</label>
            <div className="flex flex-wrap gap-2">
              {SERVICE_COLORS.map((c) => (
                <button key={c} type="button" onClick={() => setColor(c)}
                  className={"w-7 h-7 rounded-lg transition " + (color === c ? "ring-2 ring-offset-2 ring-offset-[#13131a] ring-white/60" : "")}
                  style={{ background: c }}></button>
              ))}
            </div>
          </div>
        </div>
        <div className="px-5 py-4 border-t border-[#2a2a3a] flex justify-end gap-2">
          <button type="button" onClick={onClose} className="px-3 py-2 rounded-lg text-sm text-[#6b7280] hover:text-[#f1f1f5] hover:bg-[#1a1a24]">Отмена</button>
          <button type="submit" disabled={!name.trim()}
            className="px-4 py-2 rounded-lg bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white text-sm font-semibold disabled:opacity-40">
            {editing ? "Сохранить" : "Создать"}
          </button>
        </div>
      </form>
    </ModalOverlay>
  );
}

function TemplatesSection({ showToast, service }) {
  const [templates, setTemplates] = useStateT(null);
  const [modal, setModal] = useStateT(null);
  const [deleting, setDeleting] = useStateT(null);
  const [selectedGroup, setSelectedGroup] = useStateT(null);
  const [renamingGroup, setRenamingGroup] = useStateT(null);
  const [renameValue, setRenameValue] = useStateT("");
  const [inlineAdding, setInlineAdding] = useStateT(null);
  const [inlineForm, setInlineForm] = useStateT({ title: "", text: "" });
  const [inlineSaving, setInlineSaving] = useStateT(false);

  useEffectT(() => {
    setTemplates(null);
    window.apiFetch("GET", "/api/templates" + svcQuery(service)).then(setTemplates).catch(() => setTemplates([]));
  }, [service?.id]);

  const groups = useMemoT(() => {
    if (!templates) return [];
    return [...new Set(templates.map(t => t.group_name))];
  }, [templates]);

  const grouped = useMemoT(() => {
    if (!templates) return {};
    return templates.reduce((acc, t) => {
      (acc[t.group_name] = acc[t.group_name] || []).push(t);
      return acc;
    }, {});
  }, [templates]);

  const visibleGroups = useMemoT(() => {
    if (!grouped) return [];
    if (selectedGroup === null) return Object.keys(grouped);
    return selectedGroup in grouped ? [selectedGroup] : [];
  }, [grouped, selectedGroup]);

  async function saveTemplate(data) {
    try {
      const method = data.id ? "PUT" : "POST";
      const url = (data.id ? `/api/templates/${data.id}` : "/api/templates") + svcQuery(service);
      const saved = await window.apiFetch(method, url, data);
      setTemplates(prev => data.id
        ? prev.map(t => t.id === data.id ? saved : t)
        : [...prev, saved].sort((a, b) => a.group_name.localeCompare(b.group_name) || a.title.localeCompare(b.title)));
      showToast(data.id ? "Шаблон обновлён" : "Шаблон добавлен");
    } catch { showToast("Ошибка сохранения"); }
    setModal(null);
  }

  async function deleteTemplate(id) {
    setDeleting(id);
    try {
      await window.apiFetch("DELETE", `/api/templates/${id}` + svcQuery(service));
      setTemplates(prev => prev.filter(t => t.id !== id));
      showToast("Шаблон удалён");
    } catch { showToast("Ошибка удаления"); }
    setDeleting(null);
  }

  async function handleRenameGroup(oldName, newName) {
    const trimmed = (newName || "").trim();
    if (!trimmed || trimmed === oldName) { setRenamingGroup(null); return; }
    try {
      await window.apiFetch("PATCH", "/api/templates/group" + svcQuery(service), { old_name: oldName, new_name: trimmed });
      setTemplates(prev => prev.map(t => t.group_name === oldName ? { ...t, group_name: trimmed } : t));
      if (selectedGroup === oldName) setSelectedGroup(trimmed);
      showToast("Группа переименована");
    } catch { showToast("Ошибка переименования"); }
    setRenamingGroup(null);
  }

  async function handleDeleteGroup(name) {
    const items = grouped[name] || [];
    if (!items.length) return;
    try {
      await Promise.all(items.map(t => window.apiFetch("DELETE", `/api/templates/${t.id}` + svcQuery(service))));
      setTemplates(prev => prev.filter(t => t.group_name !== name));
      if (selectedGroup === name) setSelectedGroup(null);
      showToast(`Группа «${name}» удалена`);
    } catch { showToast("Ошибка удаления группы"); }
  }

  async function saveInline(group) {
    if (!inlineForm.title.trim() || !inlineForm.text.trim()) return;
    setInlineSaving(true);
    try {
      const saved = await window.apiFetch("POST", "/api/templates" + svcQuery(service), {
        group_name: group, title: inlineForm.title.trim(), text: inlineForm.text.trim(),
      });
      setTemplates(prev => [...prev, saved].sort((a, b) => a.group_name.localeCompare(b.group_name) || a.title.localeCompare(b.title)));
      setInlineForm({ title: "", text: "" });
      setInlineAdding(null);
      showToast("Шаблон добавлен");
    } catch { showToast("Ошибка сохранения"); }
    setInlineSaving(false);
  }

  if (templates === null) return <div className="p-6 text-[#6b7280] text-sm">Загрузка...</div>;

  return (
    <div className="max-w-[1100px] mx-auto p-3 sm:p-6 space-y-4 sm:space-y-5">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-xl font-semibold text-[#f1f1f5]">Шаблоны сообщений</h1>
          <div className="text-xs text-[#6b7280] mt-0.5">{templates.length} шаблонов · {groups.length} групп</div>
        </div>
        <button onClick={() => setModal({})}
          className="px-3 py-2 rounded-lg bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white text-xs font-semibold flex items-center gap-1.5">
          <Icon name="plus" className="w-3.5 h-3.5" strokeWidth={2.5} />
          Добавить шаблон
        </button>
      </div>

      {groups.length > 0 && (
        <div className="flex flex-wrap gap-2 items-center">
          <button onClick={() => setSelectedGroup(null)}
            className={"px-3 py-1.5 rounded-lg text-xs font-medium transition border " +
              (selectedGroup === null ? "bg-[#4F8EF7]/15 border-[#4F8EF7]/40 text-[#7BA8F9]" : "border-[#2a2a3a] text-[#6b7280] hover:text-[#f1f1f5] hover:bg-[#1a1a24]")}>
            Все <span className="opacity-60 ml-1">{templates.length}</span>
          </button>
          {groups.map(g => (
            <div key={g} className="group/chip relative flex items-center">
              {renamingGroup === g ? (
                <form onSubmit={e => { e.preventDefault(); handleRenameGroup(g, renameValue); }}>
                  <input autoFocus value={renameValue}
                    onChange={e => setRenameValue(e.target.value)}
                    onBlur={() => handleRenameGroup(g, renameValue)}
                    className="px-2.5 py-1.5 rounded-lg text-xs bg-[#0d0d12] border border-[#4F8EF7]/50 text-[#f1f1f5] focus:outline-none w-36" />
                </form>
              ) : (
                <>
                  <button onClick={() => setSelectedGroup(g === selectedGroup ? null : g)}
                    className={"px-3 py-1.5 rounded-lg text-xs font-medium transition border " +
                      (selectedGroup === g ? "bg-[#4F8EF7]/15 border-[#4F8EF7]/40 text-[#7BA8F9]" : "border-[#2a2a3a] text-[#6b7280] hover:text-[#f1f1f5] hover:bg-[#1a1a24]")}>
                    {g} <span className="opacity-60 ml-1">{grouped[g]?.length || 0}</span>
                  </button>
                  <button onClick={() => { setRenamingGroup(g); setRenameValue(g); }}
                    className="opacity-0 group-hover/chip:opacity-100 ml-0.5 p-1 text-[#6b7280] hover:text-[#f1f1f5] transition"
                    title="Переименовать группу">
                    <Icon name="edit" className="w-3 h-3" />
                  </button>
                  <button onClick={() => handleDeleteGroup(g)}
                    className="opacity-0 group-hover/chip:opacity-100 p-1 text-[#6b7280] hover:text-[#ef4444] transition"
                    title="Удалить группу">
                    <Icon name="trash" className="w-3 h-3" />
                  </button>
                </>
              )}
            </div>
          ))}
        </div>
      )}

      {templates.length === 0 && (
        <div className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl p-10 text-center">
          <div className="w-12 h-12 rounded-xl bg-[#4F8EF7]/10 text-[#7BA8F9] flex items-center justify-center mx-auto mb-3">
            <Icon name="template" className="w-6 h-6" />
          </div>
          <div className="text-sm text-[#f1f1f5] font-medium mb-1">Шаблонов пока нет</div>
          <div className="text-xs text-[#6b7280]">Добавьте готовые ответы — операторы смогут вставлять их в один клик</div>
        </div>
      )}

      {visibleGroups.map(group => (
        <div key={group} className="bg-[#13131a] border border-[#2a2a3a]/60 rounded-xl overflow-hidden">
          <div className="px-5 py-2.5 bg-[#1a1a24]/60 border-b border-[#2a2a3a]/60">
            <span className="text-xs font-semibold text-[#6b7280] uppercase tracking-wider">{group}</span>
            <span className="ml-2 text-xs text-[#4a4a5a]">{grouped[group]?.length || 0}</span>
          </div>
          <div className="divide-y divide-[#2a2a3a]/40">
            {(grouped[group] || []).map(t => (
              <div key={t.id} className="px-5 py-3 flex items-start justify-between gap-3 hover:bg-[#1a1a24]/40 transition">
                <div className="min-w-0 flex-1">
                  <div className="text-sm text-[#f1f1f5] font-medium">{t.title}</div>
                  <div className="text-xs text-[#6b7280] mt-0.5 truncate">{t.text}</div>
                </div>
                <div className="flex items-center gap-1 shrink-0">
                  <button onClick={() => setModal({ template: t })}
                    className="p-1.5 text-[#6b7280] hover:text-[#f1f1f5] hover:bg-[#0d0d12] rounded transition">
                    <Icon name="edit" className="w-4 h-4" />
                  </button>
                  <button onClick={() => deleteTemplate(t.id)} disabled={deleting === t.id}
                    className="p-1.5 text-[#6b7280] hover:text-[#ef4444] hover:bg-[#ef4444]/10 rounded transition disabled:opacity-40">
                    <Icon name="trash" className="w-4 h-4" />
                  </button>
                </div>
              </div>
            ))}
            {inlineAdding === group ? (
              <div className="px-5 py-3 bg-[#0d0d12]/60 space-y-2">
                <div className="flex gap-2">
                  <input autoFocus value={inlineForm.title}
                    onChange={e => setInlineForm(f => ({...f, title: e.target.value}))}
                    placeholder="Название шаблона"
                    onKeyDown={e => { if (e.key === 'Escape') { setInlineAdding(null); setInlineForm({title:"",text:""}); } }}
                    className="flex-1 bg-[#13131a] border border-[#2a2a3a] rounded-lg px-2.5 py-1.5 text-xs text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50 placeholder:text-[#6b7280]" />
                  <button onClick={() => saveInline(group)}
                    disabled={!inlineForm.title.trim() || !inlineForm.text.trim() || inlineSaving}
                    className="px-3 py-1.5 rounded-lg bg-[#4F8EF7] hover:bg-[#3d7ce8] text-white text-xs font-semibold disabled:opacity-40 shrink-0">
                    {inlineSaving ? "..." : "Сохранить"}
                  </button>
                  <button onClick={() => { setInlineAdding(null); setInlineForm({title:"",text:""}); }}
                    className="p-1.5 text-[#6b7280] hover:text-[#f1f1f5]">
                    <Icon name="x" className="w-3.5 h-3.5" />
                  </button>
                </div>
                <textarea value={inlineForm.text}
                  onChange={e => setInlineForm(f => ({...f, text: e.target.value}))}
                  placeholder="Текст шаблона... (Ctrl+Enter для сохранения)"
                  rows={2}
                  onKeyDown={e => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); saveInline(group); } }}
                  className="w-full bg-[#13131a] border border-[#2a2a3a] rounded-lg px-2.5 py-1.5 text-xs text-[#f1f1f5] focus:outline-none focus:border-[#4F8EF7]/50 resize-none placeholder:text-[#6b7280]" />
              </div>
            ) : (
              <button onClick={() => { setInlineAdding(group); setInlineForm({title:"",text:""}); }}
                className="w-full px-5 py-2 flex items-center gap-1.5 text-xs text-[#6b7280] hover:text-[#7BA8F9] hover:bg-[#1a1a24] transition">
                <Icon name="plus" className="w-3 h-3" strokeWidth={2.5} />
                Добавить в группу
              </button>
            )}
          </div>
        </div>
      ))}

      {modal !== null && (
        <TemplateModal
          template={modal.template}
          groups={groups}
          onSave={saveTemplate}
          onClose={() => setModal(null)}
        />
      )}
    </div>
  );
}

Object.assign(window, { SettingsScreen });