/* ============================================================
   screen_positions.jsx — Позиции и индексация (M11)
   ============================================================ */
function Positions({ ctx }) {
  const [bucket, setBucket] = React.useState("all");
  const [dir, setDir] = React.useState("all");
  const [open, setOpen] = React.useState(null);
  const kws = DATA.keywords;

  const inBucket = (g) => bucket === "all" || (bucket === "top3" && g <= 3) || (bucket === "top10" && g <= 10) || (bucket === "top30" && g <= 30) || (bucket === "below" && g > 30);
  const inDir = (d) => dir === "all" || (dir === "up" && d > 0) || (dir === "down" && d < 0);
  const shown = kws.filter(k => inBucket(k.g) && inDir(k.dg));

  const dist = [
    { label: "Топ-3", value: kws.filter(k => k.g <= 3).length, color: "var(--green)" },
    { label: "Топ-4–10", value: kws.filter(k => k.g > 3 && k.g <= 10).length, color: "#5BB98B" },
    { label: "Топ-11–30", value: kws.filter(k => k.g > 10 && k.g <= 30).length, color: "var(--yellow)" },
    { label: "Ниже 30", value: kws.filter(k => k.g > 30).length, color: "var(--ink-4)" },
  ];

  return (
    <div className="grid" style={{ gap: 16 }}>
      {/* summary cards */}
      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr", gap: 16 }}>
        <div className="card card-pad">
          <div style={{ display: "flex", alignItems: "center", marginBottom: 14 }}>
            <span className="metric-label">Распределение по топам</span>
            <div style={{ flex: 1 }} />
            <span className="tnum" style={{ fontSize: 13, fontWeight: 800 }}>{kws.length} ключей</span>
          </div>
          <StackedBar segments={dist} height={16} />
          <div style={{ display: "flex", gap: 16, marginTop: 14, flexWrap: "wrap" }}>
            {dist.map((d, i) => (
              <span key={i} style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, fontWeight: 700, color: "var(--ink-2)" }}>
                <span className="dot" style={{ background: d.color }} />{d.label}<span className="tnum" style={{ color: "var(--ink-4)" }}>{d.value}</span>
              </span>
            ))}
          </div>
        </div>
        <div className="card card-pad">
          <span className="metric-label">Выросли за неделю</span>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 8 }}>
            <span className="metric-num tnum" style={{ color: "var(--green-ink)" }}>{kws.filter(k => k.dg > 0).length}</span>
            <span className="delta up tnum"><Icon name="arrow_up" size={14} />ключей</span>
          </div>
          <div style={{ marginTop: 12 }}><Sparkline data={[5,6,5,7,6,8,7,9]} width={150} height={26} color="var(--green)" /></div>
        </div>
        <div className="card card-pad">
          <span className="metric-label">Просели за неделю</span>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 8 }}>
            <span className="metric-num tnum" style={{ color: "var(--red-ink)" }}>{kws.filter(k => k.dg < 0).length}</span>
            <span className="delta down tnum"><Icon name="arrow_down" size={14} />ключей</span>
          </div>
          <div style={{ marginTop: 12 }}><Sparkline data={[4,3,4,3,2,3,2,3]} width={150} height={26} color="var(--red)" /></div>
        </div>
      </div>

      {/* filters */}
      <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
        <div className="chips">
          {[["all", "Все"], ["top3", "Топ-3"], ["top10", "Топ-10"], ["top30", "Топ-30"], ["below", "Ниже 30"]].map(([v, l]) =>
            <button key={v} className={"chip" + (bucket === v ? " on" : "")} onClick={() => setBucket(v)}>{l}</button>)}
        </div>
        <div style={{ width: 1, height: 24, background: "var(--border)" }} />
        <div className="chips">
          <button className={"chip" + (dir === "up" ? " on" : "")} onClick={() => setDir(dir === "up" ? "all" : "up")}><Icon name="arrow_up" size={13} />Рост</button>
          <button className={"chip" + (dir === "down" ? " on" : "")} onClick={() => setDir(dir === "down" ? "all" : "down")}><Icon name="arrow_down" size={13} />Падение</button>
        </div>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 11.5, color: "var(--ink-4)", fontWeight: 700, display: "flex", alignItems: "center", gap: 5 }}><Icon name="refresh" size={13} />Обновлено сегодня · GSC + Яндекс XML</span>
      </div>

      {/* table */}
      <div className="card">
        <table className="tbl">
          <thead>
            <tr>
              <th>Ключевое слово</th>
              <th className="num">Вордстат <Help>Реальная частотность запроса по данным Яндекс.Вордстат за месяц.</Help></th>
              <th>Интент</th>
              <th className="num">Google</th>
              <th className="num">Δ</th>
              <th className="num">Яндекс</th>
              <th className="num">Δ</th>
              <th>Целевая страница</th>
              <th>Тренд</th>
            </tr>
          </thead>
          <tbody>
            {shown.map((k, i) => (
              <tr key={i} className="clickable" onClick={() => setOpen(k)}>
                <td style={{ fontWeight: 700, maxWidth: 230 }}>{k.kw}</td>
                <td className="num tnum" style={{ fontWeight: 700 }}>{k.vol.toLocaleString("ru")}</td>
                <td><IntentBadge intent={k.intent} /></td>
                <td className="num"><PosPill pos={k.g} /></td>
                <td className="num"><Delta value={k.dg} invert /></td>
                <td className="num"><PosPill pos={k.y} /></td>
                <td className="num"><Delta value={k.dy} invert /></td>
                <td><span style={{ fontFamily: "ui-monospace, monospace", fontSize: 12, color: "var(--ink-3)", fontWeight: 600 }}>{k.url}</span></td>
                <td><Sparkline data={k.spark.map(v => 30 - v)} width={72} height={24} /></td>
              </tr>
            ))}
          </tbody>
        </table>
        {shown.length === 0 && <div style={{ padding: 36, textAlign: "center", color: "var(--ink-3)" }}>Нет ключей под выбранные фильтры</div>}
      </div>

      {open && <KeywordDrawer k={open} onClose={() => setOpen(null)} />}
    </div>
  );
}

