/* ============================================================
   screen_settings.jsx — Настройки (Студия · Интеграции ·
   Уведомления · Команда · Тариф)
   ============================================================ */
function Settings({ ctx }) {
  const [tab, setTab] = React.useState("studio");
  const tabs = [
    { id: "studio", label: "Студия", icon: "building" },
    { id: "integrations", label: "Интеграции", icon: "link" },
    { id: "notifications", label: "Уведомления", icon: "bell" },
    { id: "team", label: "Команда", icon: "users" },
    { id: "plan", label: "Тариф", icon: "award" },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "210px 1fr", gap: 22, alignItems: "start" }}>
      {/* vertical tabs */}
      <div style={{ position: "sticky", top: 0, display: "flex", flexDirection: "column", gap: 3 }}>
        {tabs.map(t => (
          <button key={t.id} className={"sb-item" + (tab === t.id ? " active" : "")} onClick={() => setTab(t.id)} style={{ fontSize: 14 }}>
            <Icon name={t.icon} /><span>{t.label}</span>
          </button>
        ))}
      </div>
      <div className="grid" style={{ gap: 16 }}>
        {tab === "studio" && <SettingsStudio />}
        {tab === "integrations" && <SettingsIntegrations />}
        {tab === "notifications" && <SettingsNotifications />}
        {tab === "team" && <SettingsTeam />}
        {tab === "plan" && <SettingsPlan />}
      </div>
    </div>
  );
}

function SettingsCard({ title, sub, children, foot }) {
  return (
    <div className="card">
      <div className="card-head" style={{ display: "block", padding: "16px 20px" }}>
        <h3>{title}</h3>
        {sub && <div style={{ fontSize: 12.5, color: "var(--ink-3)", fontWeight: 500, marginTop: 2 }}>{sub}</div>}
      </div>
      <div className="card-pad">{children}</div>
      {foot && <div style={{ padding: "12px 20px", borderTop: "1px solid var(--border)", background: "var(--surface-2)", display: "flex", justifyContent: "flex-end", gap: 10 }}>{foot}</div>}
    </div>
  );
}

