/* ============================================================
   screen_links.jsx — Бэклинки (M8)
   ============================================================ */
function Links({ ctx }) {
  const [filter, setFilter] = React.useState("all");
  const links = DATA.backlinks;
  const active = links.filter(l => l.status === "active" || l.status === "new").length;
  const newCnt = links.filter(l => l.status === "new").length;
  const lost = links.filter(l => l.status === "lost").length;
  const donors = new Set(links.map(l => l.donor)).size;

  const shown = filter === "all" ? links : links.filter(l => filter === "active" ? (l.status === "active" || l.status === "new") : l.status === filter);

  return (
    <div className="grid" style={{ gap: 16 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16 }}>
        <StatCard num={active} label="Активных ссылок" />
        <StatCard num={donors} label="Доменов-доноров" />
        <StatCard num={newCnt} label="Новых за неделю" color="var(--green-ink)" />
        <StatCard num={lost} label="Потеряно за неделю" color="var(--red-ink)" />
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <div className="chips">
          {[["all", "Все"], ["active", "Активные"], ["new", "Новые"], ["lost", "Потерянные"]].map(([v, l]) =>
            <button key={v} className={"chip" + (filter === v ? " on" : "")} onClick={() => setFilter(v)}>{l}</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="info" size={13} />Источники: GSC + Яндекс.Вебмастер (бесплатно)</span>
      </div>

      <div className="card">
        <table className="tbl">
          <thead><tr><th>Домен-донор</th><th>Целевая страница</th><th>Анкор</th><th>Тип</th><th>Источник</th><th>Качество</th><th>Статус</th></tr></thead>
          <tbody>
            {shown.map((l, i) => (
              <tr key={i} style={{ opacity: l.status === "lost" ? .6 : 1 }}>
                <td><span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontWeight: 700, fontSize: 12.5 }}><Icon name="link" size={13} style={{ color: "var(--ink-4)" }} />{l.donor}</span></td>
                <td style={{ fontFamily: "ui-monospace, monospace", fontSize: 12, color: "var(--ink-3)", fontWeight: 600 }}>{l.target}</td>
                <td style={{ fontSize: 12.5, color: "var(--ink-2)" }}>«{l.anchor}»</td>
                <td><span className={"badge " + (l.type === "dofollow" ? "b-blue" : "b-gray")} style={{ height: 20, fontSize: 10.5 }}>{l.type}</span></td>
                <td style={{ fontSize: 12, color: "var(--ink-3)", fontWeight: 600 }}>{l.source}</td>
                <td><QualityDots q={l.quality} /></td>
                <td>
                  {l.status === "new" && <span className="badge b-green"><Icon name="plus" size={11} />новая</span>}
                  {l.status === "active" && <span className="badge b-gray">активна</span>}
                  {l.status === "lost" && <span className="badge b-red"><Icon name="link_off" size={11} />потеряна</span>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* AI ideas */}
      <div className="card">
        <div className="card-head"><Icon name="sparkles" size={16} style={{ color: "var(--accent)" }} /><h3>Где взять ссылки — рекомендации ИИ</h3><div className="spacer" /><button className="btn btn-soft btn-sm"><Icon name="send" size={14} />Сгенерировать письмо-просьбу</button></div>
        <div className="card-pad" style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 12 }}>
          {DATA.linkIdeas.map((idea, i) => (
            <div key={i} style={{ display: "flex", gap: 12, padding: 14, border: "1px solid var(--border)", borderRadius: 12, background: "var(--surface-2)" }}>
              <span style={{ width: 36, height: 36, borderRadius: 10, background: "var(--accent-soft)", color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", flex: "0 0 36px" }}><Icon name={idea.icon} size={18} /></span>
              <div>
                <div style={{ fontSize: 13, fontWeight: 800 }}>{idea.type}</div>
                <div style={{ fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.4, marginTop: 2 }}>{idea.text}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function QualityDots({ q }) {
  const n = q === "good" ? 3 : q === "mid" ? 2 : 1;
  const color = q === "good" ? "var(--green)" : q === "mid" ? "var(--yellow)" : "var(--ink-4)";
  return (
    <span style={{ display: "inline-flex", gap: 3 }}>
      {[0, 1, 2].map(i => <span key={i} style={{ width: 6, height: 12, borderRadius: 2, background: i < n ? color : "var(--bg-sunken)" }} />)}
    </span>
  );
}

window.Links = Links;