function PosPill({ pos }) {
  const color = pos <= 3 ? "var(--green)" : pos <= 10 ? "#5BB98B" : pos <= 30 ? "var(--yellow)" : "var(--ink-4)";
  const bg = pos <= 3 ? "var(--green-soft)" : pos <= 10 ? "#E9F5EE" : pos <= 30 ? "var(--yellow-soft)" : "var(--bg-sunken)";
  return <span className="tnum" style={{ display: "inline-block", minWidth: 30, padding: "2px 8px", borderRadius: 7, background: bg, color, fontWeight: 800, fontSize: 13 }}>{pos}</span>;
}

function IntentBadge({ intent }) {
  const map = { "Коммерческий": "b-blue", "Информационный": "b-violet", "Транзакционный": "b-green", "Навигационный": "b-gray" };
  return <span className={"badge " + (map[intent] || "b-gray")} style={{ height: 20, fontSize: 11 }}>{intent}</span>;
}

function KeywordDrawer({ k, onClose }) {
  // synth 30-day history for google & yandex around current pos
  const g = [], y = [];
  let gv = k.g + (k.dg > 0 ? 4 : -2), yv = k.y + (k.dy > 0 ? 3 : -1);
  for (let i = 0; i < 30; i++) {
    gv += (k.g - gv) * 0.12 + Math.sin(i) * 0.6; yv += (k.y - yv) * 0.12 + Math.cos(i) * 0.5;
    g.push(Math.max(1, Math.round(gv))); y.push(Math.max(1, Math.round(yv)));
  }
  g[29] = k.g; y[29] = k.y;
  return (
    <>
      <div className="scrim" onClick={onClose} />
      <aside className="drawer" style={{ width: 560 }}>
        <div className="drawer-head">
          <Icon name="trending" size={18} style={{ color: "var(--accent)" }} />
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 800 }}>История позиций</h3>
          <div style={{ flex: 1 }} /><button className="icon-btn" onClick={onClose}><Icon name="x" size={16} /></button>
        </div>
        <div className="drawer-body">
          <h2 style={{ margin: "0 0 6px", fontSize: 19, fontWeight: 800, letterSpacing: "-.01em" }}>{k.kw}</h2>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 18 }}>
            <span className="badge b-gray">Вордстат {k.vol.toLocaleString("ru")}</span>
            <IntentBadge intent={k.intent} />
            <span className="badge b-gray">Конкуренция {k.diff}</span>
            <span className="badge b-gray" style={{ fontFamily: "ui-monospace, monospace" }}>{k.url}</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 18 }}>
            <PosStat label="Google" pos={k.g} delta={k.dg} color="var(--accent)" />
            <PosStat label="Яндекс" pos={k.y} delta={k.dy} color="var(--green)" />
          </div>
          <div className="card card-pad">
            <div style={{ display: "flex", alignItems: "center", marginBottom: 10 }}>
              <span style={{ fontSize: 12.5, fontWeight: 800 }}>30 дней</span>
              <div style={{ flex: 1 }} />
              <Legend items={[{ c: "var(--accent)", l: "Google" }, { c: "var(--green)", l: "Яндекс" }]} />
            </div>
            <LineChart series={[{ name: "Google", data: g, color: "var(--accent)" }, { name: "Яндекс", data: y, color: "var(--green)" }]} updates={[{ day: 8 }]} height={200} maxY={Math.max(...g, ...y) + 3} />
          </div>
          <div style={{ marginTop: 16, padding: "12px 14px", background: "var(--accent-softer)", borderRadius: 12, fontSize: 13, color: "var(--accent-ink)", fontWeight: 600, display: "flex", gap: 9, alignItems: "flex-start" }}>
            <Icon name="info" size={16} style={{ marginTop: 1, flex: "0 0 16px" }} />
            {k.dg > 0 ? "Ключ растёт. Дожать до топ-3 поможет наращивание контента и внутренних ссылок на целевую страницу." : "Ключ просел после апдейта Google. Проверьте свежесть контента и отсутствие технических ошибок на странице."}
          </div>
        </div>
      </aside>
    </>
  );
}

function PosStat({ label, pos, delta, color }) {
  return (
    <div className="card card-pad" style={{ padding: 14 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }}>
        <span style={{ width: 10, height: 10, borderRadius: 3, background: color }} />
        <span style={{ fontSize: 12.5, fontWeight: 700, color: "var(--ink-2)" }}>{label}</span>
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
        <span className="tnum" style={{ fontSize: 30, fontWeight: 800, letterSpacing: "-.03em" }}>{pos}</span>
        <Delta value={delta} invert suffix=" поз." />
      </div>
    </div>
  );
}

window.Positions = Positions;
window.Legend = window.Legend || function Legend({ items }) {
  return <div style={{ display: "flex", gap: 14 }}>{items.map((it, i) => <span key={i} style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, fontWeight: 700, color: "var(--ink-2)" }}><span style={{ width: 14, height: 3, borderRadius: 2, background: it.c }} />{it.l}</span>)}</div>;
};