/* ============================================================
   screen_onboarding.jsx — Клиенты и сайты (M1) + Мастер добавления
   ============================================================ */
function Onboarding({ ctx }) {
  const [wizard, setWizard] = React.useState(false);

  // group sites by client
  const clients = {};
  DATA.sites.forEach(s => { (clients[s.client] = clients[s.client] || []).push(s); });

  return (
    <div className="grid" style={{ gap: 18 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <div style={{ display: "flex", gap: 18 }}>
          <Stat big={Object.keys(clients).length} label="клиентов" />
          <Stat big={DATA.sites.length} label="сайтов" />
          <Stat big={DATA.sites.filter(s => s.gsc).length} label="с подключённым GSC" />
        </div>
        <div style={{ flex: 1 }} />
        <button className="btn btn-primary" onClick={() => setWizard(true)}><Icon name="plus" size={16} />Добавить сайт</button>
      </div>

      {Object.entries(clients).map(([name, sites]) => (
        <div key={name}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
            <span style={{ width: 30, height: 30, borderRadius: 8, background: "var(--bg-sunken)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ink-3)" }}><Icon name="building" size={17} /></span>
            <h2 style={{ margin: 0, fontSize: 15, fontWeight: 800 }}>{name}</h2>
            <span className="badge b-gray">{sites.length} {plural(sites.length, "сайт", "сайта", "сайтов")}</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
            {sites.map(s => <SiteDetailCard key={s.id} s={s} onOpen={() => { ctx.setActiveSite(s.id); ctx.setRoute("audit"); }} />)}
          </div>
        </div>
      ))}

      {wizard && <AddSiteWizard onClose={() => setWizard(false)} />}
    </div>
  );
}

function Stat({ big, label }) {
  return (
    <div>
      <span className="tnum" style={{ fontSize: 24, fontWeight: 800, letterSpacing: "-.02em" }}>{big}</span>
      <span style={{ fontSize: 13, color: "var(--ink-3)", fontWeight: 600, marginLeft: 7 }}>{label}</span>
    </div>
  );
}

function IntegrationPill({ ok, label, icon }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11.5, fontWeight: 700, padding: "4px 9px", borderRadius: 8,
      background: ok ? "var(--green-soft)" : "var(--bg-sunken)", color: ok ? "var(--green-ink)" : "var(--ink-3)" }}>
      <Icon name={icon} size={13} />{label}
      {ok ? <Icon name="check_circle" size={13} /> : <span style={{ fontSize: 10.5, color: "var(--accent)", fontWeight: 800 }}>Подключить</span>}
    </span>
  );
}

function SiteDetailCard({ s, onOpen }) {
  return (
    <div className="card card-pad">
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
        <Favicon site={s} size={40} radius={10} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ fontSize: 15, fontWeight: 800 }}>{s.title}</span>
            {s.status === "redesign" && <span className="badge b-violet">редизайн</span>}
          </div>
          <div style={{ fontSize: 12.5, color: "var(--ink-4)", fontWeight: 600 }}>{s.domain}</div>
        </div>
        <Ring value={s.health} size={48} stroke={5} />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 14, fontSize: 12.5 }}>
        <Field label="Сфера" value={s.business} />
        <Field label="CMS" value={s.cms} />
        <Field label="Регион" value={s.region} />
        <Field label="Открытых задач" value={String(s.openTasks)} />
      </div>
      <div style={{ fontSize: 11, fontWeight: 700, color: "var(--ink-4)", textTransform: "uppercase", letterSpacing: ".04em", marginBottom: 8 }}>Интеграции</div>
      <div style={{ display: "flex", gap: 7, flexWrap: "wrap", marginBottom: 14 }}>
        <IntegrationPill ok={s.gsc} label="Search Console" icon="globe" />
        <IntegrationPill ok={s.wordstat} label="Вордстат" icon="search" />
        <IntegrationPill ok={s.webmaster} label="Вебмастер" icon="globe" />
        {s.cms === "WordPress" && <IntegrationPill ok={s.wp} label="WordPress" icon="wordpress" />}
      </div>
      <div style={{ display: "flex", gap: 8 }}>
        <button className="btn btn-ghost btn-sm" style={{ flex: 1 }} onClick={onOpen}><Icon name="stethoscope" size={14} />Аудит</button>
        <button className="btn btn-ghost btn-sm" style={{ flex: 1 }}><Icon name="settings" size={14} />Настройки</button>
      </div>
    </div>
  );
}

function Field({ label, value }) {
  return (
    <div>
      <div style={{ fontSize: 11, color: "var(--ink-4)", fontWeight: 700 }}>{label}</div>
      <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ink)", marginTop: 1 }}>{value}</div>
    </div>
  );
}

