/**
 * @file SmsCampaignPanel.jsx
 * @description SMS Campaign management for mega_admin.
 *   Campaign selector cards + settings + log table + "Проверить снова" button
 */
import React, { useState, useEffect, useCallback, useRef } from "react";
import { useNavigate } from "react-router-dom";
import { Panel } from "../UI/Panel";
import { Badge } from "../UI/Badge";
import { supabase } from "../../supabaseClient";
import { SmsCampaignStats } from "./SmsCampaignStats";
import { SmsCityProfilesPanel } from "./SmsCityProfilesPanel";
import { resolveSmsBalance } from "../../services/smsBalance";

// ── Campaigns ───────────────────────────────────────────────────────────────
const CAMPAIGNS = [
  { key: "first_sms",      label: "Первая отправка",    icon: "📤", desc: "Первое SMS клиенту: ссылка на согласование доставки" },
  { key: "second_sms",     label: "Второе сообщение",   icon: "📨", desc: "Повторное SMS через 3ч, если клиент не согласовал" },
  { key: "manual",         label: "Ручное управление",  icon: "🔧", desc: "Переход к ручному согласованию" },
  { key: "paid_storage",   label: "Платное хранение",   icon: "📦", desc: "Уведомление о платном хранении" },
];

const HAS_SETTINGS = ["first_sms", "second_sms", "manual", "paid_storage"];

// ── SMS text templates (доставка / самовывоз) ────────────────────────────────
const SMS_LINK_PREVIEW = "https://dost.supersamsev.ru/d/XXXXXX";
// Образцы значений для предпросмотра (как будет выглядеть SMS у клиента)
const SMS_PREVIEW_VALUES = [
  ["{номер_доставки}", "010796"], ["{номер}", "010796"], ["{order}", "010796"],
  ["{код_выдачи}", "7598"], ["{код}", "7598"], ["{code}", "7598"],
  ["{ссылка}", SMS_LINK_PREVIEW], ["{link}", SMS_LINK_PREVIEW],
];

const smsPreviewText = (template) => {
  let text = (template || "").trim();
  SMS_PREVIEW_VALUES.forEach(([token, value]) => {
    text = text.split(token).join(value);
  });
  return text;
};

const renderSmsPreview = (template, emptyLabel) => smsPreviewText(template) || emptyLabel;

// ── Days of week ─────────────────────────────────────────────────────────────
const DAYS = [
  { num: 1, short: "Пн" },
  { num: 2, short: "Вт" },
  { num: 3, short: "Ср" },
  { num: 4, short: "Чт" },
  { num: 5, short: "Пт" },
  { num: 6, short: "Сб" },
  { num: 7, short: "Вс" },
];

// ── Status labels ────────────────────────────────────────────────────────────
const STATUS_LABELS = {
  sent: "Отправлено",
  checking: "Проверяется",
  delivered: "Доставлено",
  send_failed: "Ошибка отправки",
  error: "Ошибка доставки",
  expired: "Истёк срок",
  limit_exceeded: "Лимит превышен",
  manual_override: "Ручной режим",
};

const STATUS_TONES = {
  sent: "info",
  checking: "neutral",
  delivered: "accent",
  send_failed: "danger",
  error: "danger",
  expired: "warning",
  limit_exceeded: "danger",
  manual_override: "warning",
};

// ── SMS code labels ──────────────────────────────────────────────────────────
const SMS_CODE_LABELS = {
  "100": "В очереди", "101": "Оператору", "102": "В пути",
  "103": "Доставлено", "104": "Истёкло время", "105": "Удалено оператором",
  "106": "Сбой телефона", "107": "Неизвестная причина", "108": "Отклонено",
  "130": "Лимит на номер/день", "131": "Лимит одинаковых/мин",
  "132": "Лимит одинаковых/день", "200": "Неправильный api_id",
  "201": "Недостаточно средств", "202": "Неправильный получатель",
  "230": "Общий лимит/день", "231": "Лимит одинаковых/мин",
  "232": "Лимит одинаковых/день",
};

// ── Helpers ──────────────────────────────────────────────────────────────────
const fmtTime = (ts) => {
  if (!ts) return "—";
  try {
    return new Date(ts).toLocaleString("ru-RU", {
      day: "2-digit", month: "2-digit", year: "2-digit",
      hour: "2-digit", minute: "2-digit",
    });
  } catch { return ts; }
};

const fmtPhone = (phone) => {
  if (!phone) return "—";
  const digits = String(phone).replace(/\D/g, "");
  if (digits.length === 11 && digits.startsWith("7")) {
    return `+7 (${digits.slice(1, 4)}) ${digits.slice(4, 7)}-${digits.slice(7, 9)}-${digits.slice(9)}`;
  }
  return phone;
};

const fmtElapsed = (ts) => {
  if (!ts) return "—";
  const diff = Date.now() - new Date(ts).getTime();
  const m = Math.floor(diff / 60000);
  if (m < 1) return "только что";
  if (m < 60) return `${m} мин назад`;
  const h = Math.floor(m / 60);
  const rest = m % 60;
  return `${h}ч ${rest}м назад`;
};

const parseWorkDays = (str) => {
  if (!str) return new Set([1, 2, 3, 4, 5]);
  return new Set(str.split(",").map(s => parseInt(s.trim())).filter(n => n >= 1 && n <= 7));
};

