/* ============================================================
   screen_aiseo.jsx — AI SEO / оптимизация для нейросетей (M14) ⭐
   ============================================================ */
function AISeo({ ctx }) {
  const site = DATA.sites.find(s => s.id === ctx.site);
  const [testing, setTesting] = React.useState(false);
  const [progress, setProgress] = React.useState(0);
  const tests = DATA.aiTests;
  const mentioned = tests.filter(t => t.mentioned).length;
  const trust = 58;

  function runTest() {
    setTesting(true); setProgress(0);
    const iv = setInterval(() => setProgress(p => {
      if (p >= 100) { clearInterval(iv); setTesting(false); return 100; }
      return p + 8;
    }), 140);
  }

  const modelLogo = (logo, color) => (
    <span style={{ width: 22, height: 22, borderRadius: 6, background: color, color: "#fff", fontSize: 9, fontWeight: 800, display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "0 0 22px" }}>{logo}</span>
  );
  const colorOf = (m) => DATA.aiModels.find(x => x.name === m)?.color || "#888";

  return (
    <div className="grid" style={{ gap: 18 }}>
      {/* hero */}
      <div className="card" style={{ overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "auto 1px 1fr auto", gap: 26, alignItems: "center", padding: "24px 26px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
            <Ring value={trust} size={108} stroke={10} color="var(--violet)">
              <span className="tnum" style={{ fontSize: 32, fontWeight: 800, letterSpacing: "-.03em", color: "var(--ink)" }}>{trust}</span>
              <span style={{ fontSize: 10.5, fontWeight: 700, color: "var(--ink-4)" }}>из 100</span>
            </Ring>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12.5, fontWeight: 700, color: "var(--violet-ink)" }}><Icon name="bot" size={15} />AI Trust Score</div>
              <div style={{ fontSize: 13, color: "var(--ink-3)", fontWeight: 600, marginTop: 4, maxWidth: 200, lineHeight: 1.4 }}>Насколько хорошо нейросети «понимают» и рекомендуют сайт</div>
              <div style={{ marginTop: 8 }}><span className="delta up tnum"><Icon name="arrow_up" size={13} />6 за месяц</span></div>
            </div>
          </div>
          <div style={{ background: "var(--border)", alignSelf: "stretch" }} />
          <div style={{ display: "flex", gap: 14 }}>
            <HeroStat big={mentioned + "/" + tests.length} label="Упоминаний в тестах" color="var(--green-ink)" />
            <HeroStat big="12" label="Упоминаний за месяц" sub="↑ с 7 в мае" color="var(--ink)" />
            <div style={{ display: "flex", flexDirection: "column", gap: 8, justifyContent: "center" }}>
              {DATA.aiModels.map(m => (
                <div key={m.name} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  {modelLogo(m.logo, m.color)}
                  <span style={{ fontSize: 12, fontWeight: 700, width: 56 }}>{m.name}</span>
                  <span style={{ width: 64, height: 6, borderRadius: 99, background: "var(--bg-sunken)", overflow: "hidden" }}><span style={{ display: "block", height: "100%", width: m.rate + "%", background: m.color, borderRadius: 99 }} /></span>
                  <span className="tnum" style={{ fontSize: 11.5, fontWeight: 800, color: "var(--ink-3)" }}>{m.rate}%</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, alignItems: "flex-end" }}>
            <button className="btn btn-primary" onClick={runTest} disabled={testing} style={{ background: testing ? "var(--ink-4)" : "var(--violet)" }}>
              <Icon name={testing ? "refresh" : "play"} size={16} />{testing ? `Тестируем… ${progress}%` : "Запустить тест сейчас"}
            </button>
            <span style={{ fontSize: 11.5, color: "var(--ink-4)", fontWeight: 600 }}>Последний тест: вчера</span>
          </div>
        </div>
        {testing && <div className="bar" style={{ height: 4, borderRadius: 0 }}><i style={{ width: progress + "%", background: "var(--violet)" }} /></div>}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 18, alignItems: "start" }}>
        {/* tests table */}
        <div className="card">
          <div className="card-head"><Icon name="message" size={16} style={{ color: "var(--violet)" }} /><h3>Тесты упоминаний</h3><div className="spacer" /><span style={{ fontSize: 11.5, color: "var(--ink-4)", fontWeight: 600 }}>что ответила нейросеть на запрос</span></div>
          <div>
            {tests.map((t, i) => (
              <div key={i} style={{ padding: "14px 18px", borderBottom: i === tests.length - 1 ? "none" : "1px solid var(--border)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
                  {modelLogo(t.logo, colorOf(t.model))}
                  <span style={{ fontSize: 13.5, fontWeight: 700, flex: 1 }}>«{t.query}»</span>
                  {t.mentioned
                    ? <span className="badge b-green"><Icon name="check_circle" size={12} />Упомянут · #{t.pos}</span>
                    : <span className="badge b-red"><Icon name="x" size={12} />Не упомянут</span>}
                </div>
                <div style={{ fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.5, fontStyle: "italic", paddingLeft: 32, borderLeft: `2px solid ${t.mentioned ? "var(--green)" : "var(--border-strong)"}`, marginLeft: 10 }}>
                  «{t.quote}»
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* right column */}
        <div className="grid" style={{ gap: 18 }}>
          <div className="card">
            <div className="card-head"><Icon name="eye" size={16} style={{ color: "var(--orange)" }} /><h3>Кого рекомендуют вместо вас</h3></div>
            <div style={{ padding: "6px 0" }}>
              {DATA.aiCompetitors.map((c, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 18px" }}>
                  <span style={{ width: 28, height: 28, borderRadius: 8, background: "var(--bg-sunken)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12.5, fontWeight: 800, color: "var(--ink-3)", flex: "0 0 28px" }}>{i + 1}</span>
                  <span style={{ fontSize: 13.5, fontWeight: 700, flex: 1 }}>{c.name}</span>
                  <span className="tnum" style={{ fontSize: 13, fontWeight: 800 }}>{c.mentions}</span>
                  <span style={{ fontSize: 11, color: "var(--ink-4)" }}>упом.</span>
                  <Delta value={c.trend} />
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head"><Icon name="check_circle" size={16} style={{ color: "var(--violet)" }} /><h3>Рост AI-видимости</h3><div className="spacer" /><span className="tnum" style={{ fontSize: 12, fontWeight: 800, color: "var(--ink-3)" }}>{DATA.aiChecklist.filter(c => c.done).length}/{DATA.aiChecklist.length}</span></div>
            <div style={{ padding: "8px 0" }}>
              {DATA.aiChecklist.map((c, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 11, padding: "9px 18px" }}>
                  <span style={{ color: c.done ? "var(--green)" : "var(--ink-4)" }}><Icon name={c.done ? "check_circle" : "plus"} size={18} /></span>
                  <span style={{ fontSize: 13, fontWeight: 600, flex: 1, color: c.done ? "var(--ink-3)" : "var(--ink)", textDecoration: c.done ? "line-through" : "none" }}>{c.t}</span>
                  {!c.done && <button className="btn btn-soft btn-sm" style={{ height: 26, padding: "0 9px", fontSize: 11.5 }}>Сделать</button>}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function HeroStat({ big, label, sub, color }) {
  return (
    <div style={{ minWidth: 96 }}>
      <div className="tnum" style={{ fontSize: 30, fontWeight: 800, letterSpacing: "-.03em", lineHeight: 1, color: color || "var(--ink)" }}>{big}</div>
      <div style={{ fontSize: 12, color: "var(--ink-3)", fontWeight: 600, marginTop: 6, lineHeight: 1.3 }}>{label}</div>
      {sub && <div style={{ fontSize: 11, color: "var(--green-ink)", fontWeight: 700, marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

window.AISeo = AISeo;