function SettingsStudio() {
  return (
    <>
      <SettingsCard title="Профиль студии" sub="Эти данные подставляются в брендированные отчёты для клиентов"
        foot={<><button className="btn btn-ghost btn-sm">Отмена</button><button className="btn btn-primary btn-sm"><Icon name="check_circle" size={14} />Сохранить</button></>}>
        <div style={{ display: "flex", gap: 22, alignItems: "flex-start" }}>
          <div style={{ textAlign: "center", flex: "0 0 auto" }}>
            <div style={{ width: 88, height: 88, borderRadius: 20, background: "linear-gradient(150deg, var(--accent), #1769b8)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 40, boxShadow: "var(--sh-2)" }}>K</div>
            <button className="btn btn-ghost btn-sm" style={{ marginTop: 10 }}><Icon name="image" size={13} />Логотип</button>
          </div>
          <div style={{ flex: 1, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <div className="field"><label className="label">Название студии</label><input className="input" defaultValue="Kant Studio" /></div>
            <div className="field"><label className="label">Город</label><input className="input" defaultValue="Калининград" /></div>
            <div className="field"><label className="label">Сайт</label><input className="input" defaultValue="kant.studio" /></div>
            <div className="field"><label className="label">Телефон</label><input className="input" defaultValue="+7 4012 90-10-20" /></div>
            <div className="field" style={{ gridColumn: "span 2" }}><label className="label">Email для отчётов</label><input className="input" defaultValue="hello@kant.studio" /></div>
          </div>
        </div>
      </SettingsCard>
      <SettingsCard title="Брендирование отчётов">
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <div>
            <div className="label" style={{ marginBottom: 8 }}>Акцентный цвет отчётов</div>
            <div style={{ display: "flex", gap: 9 }}>
              {["#0F4C8A", "#1E9E5A", "#6B47C9", "#E0691C", "#1A1A1A"].map((c, i) => (
                <span key={c} style={{ width: 30, height: 30, borderRadius: 8, background: c, cursor: "pointer", boxShadow: i === 0 ? "0 0 0 2px var(--surface), 0 0 0 4px " + c : "none" }} />
              ))}
            </div>
          </div>
          <div style={{ width: 1, alignSelf: "stretch", background: "var(--border)" }} />
          <div style={{ flex: 1 }}>
            <Toggle label="Показывать логотип Kant Studio в шапке отчёта" on />
            <div style={{ height: 8 }} />
            <Toggle label="Подпись «Сформировано автоматически»" on />
          </div>
        </div>
      </SettingsCard>
    </>
  );
}

const INTEGRATIONS = [
  { name: "Google Search Console", icon: "globe", color: "#4285F4", logo: "G", status: "connected", desc: "Позиции, запросы и индексация из Google", meta: "6 ресурсов · обновлено сегодня" },
  { name: "Яндекс.Вебмастер", icon: "globe", color: "#FF3333", logo: "Я", status: "connected", desc: "Данные индексации и ссылки из Яндекса", meta: "5 сайтов подключено" },
  { name: "Яндекс.Вордстат", icon: "search", color: "#FFCC00", logo: "В", status: "connected", desc: "Реальная частотность запросов по регионам", meta: "Лимит: 2 400 / 5 000 в день" },
  { name: "WordPress", icon: "wordpress", color: "#21759B", logo: "W", status: "connected", desc: "Публикация статей и правки прямо из приложения", meta: "4 сайта · плагин активен" },
  { name: "Google Analytics 4", icon: "trending", color: "#E8710A", logo: "A", status: "partial", desc: "Трафик и поведение посетителей", meta: "Подключено 3 из 6 сайтов" },
  { name: "Битрикс24 / 1С-Битрикс", icon: "database", color: "#00AEEF", logo: "Б", status: "disconnected", desc: "Прямые правки на сайтах Битрикс", meta: "Не подключено" },
];

function SettingsIntegrations() {
  const stMap = {
    connected: { badge: "b-green", label: "подключено", icon: "check_circle" },
    partial: { badge: "b-yellow", label: "частично", icon: "alert_triangle" },
    disconnected: { badge: "b-gray", label: "не подключено", icon: "plus" },
  };
  return (
    <SettingsCard title="Источники данных" sub="Все интеграции бесплатны — приложение работает на официальных API">
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {INTEGRATIONS.map((it, i) => {
          const st = stMap[it.status];
          return (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 16px", border: "1px solid var(--border)", borderRadius: 12, background: "var(--surface-2)" }}>
              <span style={{ width: 42, height: 42, borderRadius: 11, background: it.color, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 19, flex: "0 0 42px" }}>{it.logo}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
                  <span style={{ fontSize: 14, fontWeight: 800 }}>{it.name}</span>
                  <span className={"badge " + st.badge}><Icon name={st.icon} size={11} />{st.label}</span>
                </div>
                <div style={{ fontSize: 12.5, color: "var(--ink-3)", fontWeight: 500, marginTop: 2 }}>{it.desc}</div>
                <div style={{ fontSize: 11.5, color: "var(--ink-4)", fontWeight: 600, marginTop: 3 }}>{it.meta}</div>
              </div>
              {it.status === "disconnected"
                ? <button className="btn btn-primary btn-sm">Подключить</button>
                : it.status === "partial"
                  ? <button className="btn btn-soft btn-sm">Настроить</button>
                  : <button className="btn btn-ghost btn-sm"><Icon name="settings" size={14} />Управлять</button>}
            </div>
          );
        })}
      </div>
    </SettingsCard>
  );
}

const NOTIF_PREFS = [
  { group: "Критичные события", items: [
    { label: "Появился noindex / закрытие от индексации", on: true },
    { label: "Резкое падение позиций (топ-10 → ниже)", on: true },
    { label: "Сайт недоступен или ошибка 5xx", on: true },
  ]},
  { group: "Изменения на сайте", items: [
    { label: "Клиент изменил title / H1 / description", on: true },
    { label: "Изменился robots.txt или sitemap", on: true },
    { label: "Потеря входящих ссылок", on: false },
  ]},
  { group: "Дайджесты", items: [
    { label: "Ежедневная сводка по всем сайтам", on: true },
    { label: "Еженедельный отчёт о позициях", on: true },
    { label: "Напоминание сформировать отчёт клиенту", on: false },
  ]},
];

function SettingsNotifications() {
  return (
    <>
      <SettingsCard title="Каналы уведомлений">
        <div style={{ display: "flex", gap: 12 }}>
          {[["В приложении", "bell", true], ["Email", "report", true], ["Telegram-бот", "send", false]].map(([l, ic, on], i) => (
            <div key={i} style={{ flex: 1, display: "flex", alignItems: "center", gap: 10, padding: "12px 14px", border: "1px solid var(--border)", borderRadius: 12 }}>
              <span style={{ width: 34, height: 34, borderRadius: 9, background: on ? "var(--accent-soft)" : "var(--bg-sunken)", color: on ? "var(--accent)" : "var(--ink-4)", display: "flex", alignItems: "center", justifyContent: "center", flex: "0 0 34px" }}><Icon name={ic} size={17} /></span>
              <span style={{ flex: 1, fontSize: 13, fontWeight: 700 }}>{l}</span>
              <Toggle label="" on={on} />
            </div>
          ))}
        </div>
      </SettingsCard>
      {NOTIF_PREFS.map((g, i) => (
        <SettingsCard key={i} title={g.group}>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {g.items.map((it, j) => (
              <div key={j} style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span style={{ fontSize: 13.5, fontWeight: 600, color: "var(--ink)" }}>{it.label}</span>
                <Toggle label="" on={it.on} />
              </div>
            ))}
          </div>
        </SettingsCard>
      ))}
    </>
  );
}

const TEAM = [
  { name: "Кирилл Соколов", role: "Владелец", email: "kirill@kant.studio", color: "#0F4C8A", letter: "К", sites: "Все сайты" },
  { name: "Анна Мороз", role: "SEO-специалист", email: "anna@kant.studio", color: "#1E9E5A", letter: "А", sites: "4 сайта" },
  { name: "Дмитрий Лебедев", role: "Контент-менеджер", email: "dmitry@kant.studio", color: "#6B47C9", letter: "Д", sites: "2 сайта" },
];

function SettingsTeam() {
  return (
    <SettingsCard title="Команда студии" sub="Управление доступом сотрудников к сайтам клиентов"
      foot={<button className="btn btn-primary btn-sm"><Icon name="plus" size={14} />Пригласить сотрудника</button>}>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {TEAM.map((m, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 13, padding: "12px 14px", border: "1px solid var(--border)", borderRadius: 12 }}>
            <span style={{ width: 40, height: 40, borderRadius: 999, background: m.color, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 15, flex: "0 0 40px" }}>{m.letter}</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 800 }}>{m.name}</div>
              <div style={{ fontSize: 12.5, color: "var(--ink-4)", fontWeight: 600 }}>{m.email}</div>
            </div>
            <span className="badge b-gray">{m.sites}</span>
            <span className={"badge " + (m.role === "Владелец" ? "b-blue" : "b-violet")}>{m.role}</span>
            <button className="icon-btn"><Icon name="more" size={16} /></button>
          </div>
        ))}
      </div>
    </SettingsCard>
  );
}

