/* ============================================================
   screen_competitors.jsx — Анализ конкурентов (M4)
   ============================================================ */
function Competitors({ ctx }) {
  const site = DATA.sites.find(s => s.id === ctx.site);
  const [comp, setComp] = React.useState(0);
  const competitor = DATA.competitorsList[comp];

  return (
    <div className="grid" style={{ gap: 16 }}>
      {/* vs header */}
      <div className="card card-pad" style={{ display: "flex", alignItems: "center", gap: 20 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, flex: 1 }}>
          <Favicon site={site} size={40} radius={10} />
          <div><div style={{ fontSize: 15, fontWeight: 800 }}>{site.title}</div><div style={{ fontSize: 12, color: "var(--ink-4)", fontWeight: 600 }}>{site.domain}</div></div>
        </div>
        <span style={{ width: 40, height: 40, borderRadius: 999, background: "var(--bg-sunken)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 13, color: "var(--ink-3)" }}>VS</span>
        <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 12 }}>
          <div style={{ textAlign: "right" }}>
            <div style={{ fontSize: 15, fontWeight: 800 }}>{competitor.name}</div>
            <div style={{ fontSize: 12, color: "var(--ink-4)", fontWeight: 600 }}>{competitor.domain}</div>
          </div>
          <span style={{ width: 40, height: 40, borderRadius: 10, background: "#2A2A28", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, flex: "0 0 40px" }}><Icon name="eye" size={19} /></span>
        </div>
      </div>

      {/* competitor switch */}
      <div className="chips">
        {DATA.competitorsList.map((c, i) => <button key={i} className={"chip" + (comp === i ? " on" : "")} onClick={() => setComp(i)}>{c.name}</button>)}
        <button className="chip"><Icon name="plus" size={13} />Добавить конкурента</button>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, alignItems: "start" }}>
        {/* comparison table */}
        <div className="card">
          <div className="card-head"><Icon name="columns" size={16} style={{ color: "var(--accent)" }} /><h3>Сравнение «Мы vs Они»</h3></div>
          <table className="tbl">
            <thead><tr><th>Показатель</th><th className="num">Мы</th><th className="num">{competitor.name.split(" ")[0]}</th><th></th></tr></thead>
            <tbody>
              {DATA.compareRows.map((r, i) => (
                <tr key={i}>
                  <td style={{ fontWeight: 600, fontSize: 12.5 }}>{r.metric}</td>
                  <td className="num tnum" style={{ fontWeight: 800, color: r.better ? "var(--green-ink)" : "var(--ink)" }}>{r.us}</td>
                  <td className="num tnum" style={{ fontWeight: 800, color: !r.better ? "var(--red-ink)" : "var(--ink-3)" }}>{r.them}</td>
                  <td style={{ width: 32 }}>{r.better ? <Icon name="arrow_up" size={15} style={{ color: "var(--green)" }} /> : <Icon name="arrow_down" size={15} style={{ color: "var(--red)" }} />}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* white spots */}
        <div className="card">
          <div className="card-head"><Icon name="sparkles" size={16} style={{ color: "var(--accent)" }} /><h3>«Белые пятна» — идеи контента</h3></div>
          <div style={{ padding: "6px 0" }}>
            {DATA.whiteSpots.map((w, i) => (
              <div key={i} style={{ display: "flex", gap: 12, padding: "12px 18px", borderBottom: i === DATA.whiteSpots.length - 1 ? "none" : "1px solid var(--border)" }}>
                <span style={{ width: 30, height: 30, borderRadius: 8, background: "var(--accent-soft)", color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", flex: "0 0 30px" }}><Icon name="zap" size={15} /></span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 700 }}>{w.topic}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 2, lineHeight: 1.4 }}>{w.reason}</div>
                </div>
                <button className="btn btn-soft btn-sm" style={{ alignSelf: "center" }}>Написать</button>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* gap keywords */}
      <div className="card">
        <div className="card-head">
          <Icon name="target" size={16} style={{ color: "var(--orange)" }} />
          <h3>Ключи-пробелы — конкурент в топе, мы нет</h3>
          <div className="spacer" />
          <span style={{ fontSize: 12, color: "var(--ink-4)", fontWeight: 600 }}>{DATA.gapKeywords.length} упущенных ключей</span>
        </div>
        <table className="tbl">
          <thead><tr><th>Ключевое слово</th><th className="num">Вордстат</th><th className="num">Позиция конкурента</th><th className="num">Наша позиция</th><th></th></tr></thead>
          <tbody>
            {DATA.gapKeywords.map((k, i) => (
              <tr key={i}>
                <td style={{ fontWeight: 700, fontSize: 12.5 }}>{k.kw}</td>
                <td className="num tnum" style={{ fontWeight: 700 }}>{k.vol.toLocaleString("ru")}</td>
                <td className="num"><PosPill pos={k.themPos} /></td>
                <td className="num">{k.usPos ? <PosPill pos={k.usPos} /> : <span className="badge b-red" style={{ height: 20, fontSize: 10.5 }}>нет в топ-50</span>}</td>
                <td style={{ width: 130 }}><button className="btn btn-soft btn-sm"><Icon name="plus" size={13} />В работу</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.Competitors = Competitors;