// ===== 3-step add-site wizard =====
function AddSiteWizard({ onClose }) {
  const [step, setStep] = React.useState(1);
  const [domain, setDomain] = React.useState("");
  const [biz, setBiz] = React.useState("");
  const [siteType, setSiteType] = React.useState("existing");
  const [gscState, setGscState] = React.useState("idle"); // idle | connecting | connected
  const [auditState, setAuditState] = React.useState("idle");
  const [auditPct, setAuditPct] = React.useState(0);

  function connectGsc() {
    setGscState("connecting");
    setTimeout(() => setGscState("connected"), 1800);
  }
  function startAudit() {
    setAuditState("scanning"); setAuditPct(0);
    const iv = setInterval(() => setAuditPct(p => { if (p >= 100) { clearInterval(iv); setAuditState("done"); return 100; } return p + 5; }), 130);
  }

  const steps = ["Данные сайта", "Подключение GSC", "Первый аудит"];

  return (
    <>
      <div className="scrim" onClick={onClose} />
      <div className="modal" style={{ width: 600 }}>
        {/* header with mini-stepper */}
        <div style={{ padding: "18px 24px 0" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
            <span style={{ width: 32, height: 32, borderRadius: 9, background: "var(--accent)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="rocket" size={18} /></span>
            <h3 style={{ margin: 0, fontSize: 16.5, fontWeight: 800 }}>Добавить новый сайт</h3>
            <div style={{ flex: 1 }} /><button className="icon-btn" onClick={onClose}><Icon name="x" size={16} /></button>
          </div>
          <div style={{ display: "flex", gap: 8, marginBottom: 4 }}>
            {steps.map((s, i) => (
              <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", gap: 6 }}>
                <div style={{ height: 4, borderRadius: 99, background: step > i ? "var(--accent)" : "var(--bg-sunken)", transition: "background .3s" }} />
                <span style={{ fontSize: 11.5, fontWeight: 700, color: step === i + 1 ? "var(--accent-ink)" : "var(--ink-4)" }}>{i + 1}. {s}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{ padding: "20px 24px 24px" }}>
          {step === 1 && (
            <div style={{ display: "flex", flexDirection: "column", gap: 15 }}>
              <div className="field"><label className="label">Адрес сайта</label><input className="input" placeholder="example.ru" value={domain} onChange={e => setDomain(e.target.value)} autoFocus /></div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                <div className="field"><label className="label">Сфера бизнеса</label><input className="input" placeholder="Напр.: автосервис" value={biz} onChange={e => setBiz(e.target.value)} /></div>
                <div className="field"><label className="label">Целевой регион</label><input className="input" placeholder="Калининград" /></div>
              </div>
              <div className="field">
                <label className="label">Тип сайта</label>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10 }}>
                  {[["new", "Новый проект", "rocket"], ["existing", "Существующий", "globe"], ["redesign", "На редизайне", "pencil_ruler"]].map(([v, l, ic]) => (
                    <button key={v} onClick={() => setSiteType(v)} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 7, padding: "14px 8px", borderRadius: 12, cursor: "pointer",
                      border: `1.5px solid ${siteType === v ? "var(--accent)" : "var(--border-strong)"}`, background: siteType === v ? "var(--accent-softer)" : "var(--surface)" }}>
                      <Icon name={ic} size={20} style={{ color: siteType === v ? "var(--accent)" : "var(--ink-3)" }} />
                      <span style={{ fontSize: 12, fontWeight: 700, color: siteType === v ? "var(--accent-ink)" : "var(--ink-2)" }}>{l}</span>
                    </button>
                  ))}
                </div>
                {siteType === "redesign" && <span style={{ fontSize: 12, color: "var(--violet-ink)", fontWeight: 600, marginTop: 6, display: "flex", gap: 6, alignItems: "center" }}><Icon name="info" size={14} />Включится модуль SEO-миграции для сохранения позиций.</span>}
              </div>
            </div>
          )}

          {step === 2 && (
            <div>
              <p style={{ fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.55, margin: "0 0 16px" }}>Google Search Console — бесплатный источник позиций и запросов. Подключим за пару кликов.</p>
              <div style={{ display: "flex", gap: 14 }}>
                <ol style={{ flex: 1, margin: 0, paddingLeft: 18, display: "flex", flexDirection: "column", gap: 10, fontSize: 13, color: "var(--ink-2)", lineHeight: 1.45 }}>
                  <li>Нажмите «Войти через Google» ниже.</li>
                  <li>Выберите аккаунт, где подтверждён сайт.</li>
                  <li>Разрешите доступ к данным Search Console.</li>
                </ol>
                <div style={{ flex: "0 0 200px", background: "var(--bg-sunken)", borderRadius: 12, border: "1px solid var(--border)", padding: 12, display: "flex", flexDirection: "column", gap: 8 }}>
                  <span style={{ fontSize: 10.5, fontWeight: 700, color: "var(--ink-4)", textTransform: "uppercase" }}>Как это выглядит</span>
                  <div style={{ height: 8, width: "70%", borderRadius: 4, background: "#D8D4CD" }} />
                  <div style={{ height: 28, borderRadius: 6, background: "var(--surface)", border: "1px solid var(--border-strong)", display: "flex", alignItems: "center", gap: 6, padding: "0 8px" }}>
                    <span style={{ width: 14, height: 14, borderRadius: 99, background: "linear-gradient(135deg,#4285F4,#EA4335)" }} /><span style={{ fontSize: 10, color: "var(--ink-3)", fontWeight: 600 }}>account@gmail.com</span>
                  </div>
                  <div style={{ height: 8, width: "90%", borderRadius: 4, background: "#E4E0D9" }} />
                  <div style={{ height: 8, width: "50%", borderRadius: 4, background: "#E4E0D9" }} />
                </div>
              </div>
              <div style={{ marginTop: 18 }}>
                {gscState === "connected" ? (
                  <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "12px 14px", background: "var(--green-soft)", borderRadius: 12, color: "var(--green-ink)", fontWeight: 700, fontSize: 13.5 }}>
                    <Icon name="check_circle" size={18} />Search Console подключён · найдено 6 подтверждённых ресурсов
                  </div>
                ) : (
                  <button className="btn btn-ghost btn-block btn-lg" onClick={connectGsc} disabled={gscState === "connecting"} style={{ borderColor: "var(--border-strong)" }}>
                    {gscState === "connecting" ? <><Icon name="refresh" size={16} />Подключаем…</> : <><span style={{ width: 18, height: 18, borderRadius: 99, background: "conic-gradient(from -45deg,#EA4335,#FBBC05,#34A853,#4285F4,#EA4335)" }} />Войти через Google</>}
                  </button>
                )}
                <button className="btn btn-block btn-sm" style={{ marginTop: 8, color: "var(--ink-4)", background: "none" }}>Пропустить — подключу позже</button>
              </div>
            </div>
          )}

          {step === 3 && (
            <div>
              {auditState === "idle" && (
                <div className="empty" style={{ padding: "20px 10px 8px" }}>
                  <span className="ic"><Icon name="stethoscope" /></span>
                  <h3>Запустим первый аудит</h3>
                  <p>Просканируем сайт, оценим Health Score и сразу создадим задачи на исправление. Это база для дальнейшей работы.</p>
                  <button className="btn btn-primary btn-lg" onClick={startAudit}><Icon name="play" size={16} />Запустить первый аудит</button>
                </div>
              )}
              {auditState === "scanning" && (
                <div style={{ padding: "20px 0" }}>
                  <div style={{ textAlign: "center", marginBottom: 18 }}>
                    <Ring value={auditPct} size={120} stroke={11} color="var(--accent)" />
                    <div style={{ fontSize: 14, fontWeight: 700, marginTop: 12 }}>Сканируем {domain || "сайт"}…</div>
                    <div style={{ fontSize: 12.5, color: "var(--ink-4)", fontWeight: 600 }}>Проверяем страницы и формируем задачи</div>
                  </div>
                </div>
              )}
              {auditState === "done" && (
                <div className="empty" style={{ padding: "10px 10px 0" }}>
                  <span className="ic" style={{ background: "var(--green-soft)", color: "var(--green)" }}><Icon name="thumbs_up" /></span>
                  <h3>Готово! Сайт добавлен 🎉</h3>
                  <p>Health Score: <b>67/100</b>. Создано <b>9 задач</b>, из них 2 критичных. Можно приступать к работе.</p>
                  <button className="btn btn-primary btn-lg" onClick={onClose}>Перейти к сайту<Icon name="arrow_right" size={16} /></button>
                </div>
              )}
            </div>
          )}
        </div>

        {/* footer nav */}
        {!(step === 3 && auditState !== "idle") && (
          <div style={{ display: "flex", gap: 10, justifyContent: "space-between", padding: "14px 24px", borderTop: "1px solid var(--border)", background: "var(--surface-2)" }}>
            {step > 1 ? <button className="btn btn-ghost" onClick={() => setStep(step - 1)}><Icon name="chevron_left" size={16} />Назад</button> : <button className="btn btn-ghost" onClick={onClose}>Отмена</button>}
            {step < 3 && <button className="btn btn-primary" onClick={() => setStep(step + 1)} disabled={step === 1 && !domain}>Далее<Icon name="arrow_right" size={16} /></button>}
          </div>
        )}
      </div>
    </>
  );
}

window.Onboarding = Onboarding;