/* global React, ReactDOM */
(() => {
  const { useState, useEffect, useRef } = React;
  const DEMO_CHANNELS = {
    tg: [
      { id: "city-detail", title: "Город в деталях", username: "city_in_detail" },
      { id: "slow-home", title: "Дом без спешки", username: "slow_home" },
    ],
    max: [
      { id: "city-detail-max", title: "Город в деталях | MAX" },
      { id: "slow-home-max", title: "Дом без спешки | MAX" },
    ],
  };
  const api = window.POSTILO_DEMO_MODE ? async (path, options = {}) => {
    const method = String(options.method || "GET").toUpperCase();
    if (method !== "GET") throw new Error("В демо-режиме изменения не сохраняются.");
    if (path.startsWith("/api/tg_channels")) return DEMO_CHANNELS.tg;
    if (path.startsWith("/api/max_channels")) return DEMO_CHANNELS.max;
    if (path === "/api/mappings") return [{ id: "demo-map", mapping_kind: "tg_to_max", tg_channel_id: "city-detail", max_chat_id: "city-detail-max", source_title: "Город в деталях", target_title: "Город в деталях | MAX" }];
    if (path.startsWith("/api/mappings/")) return { id: "demo-map", is_active: true, repost_delay_seconds: 60, mapping_signature_text: "" };
    return {};
  } : window.postiloRequest;
  const post = (path, body) => api(path, { method: "POST", body: JSON.stringify(body) });
  const errorText = error => error?.message || "Не удалось выполнить действие.";
  function Notice({ error, children }) {
    return children ? <div className={"flow-notice" + (error ? " flow-error" : "")} role={error ? "alert" : "status"}>{children}</div> : null;
  }
  function Field({ label, labelAction, trailing, ...props }) {
    const id = React.useId();
    return <div className="flow-field">
      <div className="flow-field-label"><label htmlFor={id}>{label}</label>{labelAction}</div>
      <span className={"flow-input-wrap" + (trailing ? " has-trailing" : "")}>
        <input id={id} {...props}/>{trailing}
      </span>
    </div>;
  }
  function Action({ busy, children, ...props }) {
    return <button className="flow-primary" {...props} disabled={busy || props.disabled}>{busy ? "Подождите…" : children}</button>;
  }
  function DelaySelector({ value, onChange, disabled = false }) {
    const options = [{ value: 0, label: "Сразу" }, { value: 60, label: "1 минута" }, { value: 300, label: "5 минут" }, { value: 900, label: "15 минут" }];
    return <fieldset className="flow-delay" disabled={disabled}>
      <legend>Задержка перед переносом</legend>
      <div className="flow-delay-options">{options.map(item => <button type="button" key={item.value} className={Number(value) === item.value ? "active" : ""} aria-pressed={Number(value) === item.value} onClick={() => onChange(item.value)}>{item.label}</button>)}</div>
      <p>Задержка даёт время исправить исходный пост до переноса. «Сразу» отправляет публикацию без ожидания.</p>
      {!options.some(item => item.value === Number(value)) && <Field label="Другая задержка, секунд" type="number" min="0" max="86400" step="1" required disabled={disabled} value={value ?? 60} onChange={e => onChange(e.target.value)}/>} 
    </fieldset>;
  }
  function AccountError({ state }) {
    return state.error ? <Notice error>{state.error} <button type="button" className="flow-link" onClick={() => state.refresh().catch(() => {})}>Повторить</button></Notice> : null;
  }

  function ConnectionForm({ platform, onConnected }) {
    const isMax = platform === "max";
    const name = isMax ? "MAX" : "Telegram";
    const [phone, setPhone] = useState("");
    const [code, setCode] = useState("");
    const [password, setPassword] = useState("");
    const [step, setStep] = useState("phone");
    const [busy, setBusy] = useState(false);
    const [error, setError] = useState("");
    const [message, setMessage] = useState("");
    const [resendAt, setResendAt] = useState(0);
    const [expiresAt, setExpiresAt] = useState(0);
    const [now, setNow] = useState(Date.now());
    const mounted = useRef(true);
    useEffect(() => { mounted.current = true; const timer = setInterval(() => setNow(Date.now()), 1000); return () => { mounted.current = false; clearInterval(timer); }; }, []);
    const normalized = phone.replace(/[\s()\-]/g, "");
    const expired = expiresAt > 0 && now >= expiresAt;
    const send = async (resend = false) => {
      if (busy) return;
      if (!/^\+[1-9]\d{9,14}$/.test(normalized)) { setError("Введите номер с кодом страны, например +79991234567."); return; }
      setBusy(true); setError(""); setMessage("");
      try {
        const data = await post(isMax ? (resend ? "/api/auth/max_otp_resend" : "/api/auth/max_phone_otp") : "/api/auth/tg_mtproto_phone", { phone: normalized });
        if (!["code_sent", "code_resent"].includes(data.status)) throw new Error("Сервис не подтвердил отправку кода.");
        if (!mounted.current) return;
        setPhone(data.phone || normalized); setStep("code"); setCode(""); setPassword("");
        setNow(Date.now()); setResendAt(Date.now() + 60000); setExpiresAt(Date.now() + (data.ttl_seconds || 600) * 1000);
        setMessage(isMax ? "Запрос кода принят MAX. Проверьте SMS и приложение MAX." : "Код отправлен в Telegram. Откройте приложение и найдите сообщение о входе.");
      } catch (e) { if (mounted.current) { setError(errorText(e)); if ([404,410].includes(e.status)) setStep("phone"); } }
      finally { if (mounted.current) setBusy(false); }
    };
    const confirm = async e => {
      e.preventDefault();
      if (busy) return;
      if (step === "phone") { await send(); return; }
      if (expired) { setError("Срок действия кода истёк. Запросите новый код."); return; }
      setBusy(true); setError(""); setMessage("");
      try {
        const data = await post(isMax ? "/api/auth/max_otp_confirm" : "/api/auth/tg_mtproto_confirm", { code, ...(step === "password" ? { password } : {}) });
        if (!mounted.current) return;
        if (data.status === "password_required") { setStep("password"); setMessage("В Telegram включён облачный пароль. Введите его ниже."); return; }
        if (!["connected", "logged_in"].includes(data.status)) throw new Error("Подключение ещё не подтверждено. Проверьте статус.");
        await window.postiloAccountChanged();
        if (mounted.current) { setCode(""); setPassword(""); setStep("done"); setMessage(name + " подключён к вашему аккаунту Postilo."); onConnected?.(); }
      } catch (e) { if (mounted.current) { setError(errorText(e)); if (e.status === 410) setStep("phone"); } }
      finally { if (mounted.current) setBusy(false); }
    };
    return <form className="postilo-flow" onSubmit={confirm}>
      {step !== "done" && <p className="flow-muted">{isMax ? "Подключите личный аккаунт MAX с правами администратора в нужных каналах. Создавать MAX-бота, оформлять ИП или организацию не нужно." : "Telegram-аккаунт нужен для чтения архива, больших видео и проверки участников. Для переноса новых публикаций подключите также своего Telegram-бота."}</p>}
      {step === "phone" && <Field label={"Номер телефона " + name} type="tel" autoComplete="tel" placeholder="+79991234567" value={phone} onChange={e => setPhone(e.target.value)} required disabled={busy}/>}
      {(step === "code" || step === "password") && <>
        <p className="flow-muted">Номер: {phone} <button className="flow-link" type="button" disabled={busy} onClick={() => { setStep("phone"); setCode(""); setPassword(""); setError(""); setMessage(""); }}>Изменить</button></p>
        {step === "code" ? <Field label={isMax ? "Код MAX — 6 цифр" : "Код из Telegram"} inputMode="numeric" autoComplete="one-time-code" pattern={isMax ? "[0-9]{6}" : "[0-9]{4,8}"} maxLength={isMax ? 6 : 8} value={code} onChange={e => setCode(e.target.value.replace(/\D/g, ""))} required disabled={busy}/>
          : <Field label="Облачный пароль Telegram" type="password" autoComplete="current-password" value={password} onChange={e => setPassword(e.target.value)} required disabled={busy}/>}
        <button className="flow-link" type="button" disabled={busy || now < resendAt} onClick={() => send(isMax && !expired)}>{now < resendAt ? "Повторный код через " + Math.ceil((resendAt - now) / 1000) + " с" : "Отправить код ещё раз"}</button>
        {expired && <Notice error>Код истёк. Запросите новый.</Notice>}
      </>}
      <Notice error>{error}</Notice><Notice>{message}</Notice>
      {step !== "done" && <Action busy={busy} disabled={step !== "phone" && (expired || (step === "password" ? !password : !(isMax ? /^\d{6}$/.test(code) : /^\d{4,8}$/.test(code))))}>{step === "phone" ? "Получить код" : "Подключить " + name}</Action>}
      <p className="flow-caption">Код и пароль не сохраняются. После подтверждения зашифрованная сессия хранится на сервере Postilo для работы подключённых каналов.</p>
    </form>;
  }

  function BotForm({ onConnected, compact = false }) {
    const state = window.usePostiloAccount();
    const [token, setToken] = useState("");
    const [busy, setBusy] = useState(false);
    const [error, setError] = useState("");
    const [saved, setSaved] = useState("");
    async function submit(e) {
      e.preventDefault(); if (busy) return;
      if (!/^\d{6,12}:[A-Za-z0-9_-]{30,}$/.test(token.trim())) { setError("Проверьте токен: скопируйте его целиком из BotFather."); return; }
      setBusy(true); setError("");
      try {
        const data = await post("/api/tg_bot_token/verify", { token: token.trim() });
        if (!data.ok) throw new Error("Telegram не подтвердил бота.");
        setToken(""); setSaved("Подключён бот @" + data.bot_username);
        await window.postiloAccountChanged(); onConnected?.();
      } catch (e) { setError(errorText(e)); } finally { setBusy(false); }
    }
    return <div className="postilo-flow">
      <AccountError state={state}/>
      {state.user?.tg_bot_connected && !compact && <Notice>Ваш Telegram-бот: {state.user.tg_bot_username ? <a href={"https://t.me/" + state.user.tg_bot_username} target="_blank" rel="noopener noreferrer">@{state.user.tg_bot_username}</a> : "подключён"}. Откройте его в Telegram и нажмите «Запустить», чтобы он мог отправлять вам уведомления. Для другого бота можно заменить токен ниже.</Notice>}
      {compact ? (
        <p className="flow-muted" style={{ margin: "0 0 14px" }}>
          {state.user?.tg_bot_connected
            ? <>Вставьте новый токен, только если хотите заменить подключённого бота. Новый бот должен быть создан через <a href="https://t.me/BotFather" target="_blank" rel="noopener noreferrer">@BotFather</a>.</>
            : <>Создайте бота через <a href="https://t.me/BotFather" target="_blank" rel="noopener noreferrer">@BotFather</a>, скопируйте токен и вставьте его ниже.</>}
        </p>
      ) : (
        <ol className="flow-instructions">
          <li>Откройте <a href="https://t.me/BotFather" target="_blank" rel="noopener noreferrer">@BotFather</a> в Telegram и отправьте <code>/newbot</code>.</li>
          <li>Задайте название и username бота с окончанием <code>bot</code>. Скопируйте выданный токен.</li>
          <li>Вставьте токен ниже. Postilo проверит бота и привяжет его только к вашему аккаунту.</li>
          <li>Добавьте именно этого бота администратором нужных Telegram-каналов. Для канала-получателя разрешите публикацию сообщений; для переноса изменений — их редактирование.</li>
        </ol>
      )}
      <form onSubmit={submit}>
        <Field label="Токен вашего Telegram-бота" type="password" autoComplete="off" placeholder="123456789:ABC…" value={token} onChange={e => setToken(e.target.value)} required disabled={busy}/>
        <Notice error>{error}</Notice><Notice>{saved}</Notice>
        <Action busy={busy} disabled={!token.trim()}>Проверить и подключить бота</Action>
      </form>
      <p className="flow-caption">Токен хранится зашифрованным. Не подключайте этого же бота одновременно к другому сервису.</p>
    </div>;
  }

  function MappingForm({ onCreated, initialSource, onFirstDelivered }) {
    const state = window.usePostiloAccount();
    const [kind, setKind] = useState(initialSource?.platform === "max" ? "max_to_tg" : "tg_to_max");
    const [channels, setChannels] = useState({ tg: [], max: [] });
    const [source, setSource] = useState("");
    const [target, setTarget] = useState("");
    const [busy, setBusy] = useState(false);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState("");
    const [created, setCreated] = useState(null);
    const [delay, setDelay] = useState(60);
    const [sourcePlatform, targetPlatform] = kind.split("_to_");
    const user = state.user;
    const needsTG = kind.includes("tg");
    const needsMAX = kind.includes("max");
    const ready = !!user && (!needsTG || user.tg_bot_connected) && (!needsMAX || user.max_connected);
    const refresh = async () => {
      setLoading(true); setError("");
      try {
        const results = await Promise.allSettled(["tg", "max"].map(platform => api("/api/" + platform + "_channels?fast=1&refresh=1")));
        const next = { tg: [], max: [] }; const errors = [];
        results.forEach((r, i) => { const platform = i === 0 ? "tg" : "max"; if (r.status === "fulfilled") next[platform] = Array.isArray(r.value) ? r.value : []; else errors.push((i === 0 ? "Telegram: " : "MAX: ") + errorText(r.reason)); });
        setChannels(next); setSource(initialSource?.platform === sourcePlatform ? String(initialSource.id) : ""); setTarget(""); if (errors.length) setError(errors.join(" "));
      } finally { setLoading(false); }
    };
    useEffect(() => { if (user) refresh(); }, [user?.id, user?.tg_bot_connected, user?.max_connected]);
    const create = async e => {
      e.preventDefault(); if (busy || !ready || !source || !target) return;
      setBusy(true); setError("");
      try {
        const result = await post("/api/mappings", { mapping_kind: kind, source_channel_id: source, target_channel_id: target, repost_delay_seconds: delay });
        if (result.status !== "ok") throw new Error("Связка не сохранена.");
        const saved = await api("/api/mappings");
        const match = saved.find(m => m.mapping_kind === kind && String(m.tg_channel_id) === source && String(m.max_chat_id) === target);
        if (!match) throw new Error("Не удалось подтвердить сохранение связки. Обновите список перед повтором.");
        const sourceItem = channels[sourcePlatform].find(c => String(c.id) === source);
        const targetItem = channels[targetPlatform].find(c => String(c.id) === target);
        setCreated({
          id: Number(result.mapping_id || match.id),
          sourceTitle: sourceItem?.title || sourceItem?.name || sourceItem?.username || "исходном канале",
          targetTitle: targetItem?.title || targetItem?.name || targetItem?.username || "канале-получателе",
        });
        onCreated?.(saved);
      } catch (e) { setError(errorText(e)); } finally { setBusy(false); }
    };
    const select = (title, platform, value, setValue) => <label className="flow-field"><span>{title}</span><select value={value} onChange={e => setValue(e.target.value)} disabled={busy || loading || created} required>
      <option value="">Выберите канал {platform === "tg" ? "Telegram" : "MAX"}</option>
      {channels[platform].filter(c => title === "Откуда переносить" || sourcePlatform !== targetPlatform || String(c.id) !== source).map(c => <option key={c.id} value={String(c.id)}>{c.title || c.name || c.username || "Канал без названия"}</option>)}
    </select></label>;
    return <form className="postilo-flow" onSubmit={create}>
      <p className="flow-muted">Связка — правило автоматического переноса новых постов из одного канала в другой. Старые публикации автоматически не переносятся.</p>
      <label className="flow-field"><span>Направление</span><select value={kind} disabled={busy || created} onChange={e => { setKind(e.target.value); setSource(""); setTarget(""); }}>
        <option value="tg_to_max">Telegram → MAX</option><option value="tg_to_tg">Telegram → Telegram</option><option value="max_to_max">MAX → MAX</option><option value="max_to_tg">MAX → Telegram</option>
      </select></label>
      {!ready && <Notice>Для этого направления сначала подключите {needsTG && !user?.tg_bot_connected ? "своего Telegram-бота" : ""}{needsTG && !user?.tg_bot_connected && needsMAX && !user?.max_connected ? " и " : ""}{needsMAX && !user?.max_connected ? "MAX-аккаунт" : ""}.</Notice>}
      {select("Откуда переносить", sourcePlatform, source, setSource)}
      {select("Куда публиковать", targetPlatform, target, setTarget)}
      {!created && <DelaySelector value={delay} onChange={setDelay} disabled={busy || loading}/>} 
      <button type="button" className="flow-link" onClick={refresh} disabled={loading || busy || created}>{loading ? "Ищем ваши каналы…" : "Обновить список каналов"}</button>
      {!loading && (!channels[sourcePlatform].length || !channels[targetPlatform].length) && <Notice>Канала нет в списке? В Telegram добавьте подключённого бота администратором. В MAX проверьте права подключённого аккаунта. Затем обновите список. Каналы и подключения других пользователей здесь не отображаются.</Notice>}
      <Notice error>{error}</Notice>
      {created ? <FirstDeliveryCheck mapping={created} delay={delay} onDelivered={onFirstDelivered}/> : <>
        <p className="flow-caption">Перенос включится для новых постов. Для архива подключите Telegram-аккаунт и запустите перенос старых публикаций отдельно.</p>
        <Action busy={busy} disabled={!ready || !source || !target || loading || (sourcePlatform === targetPlatform && source === target)}>Создать связку и включить перенос</Action>
      </>}
    </form>;
  }

  function FirstDeliveryCheck({ mapping, delay, onDelivered }) {
    const [result, setResult] = useState({ status: "waiting" });
    const [busy, setBusy] = useState(false);
    const [error, setError] = useState("");
    const startedAt = useRef(Date.now());
    const reported = useRef(false);
    const check = async (silent = false) => {
      if (!mapping?.id || busy) return;
      if (!silent) setBusy(true);
      setError("");
      try {
        const next = await api(`/api/mappings/${mapping.id}/first_delivery`);
        setResult(next);
        if (next.status === "delivered" && !reported.current) { reported.current = true; onDelivered?.(mapping.id); }
      }
      catch (e) { setError(errorText(e)); }
      finally { if (!silent) setBusy(false); }
    };
    useEffect(() => {
      if (!mapping?.id) return undefined;
      startedAt.current = Date.now(); reported.current = false;
      const deadlineMs = Math.max(120000, Number(delay || mapping.repost_delay_seconds || 0) * 1000 + 300000);
      check(true);
      const timer = setInterval(() => {
        if (Date.now() - startedAt.current > deadlineMs) { clearInterval(timer); return; }
        setResult(current => { if (current.status === "delivered") clearInterval(timer); return current; });
        check(true);
      }, 5000);
      return () => clearInterval(timer);
    }, [mapping?.id]);
    if (result.status === "delivered") return <div className="flow-first-delivery success" role="status">
      <strong>Первая доставка подтверждена</strong>
      <span>Postilo перенёс публикацию из «{result.source_title || mapping.sourceTitle}» в «{result.target_title || mapping.targetTitle}».</span>
      <div className="flow-first-actions">{result.target_url && <a href={result.target_url} target="_blank" rel="noopener noreferrer">Открыть публикацию</a>}<a href={window.postiloCabinetHref("/logs")}>Журнал репостов</a></div>
    </div>;
    return <div className={"flow-first-delivery" + (result.status === "error" || error ? " error" : "")} role={result.status === "error" || error ? "alert" : "status"}>
      <strong>{result.status === "error" || error ? "Первая доставка не прошла" : "Проверим первую реальную публикацию"}</strong>
      {result.status === "error" || error
        ? <span>{error || result.error || "Проверьте права каналов и повторите публикацию."}</span>
        : <span>Опубликуйте короткий тестовый пост в «{mapping.sourceTitle}». Postilo проверит доставку в «{mapping.targetTitle}»{delay ? ` после задержки ${delay === 60 ? "1 минута" : Math.round(delay / 60) + " минут"}` : " без задержки"}.</span>}
      <div className="flow-first-actions"><button type="button" className="flow-secondary" disabled={busy} onClick={() => check()}>{busy ? "Проверяем…" : "Проверить доставку"}</button><a href={window.postiloCabinetHref("/logs")}>Открыть журнал</a></div>
    </div>;
  }

  function SetupPanel({ compact = false }) {
    const state = window.usePostiloAccount();
    const [section, setSection] = useState("bot");
    const [mappings, setMappings] = useState(null);
    const [mappingError, setMappingError] = useState("");
    const [deliveredMappingIds, setDeliveredMappingIds] = useState(new Set());
    const user = state.user;
    const rememberDelivered = id => setDeliveredMappingIds(current => new Set([...current, Number(id)]));
    useEffect(() => {
      if (!user) return;
      let active = true;
      api("/api/mappings").then(async saved => {
        if (!active) return;
        setMappings(saved);
        const checks = await Promise.allSettled(saved.map(item => api(`/api/mappings/${item.id}/first_delivery`)));
        if (active) setDeliveredMappingIds(new Set(saved.filter((_, index) => checks[index].status === "fulfilled" && checks[index].value.status === "delivered").map(item => Number(item.id))));
      }).catch(e => active && setMappingError(errorText(e)));
      return () => { active = false; };
    }, [user?.id]);
    const hasFirstDelivery = deliveredMappingIds.size > 0;
    const steps = [
      ["bot", "1. Telegram-бот", !!user?.tg_bot_connected],
      ["tg", "2. Telegram-аккаунт", !!user?.tg_account_connected],
      ["max", "3. MAX-аккаунт", !!user?.max_connected],
      ["mapping", "4. Первая доставка", hasFirstDelivery]
    ];
    return <div className="postilo-flow">
      {!compact && <><h1>Настроим ваши каналы</h1><p className="flow-muted">Для Telegram → MAX подключите своего Telegram-бота и личный MAX-аккаунт, затем выберите каналы. MAX-бот, ИП или организация не нужны. Telegram-аккаунт дополнительно открывает перенос архива и больших видео.</p></>}
      <AccountError state={state}/><Notice error>{mappingError}</Notice>
      {state.loading ? <p role="status">Загружаем ваши подключения…</p> : !user ? null : <>
        <nav className="flow-steps" aria-label="Шаги подключения">{steps.map(([id, title, done]) => <button type="button" key={id} aria-current={section === id ? "step" : undefined} className={section === id ? "active" : ""} onClick={() => setSection(id)}>{done ? "✓ " : ""}{title}{id === "tg" && <small>необязательно · архив и видео</small>}{id === "max" && <small>без MAX-бота и ИП</small>}</button>)}</nav>
        <section aria-label={steps.find(s => s[0] === section)[1]}>
          <h2>{steps.find(s => s[0] === section)[1]}</h2>
          {section === "bot" && <BotForm/>}
          {section === "tg" && (user.tg_account_connected ? <Notice>Telegram подключён{user.tg_account_username ? ": @" + user.tg_account_username : ""}. Заменить аккаунт можно в <a href={window.postiloCabinetHref("/settings#connect-tg")}>настройках</a>.</Notice> : <ConnectionForm platform="tg"/>)}
          {section === "max" && (user.max_connected ? <Notice>MAX подключён: {user.max_phone}. Заменить аккаунт можно в <a href={window.postiloCabinetHref("/settings#connect-max")}>настройках</a>.</Notice> : <ConnectionForm platform="max"/>)}
          {section === "mapping" && (!mappings?.length
            ? <MappingForm onCreated={setMappings} onFirstDelivered={rememberDelivered}/>
            : hasFirstDelivery
              ? <Notice>Первая реальная доставка подтверждена. Postilo готов переносить новые публикации автоматически.</Notice>
              : <><Notice>Связка сохранена, но настройка завершится только после первой реальной доставки.</Notice><FirstDeliveryCheck mapping={{ ...mappings[mappings.length - 1], sourceTitle: mappings[mappings.length - 1].source_title || "исходном канале", targetTitle: mappings[mappings.length - 1].target_title || "канале-получателе" }} delay={mappings[mappings.length - 1].repost_delay_seconds} onDelivered={rememberDelivered}/></>)}
        </section>
        <div className="flow-actions">
          {section !== "mapping" && <button type="button" className="flow-primary" onClick={() => setSection(steps[steps.findIndex(s => s[0] === section) + 1][0])}>Следующий шаг →</button>}
          <a href={window.postiloCabinetHref("/channels")}>{hasFirstDelivery ? "Перейти к каналам" : "Продолжить позже"}</a>
        </div>
        {mappings?.length > 0 && <Notice>Сохранённых связок: {mappings.length}. Результат переноса смотрите в <a href={window.POSTILO_DEMO_MODE ? "/demo/channels#recent-reposts" : "/logs"}>журнале репостов</a>. Наличие связки не заменяет проверку первой реальной публикации.</Notice>}
      </>}
    </div>;
  }
  function MappingEditor({ mappingId, onSaved }) {
    const [value, setValue] = useState(null);
    const [busy, setBusy] = useState(false);
    const [error, setError] = useState("");
    const [confirmDelete, setConfirmDelete] = useState(false);
    useEffect(() => { api("/api/mappings/" + mappingId).then(setValue).catch(e => setError(errorText(e))); }, [mappingId]);
    const save = async e => {
      e.preventDefault(); if (!value || busy) return;
      setBusy(true); setError("");
      try {
        await api("/api/mappings/" + mappingId, { method: "PATCH", body: JSON.stringify({
          is_active: value.is_active ? 1 : 0, repost_delay_seconds: Number(value.repost_delay_seconds),
          mapping_signature_text: value.mapping_signature_text || "", enable_repost_signature: value.mapping_signature_text?.trim() ? 1 : 0
        }) });
        onSaved?.();
      } catch (e) { setError(errorText(e)); } finally { setBusy(false); }
    };
    const remove = async () => {
      setBusy(true); setError("");
      try { await api("/api/mappings/" + mappingId, { method: "DELETE" }); onSaved?.(); }
      catch (e) { setError(errorText(e)); } finally { setBusy(false); }
    };
    return <form className="postilo-flow" onSubmit={save}>
      <Notice error>{error}</Notice>
      {!value ? <p role="status">{error ? "Настройки не загружены." : "Загружаем настройки связки…"}</p> : <>
        <p>{value.source_title || "Исходный канал"} → {value.target_title || "Целевой канал"}</p>
        <DelaySelector value={value.repost_delay_seconds ?? 60} disabled={busy} onChange={next => setValue({ ...value, repost_delay_seconds: next })}/>
        <label className="flow-field"><span>Подпись к постам</span><textarea style={{ width: "100%", minHeight: 90, border: "1px solid var(--input-border)", borderRadius: 6, padding: 12, font: "inherit", resize: "vertical" }} value={value.mapping_signature_text || ""} disabled={busy} onChange={e => setValue({ ...value, mapping_signature_text: e.target.value })}/></label>
        <label className="flow-consent"><input type="checkbox" checked={!value.is_active} disabled={busy} onChange={e => setValue({ ...value, is_active: !e.target.checked })}/><span>Приостановить автоматический перенос новых постов</span></label>
        <Action busy={busy}>Сохранить настройки</Action>
        <div className="flow-footer">{confirmDelete ? <><p>Удалить это правило переноса? Уже опубликованные посты останутся в каналах.</p><button className="flow-secondary" type="button" disabled={busy} onClick={remove}>Да, удалить связку</button><button className="flow-link" type="button" onClick={() => setConfirmDelete(false)}>Отмена</button></> : <button className="flow-link" type="button" disabled={busy} onClick={() => setConfirmDelete(true)}>Удалить связку…</button>}</div>
      </>}
    </form>;
  }
  function OnboardingPage() {
    return <main className="flow-shell"><div className="flow-card flow-wide"><Brand/><SetupPanel/></div></main>;
  }
  function Brand() { return <a href="/" className="flow-brand"><window.PostiloMark size={36}/><span>Postilo</span></a>; }

  async function finishAuth(data, registration = false) {
    if (!data.api_key) throw new Error("Сервер не подтвердил вход.");
    localStorage.setItem("api_key", data.api_key);
    localStorage.setItem("username", data.username || "");
    if (data.email) localStorage.setItem("email", data.email);
    const next = new URLSearchParams(location.search).get("next");
    if (next && /^\/(?!\/)/.test(next) && !/[\\\r\n]/.test(next) && !/^\/(login|register|forgot)(?:[/?#]|$)/.test(next)) { location.assign(next); return; }
    if (registration) { location.assign("/onboarding"); return; }
    const mappings = await api("/api/mappings");
    const deliveries = await Promise.allSettled(mappings.map(item => api(`/api/mappings/${item.id}/first_delivery`)));
    const onboardingComplete = deliveries.some(result => result.status === "fulfilled" && result.value.status === "delivered");
    location.assign(onboardingComplete ? "/channels" : "/onboarding");
  }

  function SocialAuth({ registration, agreed }) {
    const [error, setError] = useState("");
    const [busy, setBusy] = useState(false);
    const [telegram, setTelegram] = useState(null);
    const [providers, setProviders] = useState(null);
    useEffect(() => { api("/api/auth/providers").then(setProviders).catch(e => setError(errorText(e))); }, []);
    useEffect(() => {
      if (!telegram) return;
      let stopped = false; let timer;
      const poll = async () => {
        try {
          const data = await api("/api/auth/tg_bot_status?token=" + encodeURIComponent(telegram.token));
          if (stopped) return;
          if (data.status === "ready") { await finishAuth(data, registration); return; }
          if (data.status !== "pending") throw new Error("Вход завершён или время ожидания истекло. Начните заново.");
          timer = setTimeout(poll, 2500);
        } catch (e) { if (!stopped) { setError(errorText(e)); setTelegram(null); } }
      };
      timer = setTimeout(poll, 2500);
      return () => { stopped = true; clearTimeout(timer); };
    }, [telegram]);
    const allowed = !registration || agreed;
    const startTelegram = async () => {
      setBusy(true); setError("");
      try { setTelegram(await api("/api/auth/tg_bot_start")); } catch (e) { setError(errorText(e)); } finally { setBusy(false); }
    };
    return <div className="postilo-flow auth-social">
      <div className="auth-divider"><span>или продолжите через</span></div>
      <div className="flow-social">
        <button type="button" className="flow-secondary auth-provider" disabled={!allowed || !providers?.google} onClick={() => location.assign("/api/auth/google_oauth/start")}><span className="auth-provider-google" aria-hidden="true">G</span>Google</button>
        <button type="button" className="flow-secondary auth-provider" disabled={!allowed || !providers?.telegram || busy || !!telegram} onClick={startTelegram}><window.PlatformGlyph platform="tg" size={21}/>Telegram</button>
      </div>
      {registration && !agreed && <p className="flow-caption">Сначала ознакомьтесь с условиями и отметьте согласие.</p>}
      {providers && (!providers.google || !providers.telegram) && <p className="flow-caption">Недоступный способ входа ещё не настроен. Используйте email.</p>}
      {telegram && <Notice><a href={telegram.deep_link} target="_blank" rel="noopener noreferrer">Открыть бота @{telegram.bot_username} в Telegram</a><p>Нажмите «Запустить» в боте, затем вернитесь сюда. Ждём подтверждение…</p><button type="button" className="flow-link" onClick={() => setTelegram(null)}>Отменить вход</button></Notice>}
      <Notice error>{error}</Notice>
    </div>;
  }
  function AuthPage({ mode }) {
    const registration = mode === "register";
    const recovery = mode === "forgot";
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [confirm, setConfirm] = useState("");
    const [agreed, setAgreed] = useState(false);
    const [show, setShow] = useState(false);
    const [busy, setBusy] = useState(false);
    const [error, setError] = useState("");
    const [message, setMessage] = useState("");
    const [done, setDone] = useState(false);
    const token = useRef(new URLSearchParams(location.hash.slice(1)).get("token") || "").current;
    useEffect(() => { if (recovery && token) history.replaceState(null, "", location.pathname); }, []);
    const submit = async e => {
      e.preventDefault(); if (busy) return; setError(""); setMessage("");
      if ((registration || (recovery && token)) && password !== confirm) { setError("Пароли не совпадают."); return; }
      if (registration && !agreed) { setError("Для регистрации необходимо согласие с условиями."); return; }
      setBusy(true);
      try {
        if (recovery) {
          if (token) { await post("/api/auth/password_reset/confirm", { token, password }); setDone(true); setPassword(""); setConfirm(""); setMessage("Пароль изменён. Войдите с новым паролем."); }
          else { const data = await post("/api/auth/password_reset/request", { email }); setMessage(data.message); }
        } else {
          const data = registration
            ? await post("/api/auth/email_signup", { email, password })
            : await post("/api/auth/email_login", { email, password });
          await finishAuth(data, registration);
        }
      } catch (e) { setError(errorText(e)); } finally { setBusy(false); }
    };
    const title = registration ? "Создать аккаунт" : recovery ? (token ? "Новый пароль" : "Восстановить пароль") : "С возвращением";
    const subtitle = registration
      ? "Создайте кабинет — подключение каналов займёт несколько минут."
      : recovery
        ? "Укажите email, и мы поможем восстановить доступ к Postilo."
        : "Войдите, чтобы управлять каналами и публикациями.";
    const kicker = registration ? "Новый аккаунт" : recovery ? "Восстановление доступа" : "Вход в кабинет";
    const togglePassword = <button type="button" className="flow-password-toggle" aria-label={show ? "Скрыть пароль" : "Показать пароль"} aria-pressed={show} onClick={() => setShow(!show)}><window.TIP n="eye" size={16}/>{show ? "Скрыть" : "Показать"}</button>;
    return <main className="flow-shell auth-shell"><section className="flow-card auth-card">
      <aside className="auth-aside">
        <Brand/>
        <div className="auth-aside-body">
          <p className="auth-eyebrow">Telegram и MAX — в одном окне</p>
          <h2>Публикуйте без ручного копирования</h2>
          <p>Связывайте каналы, планируйте публикации и следите за статистикой в одном кабинете.</p>
          <div className="auth-route" aria-label="Postilo связывает Telegram и MAX">
            <div className="auth-route-node auth-route-tg"><span><window.PlatformGlyph platform="tg" size={24}/></span><strong>Telegram</strong></div>
            <span className="auth-route-line" aria-hidden="true"></span>
            <div className="auth-route-node auth-route-postilo"><span aria-hidden="true">P</span><strong>Postilo</strong></div>
            <span className="auth-route-line" aria-hidden="true"></span>
            <div className="auth-route-node auth-route-max"><span><window.PlatformGlyph platform="max" size={24}/></span><strong>MAX</strong></div>
          </div>
          <p className="auth-trust"><span aria-hidden="true"></span>Автопубликация работает, даже когда вы офлайн</p>
        </div>
      </aside>
      <div className="auth-main">
        <div className="auth-heading"><p className="auth-kicker">{kicker}</p><h1>{title}</h1><p>{subtitle}</p></div>
        {!done && <form className="postilo-flow auth-form" onSubmit={submit}>
          {(!recovery || !token) && <Field label="Email" name="email" type="email" autoComplete="email" placeholder="name@example.com" value={email} onChange={e => setEmail(e.target.value)} required disabled={busy}/>}
          {(!recovery || token) && <Field label={recovery ? "Новый пароль" : "Пароль"} labelAction={!registration && !recovery ? <a className="flow-label-link" href="/forgot">Забыли пароль?</a> : null} trailing={togglePassword} name="password" type={show ? "text" : "password"} minLength={registration || recovery ? 8 : undefined} autoComplete={registration || recovery ? "new-password" : "current-password"} value={password} onChange={e => setPassword(e.target.value)} required disabled={busy}/>}
          {(registration || (recovery && token)) && <><p className="flow-caption auth-password-hint">Не менее 8 символов. Используйте уникальный пароль.</p><Field label="Повторите пароль" name="password-confirm" type={show ? "text" : "password"} minLength={8} autoComplete="new-password" value={confirm} onChange={e => setConfirm(e.target.value)} required disabled={busy}/></>}
          {registration && <label className="flow-consent"><input type="checkbox" checked={agreed} onChange={e => setAgreed(e.target.checked)} required/><span>Принимаю <a href="/terms" target="_blank" rel="noopener noreferrer">условия использования</a> и <a href="/privacy" target="_blank" rel="noopener noreferrer">политику конфиденциальности</a>.</span></label>}
          <Notice error>{error}</Notice><Notice>{message}</Notice>
          <Action busy={busy}>{registration ? "Создать аккаунт" : recovery ? token ? "Сохранить новый пароль" : "Отправить ссылку" : "Войти в Postilo"}</Action>
        </form>}
        {done && <Notice>{message}</Notice>}
        {!recovery && <SocialAuth registration={registration} agreed={agreed}/>}
        <div className="flow-footer auth-footer">{registration || recovery ? <><span>{registration ? "Уже есть аккаунт?" : "Вспомнили пароль?"}</span><a href="/login">Войти</a></> : <><span>Впервые в Postilo?</span><a href="/register">Создать аккаунт</a></>}</div>
      </div>
    </section></main>;
  }
  Object.assign(window, { PostiloConnectionForm: ConnectionForm, PostiloBotForm: BotForm, PostiloMappingForm: MappingForm, PostiloMappingEditor: MappingEditor, PostiloSetupPanel: SetupPanel, PostiloOnboardingPage: OnboardingPage, PostiloAuthPage: AuthPage });
})();