/* ============================================================
   screen_keywords.jsx — Ключевые слова (M3)
   Подбор (AI) → кластеры-карточки + сиротские ключи
   ============================================================ */
function Keywords({ ctx }) {
  const site = DATA.sites.find(s => s.id === ctx.site);
  const [seed, setSeed] = React.useState("");
  const [picking, setPicking] = React.useState(false);
  const [openCluster, setOpenCluster] = React.useState(null);
  const clusters = DATA.clusters;
  const totalKw = clusters.reduce((a, c) => a + c.count, 0);
  const orphan = clusters.filter(c => !c.pageOk);

  function pick() {
    if (!seed.trim()) return;
    setPicking(true);
    setTimeout(() => setPicking(false), 1700);
  }

  return (
    <div className="grid" style={{ gap: 16 }}>
      {/* picker */}
      <div className="card card-pad">
        <div style={{ display: "flex", gap: 12, alignItems: "flex-end" }}>
          <div className="field" style={{ flex: 1 }}>
            <label className="label">Основной ключ для подбора</label>
            <input className="input" placeholder="напр.: кухни на заказ" value={seed} onChange={e => setSeed(e.target.value)} onKeyDown={e => e.key === "Enter" && pick()} />
          </div>
          <button className="btn btn-primary" onClick={pick} disabled={picking} style={{ height: 40 }}>
            <Icon name={picking ? "refresh" : "sparkles"} size={16} />{picking ? "Подбираем…" : "Подобрать (AI + Вордстат)"}
          </button>
        </div>
        <div style={{ fontSize: 12, color: "var(--ink-4)", fontWeight: 600, marginTop: 10, display: "flex", alignItems: "center", gap: 6 }}>
          <Icon name="info" size={14} />ИИ сгенерирует 50–100 LSI-ключей, Вордстат подтянет реальные частотности по региону «{site.region}».
        </div>
      </div>

      {/* summary */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16 }}>
        <StatCard num={totalKw} label="Ключей в ядре" />
        <StatCard num={clusters.length} label="Кластеров" />
        <StatCard num={clusters.reduce((a, c) => a + c.top10, 0)} label="В топ-10" color="var(--green-ink)" />
        <StatCard num={orphan.length} label="Сиротских кластеров" color="var(--orange-ink)" sub="нет страницы" />
      </div>

      {/* orphan callout */}
      {orphan.length > 0 && (
        <div className="card card-pad" style={{ display: "flex", alignItems: "center", gap: 14, borderColor: "#F2DEC8", background: "var(--orange-soft)" }}>
          <span style={{ width: 40, height: 40, borderRadius: 11, background: "var(--orange)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", flex: "0 0 40px" }}><Icon name="alert_triangle" size={20} /></span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 800, color: "var(--orange-ink)" }}>Есть «сиротские» ключи без страницы</div>
            <div style={{ fontSize: 13, color: "var(--ink-2)", fontWeight: 500, marginTop: 2 }}>Кластер «{orphan[0].name}» ({orphan[0].vol.toLocaleString("ru")} показов/мес) не привязан ни к одной странице. Под него стоит создать страницу.</div>
          </div>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={14} />Создать задачу</button>
        </div>
      )}

      {/* clusters */}
      <div>
        <div style={{ display: "flex", alignItems: "center", marginBottom: 12 }}>
          <h2 className="section-title" style={{ margin: 0 }}>Семантические кластеры</h2>
          <div style={{ flex: 1 }} />
          <button className="btn btn-ghost btn-sm"><Icon name="download" size={14} />Экспорт в Excel</button>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 16 }}>
          {clusters.map((c, i) => <ClusterCard key={i} c={c} open={openCluster === i} onToggle={() => setOpenCluster(openCluster === i ? null : i)} />)}
        </div>
      </div>
    </div>
  );
}

function StatCard({ num, label, color, sub }) {
  return (
    <div className="card card-pad">
      <div className="tnum" style={{ fontSize: 30, fontWeight: 800, letterSpacing: "-.03em", color: color || "var(--ink)" }}>{num}</div>
      <div style={{ fontSize: 12.5, color: "var(--ink-3)", fontWeight: 600, marginTop: 4 }}>{label}</div>
      {sub && <div style={{ fontSize: 11.5, color: "var(--ink-4)", fontWeight: 600 }}>{sub}</div>}
    </div>
  );
}

function ClusterCard({ c, open, onToggle }) {
  const pct = Math.round((c.top10 / c.count) * 100);
  return (
    <div className="card" style={{ overflow: "hidden" }}>
      <div className="card-pad" style={{ cursor: "pointer" }} onClick={onToggle}>
        <div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
          <span style={{ width: 38, height: 38, borderRadius: 10, background: c.pageOk ? "var(--accent-soft)" : "var(--orange-soft)", color: c.pageOk ? "var(--accent)" : "var(--orange)", display: "flex", alignItems: "center", justifyContent: "center", flex: "0 0 38px" }}><Icon name="layers" size={19} /></span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 15, fontWeight: 800 }}>{c.name}</div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 4 }}>
              <IntentBadge intent={c.intent} />
              {c.pageOk
                ? <span style={{ fontFamily: "ui-monospace, monospace", fontSize: 12, color: "var(--ink-3)", fontWeight: 600 }}>{c.page}</span>
                : <span className="badge b-orange"><Icon name="alert_triangle" size={11} />нет страницы</span>}
            </div>
          </div>
          <span style={{ color: "var(--ink-4)", transform: open ? "rotate(90deg)" : "none", transition: "transform .18s" }}><Icon name="chevron_right" size={18} /></span>
        </div>
        <div style={{ display: "flex", gap: 18, marginTop: 14 }}>
          <Mini label="Ключей" value={c.count} />
          <Mini label="Вордстат" value={c.vol.toLocaleString("ru")} />
          <Mini label="В топ-10" value={`${c.top10}/${c.count}`} />
          <div style={{ flex: 1 }} />
        </div>
        <div className="bar" style={{ marginTop: 12, height: 6 }}><i style={{ width: pct + "%", background: pct >= 60 ? "var(--green)" : pct >= 30 ? "var(--yellow)" : "var(--orange)" }} /></div>
      </div>
      {open && (
        <div style={{ borderTop: "1px solid var(--border)" }}>
          <table className="tbl">
            <thead><tr><th>Ключ</th><th className="num">Вордстат</th><th className="num">Позиция</th><th>Сложность</th></tr></thead>
            <tbody>
              {c.kws.map((k, i) => (
                <tr key={i}>
                  <td style={{ fontWeight: 600, fontSize: 12.5 }}>{k.kw}</td>
                  <td className="num tnum" style={{ fontWeight: 700 }}>{k.vol.toLocaleString("ru")}</td>
                  <td className="num"><PosPill pos={k.g} /></td>
                  <td><DiffBadge d={k.diff} /></td>
                </tr>
              ))}
            </tbody>
          </table>
          {c.kws.length < c.count && <div style={{ padding: "10px 14px", fontSize: 12, color: "var(--ink-4)", fontWeight: 600 }}>+ ещё {c.count - c.kws.length} ключей в кластере</div>}
        </div>
      )}
    </div>
  );
}

function DiffBadge({ d }) {
  const map = { LOW: ["b-green", "низкая"], MEDIUM: ["b-yellow", "средняя"], HIGH: ["b-red", "высокая"] };
  const m = map[d] || map.MEDIUM;
  return <span className={"badge " + m[0]} style={{ height: 20, fontSize: 11 }}>{m[1]}</span>;
}

window.Keywords = Keywords;
window.StatCard = StatCard;
window.DiffBadge = DiffBadge;