function SettingsPlan() {
  const feats = ["До 10 сайтов клиентов", "Ежедневный мониторинг изменений", "AI-генерация контента без лимита", "Брендированные PDF-отчёты", "Все интеграции включены"];
  return (
    <>
      <div className="card card-pad" style={{ background: "linear-gradient(120deg, var(--accent), #1769b8)", color: "#fff", display: "flex", alignItems: "center", gap: 20 }}>
        <span style={{ width: 52, height: 52, borderRadius: 14, background: "rgba(255,255,255,.18)", display: "flex", alignItems: "center", justifyContent: "center", flex: "0 0 52px" }}><Icon name="award" size={26} /></span>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12.5, fontWeight: 700, opacity: .85, letterSpacing: ".04em" }}>ТЕКУЩИЙ ТАРИФ</div>
          <div style={{ fontSize: 22, fontWeight: 800, marginTop: 2 }}>Студия · 6 из 10 сайтов</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div className="tnum" style={{ fontSize: 26, fontWeight: 800 }}>4 900 ₽<span style={{ fontSize: 13, opacity: .8, fontWeight: 600 }}>/мес</span></div>
          <div style={{ fontSize: 12, opacity: .85 }}>следующее списание 1 июля</div>
        </div>
      </div>
      <SettingsCard title="Что входит в тариф" foot={<><button className="btn btn-ghost btn-sm">История платежей</button><button className="btn btn-primary btn-sm">Расширить до 25 сайтов</button></>}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          {feats.map((f, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 13, color: "var(--ink-2)", fontWeight: 600 }}>
              <Icon name="check_circle" size={16} style={{ color: "var(--green)", flex: "0 0 16px" }} />{f}
            </div>
          ))}
        </div>
        <div style={{ marginTop: 16 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 7 }}>
            <span style={{ fontSize: 12.5, fontWeight: 700, color: "var(--ink-2)" }}>Использовано сайтов</span>
            <span className="tnum" style={{ fontSize: 12.5, fontWeight: 800 }}>6 / 10</span>
          </div>
          <div className="bar"><i style={{ width: "60%" }} /></div>
        </div>
      </SettingsCard>
    </>
  );
}

window.Settings = Settings;