const serializeWorkDays = (set) => [...set].sort().join(",");

// ── Component ────────────────────────────────────────────────────────────────
export const SmsCampaignPanel = () => {
  const navigate = useNavigate();
  const [activeCampaign, setActiveCampaign] = useState("first_sms");
  const [logs, setLogs] = useState([]);
  const [manualGroups, setManualGroups] = useState([]);
  const [settings, setSettings] = useState(null);
  const [allSettings, setAllSettings] = useState({});
  const [campaignCounts, setCampaignCounts] = useState({});
  const [smsBalance, setSmsBalance] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  const [filter, setFilter] = useState("all");
  const [savingSettings, setSavingSettings] = useState(false);
  const [settingsSaved, setSettingsSaved] = useState(false);
  const [checkingIds, setCheckingIds] = useState(new Set());
  const [autoRefresh, setAutoRefresh] = useState(true);
  const [togglingCampaign, setTogglingCampaign] = useState(null);
  const [showCityRules, setShowCityRules] = useState(false);
  const [logPage, setLogPage] = useState(1);
  const [manualPage, setManualPage] = useState(1);
  const refreshTimer = useRef(null);
  const PER_PAGE = 20;

  const handleOpenGroup = useCallback((groupId) => {
    if (groupId) navigate("/dashboard/group/" + groupId);
  }, [navigate]);

  // ── Load data ──────────────────────────────────────────────────────────────
  const loadData = useCallback(async () => {
    setError(null);
    try {
      // Load all settings for cards
      const { data: allSettingsData, error: allErr } = await supabase
        .from("sms_campaign_settings")
        .select("*");
      if (allErr) throw allErr;
      const settingsMap = {};
      (allSettingsData || []).forEach(s => { settingsMap[s.campaign_type] = s; });
      setAllSettings(settingsMap);

      // Баланс — тот же живой источник, что на главной странице
      resolveSmsBalance(settingsMap.first_sms?.last_balance ?? null).then(bal => setSmsBalance(bal));

      // Load counts per campaign (for cards)
      const { data: countsData, error: countsErr } = await supabase
        .from("sms_campaign_log")
        .select("campaign_type, status");
      if (countsErr) throw countsErr;
      const counts = {};
      (countsData || []).forEach(r => {
        if (!counts[r.campaign_type]) counts[r.campaign_type] = { total: 0, delivered: 0, sent: 0, errors: 0 };
        counts[r.campaign_type].total++;
        if (r.status === "delivered") counts[r.campaign_type].delivered++;
        if (r.status === "sent" || r.status === "checking") counts[r.campaign_type].sent++;
        if (["send_failed", "error", "limit_exceeded"].includes(r.status)) counts[r.campaign_type].errors++;
      });

      // Also count manual_required groups for the manual card
      const { count: manualCount, error: manualCountErr } = await supabase
        .from("order_groups")
        .select("id", { count: "exact", head: true })
        .eq("notification_status", "manual_required");
      if (!manualCountErr && manualCount != null) {
        counts["manual"] = counts["manual"] || { total: 0, delivered: 0, sent: 0, errors: 0 };
        counts["manual"].total = manualCount;
      }
      setCampaignCounts(counts);

      // For "manual" campaign: load order_groups with manual_required status
      if (activeCampaign === "manual") {
        const { data: manualData, error: manualErr } = await supabase
          .from("order_groups")
          .select("id, customer_name, customer_phone, notification_status, first_sms_sent_at, second_sms_sent_at, next_notification_check_at, sms_attempts, last_sms_error, delivery_status, delivery_link, created_at, updated_at")
          .eq("notification_status", "manual_required")
          .order("updated_at", { ascending: false })
          .limit(200);
        if (manualErr) throw manualErr;
        setManualGroups(manualData || []);
        setLogs([]); // No SMS logs for manual campaign
      } else {
        setManualGroups([]);
        // Load logs for active campaign
        let query = supabase
          .from("sms_campaign_log")
          .select("*")
          .eq("campaign_type", activeCampaign)
          .order("created_at", { ascending: false })
          .limit(200);
        if (filter !== "all") query = query.eq("status", filter);
        const { data: logData, error: logError } = await query;
        if (logError) throw logError;
        setLogs(logData || []);
      }

      // Load settings for active campaign
      if (HAS_SETTINGS.includes(activeCampaign)) {
        setSettings(settingsMap[activeCampaign] || null);
      } else {
        setSettings(null);
      }
    } catch (e) {
      setError(e.message || String(e));
    } finally {
      setIsLoading(false);
    }
  }, [activeCampaign, filter]);

  useEffect(() => { setIsLoading(true); loadData(); }, [loadData]);
  useEffect(() => {
    if (autoRefresh) {
      refreshTimer.current = setInterval(() => loadData(), 30000);
      return () => clearInterval(refreshTimer.current);
    }
  }, [autoRefresh, loadData]);

  // ── Save settings ──────────────────────────────────────────────────────────
  const handleSaveSettings = async () => {
    if (!settings) return;
    setSavingSettings(true);
    try {
      const { id, ...updates } = settings;
      updates.updated_at = new Date().toISOString();
      const { error: updateError } = await supabase
        .from("sms_campaign_settings")
        .update(updates)
        .eq("id", id);
      if (updateError) throw updateError;
      setSettingsSaved(true);
      setTimeout(() => setSettingsSaved(false), 2000);
    } catch (e) {
      setError(`Ошибка сохранения: ${e.message}`);
    } finally {
      setSavingSettings(false);
    }
  };

  const updateSetting = (key, value) => {
    setSettings(prev => prev ? { ...prev, [key]: value } : prev);
  };

  // ── Quick toggle campaign on/off from card ────────────────────────────────
  const toggleCampaignEnabled = async (campaignKey) => {
    const s = allSettings[campaignKey];
    if (!s) return;
    setTogglingCampaign(campaignKey);
    const newVal = !(s.enabled ?? true);
    try {
      const { error: updateError } = await supabase
        .from("sms_campaign_settings")
        .update({ enabled: newVal, updated_at: new Date().toISOString() })
        .eq("id", s.id);
      if (updateError) throw updateError;
      // Update local state
      setAllSettings(prev => ({
        ...prev,
        [campaignKey]: { ...prev[campaignKey], enabled: newVal }
      }));
      if (campaignKey === activeCampaign) {
        setSettings(prev => prev ? { ...prev, enabled: newVal } : prev);
      }
    } catch (e) {
      setError(`Ошибка: ${e.message}`);
    } finally {
      setTogglingCampaign(null);
    }
  };

  const toggleWorkDay = (dayNum) => {
    const current = parseWorkDays(settings?.work_days);
    if (current.has(dayNum)) current.delete(dayNum);
    else current.add(dayNum);
    updateSetting("work_days", serializeWorkDays(current));
  };

  // ── Recheck ────────────────────────────────────────────────────────────────
  const handleRecheck = async (logId) => {
    setCheckingIds(prev => new Set([...prev, logId]));
    try {
      const { error: updateError } = await supabase
        .from("sms_campaign_log")
        .update({ needs_check: true, updated_at: new Date().toISOString() })
        .eq("id", logId);
      if (updateError) throw updateError;
      setLogs(prev => prev.map(l => l.id === logId ? { ...l, needs_check: true } : l));
    } catch (e) {
      setError(`Ошибка: ${e.message}`);
    } finally {
      setTimeout(() => {
        setCheckingIds(prev => { const n = new Set(prev); n.delete(logId); return n; });
      }, 1000);
    }
  };

  // ── Stats ──────────────────────────────────────────────────────────────────
  const stats = logs.reduce((acc, log) => {
    acc[log.status] = (acc[log.status] || 0) + 1;
    return acc;
  }, {});

  const showSettings = HAS_SETTINGS.includes(activeCampaign);
  const isManualCampaign = activeCampaign === "manual";
  const isPaidStorageCampaign = activeCampaign === "paid_storage";
  const showSmsFields = !isManualCampaign;

  // ── Render ──────────────────────────────────────────────────────────────────
  if (isLoading && logs.length === 0) {
    return (
      <Panel className="p-5">
        <div className="animate-pulse text-sm text-[var(--color-text-muted)]">Загрузка…</div>
      </Panel>
    );
  }

  return (
    <div className="space-y-4">
      {/* Balance banner — тот же живой баланс, что на главной (один источник) */}
      {smsBalance?.balance != null && (
        <Panel className="p-3">
          <div className="flex items-center gap-3">
            <span className="text-2xl">💰</span>
            <div>
              <div className="text-xs text-[var(--color-text-muted)]">Баланс sms.ru</div>
              <div className="text-lg font-bold text-[var(--color-text)]">
                {smsBalance.balance.toLocaleString("ru-RU")} ₽
              </div>
              {!smsBalance.live && (
                <div className="text-[10px] text-[var(--color-text-muted)]">
                  показан баланс на момент последней рассылки — живой запрос не прошёл
                </div>
              )}
            </div>
          </div>
        </Panel>
      )}

      {/* Campaign cards */}
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4 max-w-4xl">
        {CAMPAIGNS.map(c => {
          const isActive = activeCampaign === c.key;
          const s = allSettings[c.key];
          const isEnabled = s?.enabled ?? true;
          const isTest = s?.test_mode ?? true;
          const cnt = campaignCounts[c.key] || { total: 0, delivered: 0, sent: 0, errors: 0 };
          const hasS = HAS_SETTINGS.includes(c.key);
          const isToggling = togglingCampaign === c.key;
          return (
            <div
              key={c.key}
              className={`rounded-2xl border p-4 transition cursor-pointer ${
                isActive
                  ? "border-[var(--color-accent)] bg-[var(--color-accent-soft)]"
                  : "border-[var(--color-border)] bg-[var(--color-surface)] hover:bg-[var(--color-surface-strong)]"
              }`}
              onClick={() => { setActiveCampaign(c.key); setFilter("all"); setLogPage(1); setManualPage(1); }}
            >
              {/* Header: icon + toggle */}
              <div className="flex items-center justify-between">
                <span className="text-2xl">{c.icon}</span>
                {hasS && (
                  <button
                    type="button"
                    onClick={(e) => { e.stopPropagation(); toggleCampaignEnabled(c.key); }}
                    disabled={isToggling}
                    className={`relative h-6 w-11 rounded-full transition ${isEnabled ? "bg-[var(--color-accent)]" : "bg-[var(--color-border)]"}`}
                  >
                    <span className={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition ${isEnabled ? "left-[20px]" : "left-0.5"}`} />
                  </button>
                )}
              </div>

              {/* Title */}
              <div className="mt-2 text-sm font-semibold text-[var(--color-text)]">{c.label}</div>

              {/* Status badge */}
              {hasS && (
                <div className="mt-1">
                  <span className={`rounded-full px-2 py-0.5 text-[10px] font-semibold ${
                    isEnabled
                      ? (isTest ? "bg-[rgba(191,123,33,0.15)] text-[var(--color-warning)]" : "bg-[rgba(34,197,94,0.15)] text-[#22c55e]")
                      : "bg-[var(--color-surface-strong)] text-[var(--color-text-muted)]"
                  }`}>
                    {!isEnabled ? "⏸ Выключена" : isTest ? "🧪 Тест" : "🚀 Боевой"}
                  </span>
                </div>
              )}

              {/* Quick stats */}
              {hasS && cnt.total > 0 && (
                <div className="mt-3 grid grid-cols-3 gap-1 text-center">
                  <div className="rounded-lg bg-[var(--color-surface-strong)] py-1">
                    <div className="text-[10px] text-[var(--color-text-muted)]">Всего</div>
                    <div className="text-xs font-bold text-[var(--color-text)]">{cnt.total}</div>
                  </div>
                  <div className="rounded-lg bg-[var(--color-surface-strong)] py-1">
                    <div className="text-[10px] text-[var(--color-text-muted)]">Доставл.</div>
                    <div className="text-xs font-bold text-[#22c55e]">{cnt.delivered}</div>
                  </div>
                  <div className="rounded-lg bg-[var(--color-surface-strong)] py-1">
                    <div className="text-[10px] text-[var(--color-text-muted)]">Ошибок</div>
                    <div className="text-xs font-bold text-[#ef4444]">{cnt.errors}</div>
                  </div>
                </div>
              )}

              {!hasS && (
                <div className="mt-2 text-[11px] text-[var(--color-text-muted)] leading-snug">В разработке</div>
              )}
            </div>
          );
        })}
      </div>

      {/* ── City rules button ──────────────────────────────────────────── */}
      <div className="flex items-center gap-3">
        <button
          type="button"
          onClick={() => setShowCityRules(!showCityRules)}
          className={[
            "rounded-2xl border px-4 py-2.5 text-sm font-medium transition flex items-center gap-2",
            showCityRules
              ? "border-[var(--color-accent)] bg-[var(--color-accent-soft)] text-[var(--color-accent)]"
              : "border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-muted)] hover:bg-[var(--color-surface-strong)]"
          ].join(" ")}
        >
          🏙️ SMS по городам
        </button>
      </div>

      {/* ── City profiles panel ────────────────────────────────────────── */}
      {showCityRules && <SmsCityProfilesPanel />}

      {error && (
        <Panel className="p-3">
          <div className="text-xs text-[var(--color-danger)]">{error}</div>
          <button onClick={() => { setError(null); loadData(); }} className="mt-2 text-xs text-[var(--color-accent)]">Повторить</button>
        </Panel>
      )}

      {/* ── Statistics ────────────────────────────────────────────────────── */}
      {!showCityRules && <SmsCampaignStats campaignType={activeCampaign} />}

      {/* ── Settings ──────────────────────────────────────────────────────── */}
      {!showCityRules && showSettings && settings && (
        <Panel className="p-5">
          <div className="mb-4 flex items-center justify-between">
            <h3 className="text-sm font-semibold text-[var(--color-text)]">
              {CAMPAIGNS.find(c => c.key === activeCampaign)?.icon} {CAMPAIGNS.find(c => c.key === activeCampaign)?.label}
            </h3>
            {settingsSaved && <span className="text-xs text-[var(--color-accent)]">✓ Сохранено</span>}
          </div>

          {/* Test / Production toggle — только для SMS-кампаний */}
          {!isManualCampaign && (
          <div className={`mb-4 rounded-xl border p-3 ${settings.test_mode ? "border-[var(--color-warning)] bg-[rgba(191,123,33,0.08)]" : "border-[var(--color-accent)] bg-[var(--color-accent-soft)]"}`}>
            <label className="flex items-center justify-between">
              <div>
                <div className="text-sm font-semibold text-[var(--color-text)]">
                  {settings.test_mode ? "🧪 Тестовый режим" : "🚀 Боевой режим"}
                </div>
                <div className="mt-0.5 text-xs text-[var(--color-text-muted)]">
                  {settings.test_mode
                    ? `SMS только на: ${settings.test_phone || "—"}`
                    : "SMS реальным клиентам из базы"}
                </div>
              </div>
              <button
                type="button"
                onClick={() => updateSetting("test_mode", !settings.test_mode)}
                className={`relative h-7 w-12 rounded-full transition ${settings.test_mode ? "bg-[var(--color-warning)]" : "bg-[var(--color-accent)]"}`}
              >
                <span className={`absolute top-0.5 h-6 w-6 rounded-full bg-white shadow transition ${settings.test_mode ? "left-0.5" : "left-[22px]"}`} />
              </button>
            </label>
            {settings.test_mode && (
              <div className="mt-3">
                <SettingField label="Тестовый номер" value={settings.test_phone || ""} onChange={(v) => updateSetting("test_phone", v)} />
              </div>
            )}
          </div>
          )}

          {/* ── SMS text templates: доставка / самовывоз ───────────────────── */}
          {!isManualCampaign && (
            <div className="mb-4 rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-3">
              <div className="mb-2 text-xs font-semibold text-[var(--color-text)]">📝 Текст SMS</div>
              <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
                <div>
                  <div className="mb-1 text-[11px] font-semibold text-[var(--color-text-muted)]">📦 Доставка</div>
                  <textarea
                    value={settings.sms_text_template || ""}
                    onChange={(e) => updateSetting("sms_text_template", e.target.value)}
                    rows={3}
                    className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2 text-xs text-[var(--color-text)] focus:border-[var(--color-accent)] focus:outline-none resize-y"
                    placeholder="Ваш заказ готов. Согласуйте дату доставки по ссылке: {link}"
                  />
                  <div className="mt-1 text-[10px] text-[var(--color-text-muted)]">
                    Текущая длина: {smsPreviewText(settings.sms_text_template).length} символов
                  </div>
                </div>
                <div>
                  <div className="mb-1 text-[11px] font-semibold text-[var(--color-text-muted)]">🏪 Самовывоз</div>
                  <textarea
                    value={settings.sms_text_template_pickup || ""}
                    onChange={(e) => updateSetting("sms_text_template_pickup", e.target.value)}
                    rows={3}
                    className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2 text-xs text-[var(--color-text)] focus:border-[var(--color-accent)] focus:outline-none resize-y"
                    placeholder="Ваш заказ готов. Согласуйте дату самовывоза по ссылке: {link}"
                  />
                  <div className="mt-1 text-[10px] text-[var(--color-text-muted)]">
                    Текущая длина: {smsPreviewText(settings.sms_text_template_pickup).length} символов
                  </div>
                </div>
              </div>
              <div className="mt-2 rounded-lg bg-[var(--color-surface-strong)] px-3 py-2 text-[10px] text-[var(--color-text-muted)]">
                Текст выбирается по типу отгрузки: самовывоз → правый шаблон, доставка → левый.
                <div className="mt-1">
                  Переменные: {"{link}"} — ссылка согласования, {"{order}"} — номер доставки (можно {"{номер}"}), {"{code}"} — код выдачи (можно {"{код}"}).
                </div>
                <div className="mt-1">📦 Доставка: {renderSmsPreview(settings.sms_text_template, "— пусто, уйдёт стандартный текст кампании")}</div>
                <div>🏪 Самовывоз: {renderSmsPreview(settings.sms_text_template_pickup, "— пусто, уйдёт стандартный текст кампании")}</div>
                <div className="mt-1">Если у города в «SMS по городам» задан свой текст в режиме «Уведомление» — уходит он, и тогда шаблон применяется только если в нём нет {"{link}"}.</div>
              </div>
            </div>
          )}

          {/* ── Интервалы ─────────────────────────────────────────────────── */}
          <div className="mb-1 text-xs font-semibold text-[var(--color-text)]">
            {isManualCampaign ? "⚙️ Настройки" : "📊 Интервалы и попытки"}
          </div>
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {!isManualCampaign && (
              <>
                <SettingField label="Пауза между проверками (сек)" value={settings.wait_between_checks_seconds} onChange={(v) => updateSetting("wait_between_checks_seconds", parseInt(v) || 25)} />
                <SettingField label="Макс. время ожидания (мин)" value={settings.max_check_duration_minutes} onChange={(v) => updateSetting("max_check_duration_minutes", parseInt(v) || 90)} />
                <SettingField label="Макс. попыток отправки" value={settings.max_attempts} onChange={(v) => updateSetting("max_attempts", parseInt(v) || 2)} />
                {!isPaidStorageCampaign && (
                  <SettingField label="Вторая SMS через (часов)" value={settings.second_sms_delay_hours} onChange={(v) => updateSetting("second_sms_delay_hours", parseInt(v) || 3)} />
                )}
              </>
            )}
            <SettingField label="В ручную работу через (часов после последнего контакта)" value={settings.auto_manual_after_hours} onChange={(v) => updateSetting("auto_manual_after_hours", parseInt(v) || 3)} hint="Отсчёт от последнего контакта: SMS или звонок робота. Если автодозвон включён — ждём звонок, если включено второе SMS — ждём его." />
            <SettingField label="Telegram chat ID" value={settings.telegram_chat_id || ""} onChange={(v) => updateSetting("telegram_chat_id", v)} />
          </div>

          {/* ── Время работы ────────────────────────────────────────────── */}
          <div className="mt-4 rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] p-3">
            <div className="mb-3 text-xs font-semibold text-[var(--color-text)]">
              {isManualCampaign ? "⏰ Время проверки" : "⏰ Время отправки SMS"}
            </div>

            {/* Часы */}
            <div className="mb-3 flex items-center gap-2">
              <select
                value={settings.work_hours_start ?? 8}
                onChange={(e) => updateSetting("work_hours_start", parseInt(e.target.value))}
                className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-1.5 text-xs text-[var(--color-text)] focus:border-[var(--color-accent)] focus:outline-none"
              >
                {Array.from({ length: 24 }, (_, h) => <option key={h} value={h}>{h}:00</option>)}
              </select>
              <span className="text-xs text-[var(--color-text-muted)]">—</span>
              <select
                value={settings.work_hours_end ?? 21}
                onChange={(e) => updateSetting("work_hours_end", parseInt(e.target.value))}
                className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-1.5 text-xs text-[var(--color-text)] focus:border-[var(--color-accent)] focus:outline-none"
              >
                {Array.from({ length: 24 }, (_, h) => <option key={h} value={h}>{h}:00</option>)}
              </select>
              <span className="text-[10px] text-[var(--color-text-muted)]">по Москве</span>
            </div>

            {/* Дни недели — таблетки */}
            <div className="flex flex-wrap gap-2">
              {DAYS.map(d => {
                const activeDays = parseWorkDays(settings.work_days);
                const isOn = activeDays.has(d.num);
                return (
                  <button
                    key={d.num}
                    type="button"
                    onClick={() => toggleWorkDay(d.num)}
                    className={`rounded-lg px-3 py-1.5 text-xs font-medium transition ${
                      isOn
                        ? "bg-[var(--color-accent)] text-white"
                        : "border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-muted)] hover:bg-[var(--color-surface-strong)]"
                    }`}
                  >
                    {d.short}
                  </button>
                );
              })}
            </div>
            <div className="mt-2 text-[10px] text-[var(--color-text-muted)]">
              Проверка статусов работает круглосуточно. Отправка — только в выбранные часы и дни.
            </div>
          </div>

          {/* ── Вкл/выкл + сохранить ──────────────────────────────────────── */}
          <div className="mt-4 flex items-center gap-3">
            <button
              type="button"
              onClick={() => updateSetting("enabled", !(settings.enabled ?? true))}
              className={`relative h-7 w-12 rounded-full transition ${settings.enabled ? "bg-[var(--color-accent)]" : "bg-[var(--color-border)]"}`}
            >
              <span className={`absolute top-0.5 h-6 w-6 rounded-full bg-white shadow transition ${settings.enabled ? "left-[22px]" : "left-0.5"}`} />
            </button>
            <span className="text-xs font-medium text-[var(--color-text)]">
              {settings.enabled ? "Кампания включена" : "Кампания выключена"}
            </span>
            <button
              onClick={handleSaveSettings}
              disabled={savingSettings}
              className="ml-auto rounded-xl bg-[var(--color-accent)] px-4 py-1.5 text-xs font-semibold text-white hover:opacity-90 disabled:opacity-50"
            >
              {savingSettings ? "Сохранение…" : "Сохранить"}
            </button>
          </div>
        </Panel>
      )}

      {/* ── Not implemented ──────────────────────────────────────────────── */}
      {!showCityRules && !showSettings && (
        <Panel className="p-5">
          <div className="text-sm text-[var(--color-text-muted)]">
            {CAMPAIGNS.find(c => c.key === activeCampaign)?.label} — в разработке
          </div>
        </Panel>
      )}

      {/* ── Manual campaign: groups table ─────────────────────────────────── */}
      {isManualCampaign ? (
        <>
          <Panel className="p-4">
            <div className="flex items-center gap-2">
              <span className="text-xs font-semibold text-[var(--color-text-muted)]">В ручном управлении: {manualGroups.length}</span>
            </div>
          </Panel>

          <Panel className="p-0">
            <div className="overflow-x-auto">
              <div className="min-w-[800px]">
                <div className="grid grid-cols-[minmax(160px,2fr)_minmax(120px,1fr)_minmax(120px,1fr)_minmax(120px,1fr)_minmax(100px,0.8fr)] gap-0 border-b border-[var(--color-border)] bg-[var(--color-surface-strong)] text-xs uppercase tracking-[0.08em] text-[var(--color-text-muted)]">
                  <div className="px-3 py-1.5 font-medium">Клиент</div>
                  <div className="px-3 py-1.5 font-medium">Телефон</div>
                  <div className="px-3 py-1.5 font-medium">1-я SMS</div>
                  <div className="px-3 py-1.5 font-medium">2-я SMS</div>
                  <div className="px-3 py-1.5 font-medium">Обновлён</div>
                </div>
                {manualGroups.length === 0 ? (
                  <div className="px-4 py-6 text-xs text-[var(--color-text-muted)]">Нет групп в ручном управлении</div>
                ) : (
                  (() => {
                    const start = (manualPage - 1) * PER_PAGE;
                    const pageGroups = manualGroups.slice(start, start + PER_PAGE);
                    return pageGroups.map((group) => (
                    <div
                      key={group.id}
                      onClick={() => handleOpenGroup(group.id)}
                      className="grid grid-cols-[minmax(160px,2fr)_minmax(120px,1fr)_minmax(120px,1fr)_minmax(120px,1fr)_minmax(100px,0.8fr)] gap-0 border-t border-[var(--color-border)] text-xs hover:bg-[var(--color-accent-soft)] cursor-pointer"
                    >
                      <div className="px-3 py-1.5 text-[var(--color-text)]">
                        <div className="font-medium">{group.customer_name || "—"}</div>
                        {group.last_sms_error && <div className="mt-0.5 text-[10px] text-[var(--color-danger)]">{group.last_sms_error.slice(0, 60)}</div>}
                      </div>
                      <div className="px-3 py-1.5 text-[var(--color-text-muted)]">{fmtPhone(group.customer_phone)}</div>
                      <div className="px-3 py-1.5 text-[var(--color-text-muted)]">
                        {group.first_sms_sent_at ? fmtTime(group.first_sms_sent_at) : "—"}
                      </div>
                      <div className="px-3 py-1.5 text-[var(--color-text-muted)]">
                        {group.second_sms_sent_at ? fmtTime(group.second_sms_sent_at) : <span className="text-[var(--color-danger)]">не отправлена</span>}
                      </div>
                      <div className="px-3 py-1.5 text-[var(--color-text-muted)]">
                        {fmtTime(group.updated_at)}
                        <div className="text-[10px]">{fmtElapsed(group.updated_at)}</div>
                      </div>
                    </div>
                    ));
                  })()
                )}
              </div>
            </div>
          </Panel>

          {/* ── Pagination: manual groups ─────────────────────────────────── */}
          {manualGroups.length > PER_PAGE && (
            <div className="flex items-center justify-center gap-2">
              <button
                onClick={() => setManualPage(p => Math.max(1, p - 1))}
                disabled={manualPage <= 1}
                className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-1 text-xs font-medium text-[var(--color-text)] hover:bg-[var(--color-surface-strong)] disabled:opacity-40"
              >← Назад</button>
              <span className="text-xs text-[var(--color-text-muted)]">
                Стр. {manualPage} / {Math.ceil(manualGroups.length / PER_PAGE)} · {manualGroups.length} записей
              </span>
              <button
                onClick={() => setManualPage(p => Math.min(Math.ceil(manualGroups.length / PER_PAGE), p + 1))}
                disabled={manualPage >= Math.ceil(manualGroups.length / PER_PAGE)}
                className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-1 text-xs font-medium text-[var(--color-text)] hover:bg-[var(--color-surface-strong)] disabled:opacity-40"
              >Вперёд →</button>
            </div>
          )}
        </>
      ) : (
      <>
      {/* ── Stats ─────────────────────────────────────────────────────────── */}
      <Panel className="p-4">
        <div className="flex flex-wrap items-center gap-2">
          <span className="mr-2 text-xs font-semibold text-[var(--color-text-muted)]">Всего: {logs.length}</span>
          {Object.entries(STATUS_LABELS).map(([status, label]) => {
            const count = stats[status] || 0;
            if (count === 0) return null;
            return <Badge key={status} tone={STATUS_TONES[status] || "neutral"}>{label}: {count}</Badge>;
          })}
        </div>
      </Panel>

      {/* ── Filter + auto-refresh ─────────────────────────────────────────── */}
      <div className="flex flex-wrap items-center justify-between gap-2">
        <div className="flex flex-wrap gap-2">
          <FilterButton active={filter === "all"} onClick={() => { setFilter("all"); setLogPage(1); }}>Все ({logs.length})</FilterButton>
          {Object.entries(STATUS_LABELS).map(([status, label]) => {
            const count = stats[status] || 0;
            if (count === 0) return null;
            return <FilterButton key={status} active={filter === status} onClick={() => { setFilter(status); setLogPage(1); }}>{label} ({count})</FilterButton>;
          })}
        </div>
        <label className="flex items-center gap-1.5 text-xs text-[var(--color-text-muted)]">
          <input type="checkbox" checked={autoRefresh} onChange={(e) => setAutoRefresh(e.target.checked)} className="h-3.5 w-3.5 rounded border-[var(--color-border)]" />
          Авто-обновление (30с)
        </label>
      </div>

      {/* ── Log table ──────────────────────────────────────────────────────── */}
      <Panel className="p-0">
        <div className="overflow-x-auto">
          <div className="min-w-[900px]">
            <div className="grid grid-cols-[minmax(140px,1.5fr)_minmax(100px,1fr)_minmax(80px,0.8fr)_minmax(70px,0.6fr)_minmax(50px,0.4fr)_minmax(100px,1fr)_minmax(90px,0.8fr)] gap-0 border-b border-[var(--color-border)] bg-[var(--color-surface-strong)] text-xs uppercase tracking-[0.08em] text-[var(--color-text-muted)]">
              <div className="px-3 py-1.5 font-medium">Телефон</div>
              <div className="px-3 py-1.5 font-medium">SMS ID</div>
              <div className="px-3 py-1.5 font-medium">Статус</div>
              <div className="px-3 py-1.5 font-medium">Код</div>
              <div className="px-3 py-1.5 font-medium">Поп.</div>
              <div className="px-3 py-1.5 font-medium">Создано</div>
              <div className="px-3 py-1.5 font-medium">Действие</div>
            </div>
            {logs.length === 0 ? (
              <div className="px-4 py-6 text-xs text-[var(--color-text-muted)]">Нет записей</div>
            ) : (
              (() => {
                const totalPages = Math.ceil(logs.length / PER_PAGE);
                const start = (logPage - 1) * PER_PAGE;
                const pageLogs = logs.slice(start, start + PER_PAGE);
                return pageLogs.map((entry) => {
                const canRecheck = entry.status === "sent" || entry.status === "checking";
                const isChecking = checkingIds.has(entry.id);
                const isTestMode = settings?.test_mode;
                return (
                  <div
                    key={entry.id}
                    onClick={() => handleOpenGroup(entry.order_group_id)}
                    className="grid grid-cols-[minmax(140px,1.5fr)_minmax(100px,1fr)_minmax(80px,0.8fr)_minmax(70px,0.6fr)_minmax(50px,0.4fr)_minmax(100px,1fr)_minmax(90px,0.8fr)] gap-0 border-t border-[var(--color-border)] text-xs hover:bg-[var(--color-accent-soft)] cursor-pointer"
                  >
                    <div className="px-3 py-1.5 text-[var(--color-text)]">
                      {fmtPhone(entry.customer_phone)}
                      {isTestMode && <div className="text-[10px] text-[var(--color-warning)]">🧪 на тест. номер</div>}
                    </div>
                    <div className="px-3 py-1.5 text-[var(--color-text-muted)]">{entry.sms_id || "—"}</div>
                    <div className="px-3 py-1.5">
                      <Badge tone={STATUS_TONES[entry.status] || "neutral"}>{STATUS_LABELS[entry.status] || entry.status}</Badge>
                      {entry.needs_check && <div className="mt-0.5 text-[10px] text-[var(--color-accent)]">⟳ в очереди</div>}
                    </div>
                    <div className="px-3 py-1.5 text-[var(--color-text-muted)]" title={SMS_CODE_LABELS[entry.sms_code] || ""}>
                      {entry.sms_code || "—"}
                      {entry.sms_code && SMS_CODE_LABELS[entry.sms_code] && <div className="text-[10px]">{SMS_CODE_LABELS[entry.sms_code]}</div>}
                    </div>
                    <div className="px-3 py-1.5 text-[var(--color-text-muted)]">{entry.attempts || 0}</div>
                    <div className="px-3 py-1.5 text-[var(--color-text-muted)]">
                      {fmtTime(entry.created_at)}
                      <div className="text-[10px]">{fmtElapsed(entry.created_at)}</div>
                      {entry.error_message && <div className="mt-0.5 text-[10px] text-[var(--color-danger)]">{entry.error_message.slice(0, 80)}</div>}
                    </div>
                    <div className="px-3 py-1.5" onClick={(e) => e.stopPropagation()}>
                      {canRecheck ? (
                        <button
                          onClick={() => handleRecheck(entry.id)}
                          disabled={isChecking || entry.needs_check}
                          className="rounded-lg border border-[var(--color-border)] px-2 py-1 text-[11px] font-medium text-[var(--color-text)] hover:bg-[var(--color-surface-strong)] disabled:opacity-40"
                        >
                          {isChecking ? "…" : entry.needs_check ? "⟳ В очереди" : "↻ Проверить"}
                        </button>
                      ) : (
                        <span className="text-[10px] text-[var(--color-text-muted)]">→ к доставке</span>
                      )}
                    </div>
                  </div>
                );
                });
              })()
            )}
          </div>
        </div>
      </Panel>

      {/* ── Pagination: logs ─────────────────────────────────────────────── */}
      {logs.length > PER_PAGE && (
        <div className="flex items-center justify-center gap-2">
          <button
            onClick={() => setLogPage(p => Math.max(1, p - 1))}
            disabled={logPage <= 1}
            className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-1 text-xs font-medium text-[var(--color-text)] hover:bg-[var(--color-surface-strong)] disabled:opacity-40"
          >← Назад</button>
          <span className="text-xs text-[var(--color-text-muted)]">
            Стр. {logPage} / {Math.ceil(logs.length / PER_PAGE)} · {logs.length} записей
          </span>
          <button
            onClick={() => setLogPage(p => Math.min(Math.ceil(logs.length / PER_PAGE), p + 1))}
            disabled={logPage >= Math.ceil(logs.length / PER_PAGE)}
            className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-1 text-xs font-medium text-[var(--color-text)] hover:bg-[var(--color-surface-strong)] disabled:opacity-40"
          >Вперёд →</button>
        </div>
      )}

      <div className="flex justify-end">
        <button onClick={loadData} className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-1.5 text-xs font-medium text-[var(--color-text)] hover:bg-[var(--color-surface-strong)]">
          ↻ Обновить
        </button>
      </div>
      </>
      )}
    </div>
  );
};

// ── Helpers ──────────────────────────────────────────────────────────────────
const SettingField = ({ label, value, onChange, hint }) => (
  <label className="block">
    <span className="mb-1 block text-[10px] font-medium text-[var(--color-text-muted)]">{label}</span>
    <input
      type="text"
      value={value ?? ""}
      onChange={(e) => onChange(e.target.value)}
      className="w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-1.5 text-xs text-[var(--color-text)] focus:border-[var(--color-accent)] focus:outline-none"
    />
    {hint ? <span className="mt-1 block text-[10px] leading-snug text-[var(--color-text-muted)]">{hint}</span> : null}
  </label>
);

const FilterButton = ({ active, onClick, children }) => (
  <button
    onClick={onClick}
    className={`rounded-full px-3 py-1 text-xs font-medium transition ${
      active
        ? "bg-[var(--color-accent)] text-white"
        : "border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text-muted)] hover:bg-[var(--color-surface-strong)]"
    }`}
  >
    {children}
  </button>
);