/* ============================================================
   screen_onpage.jsx — On-Page оптимизатор (M6)
   Ввод URL → SEO-score + чек-лист по группам
   ============================================================ */
function OnPage({ ctx }) {
  const site = DATA.sites.find(s => s.id === ctx.site);
  const op = DATA.onpage;
  const [analyzed, setAnalyzed] = React.useState(true);
  const [scanning, setScanning] = React.useState(false);
  const [url, setUrl] = React.useState(op.url);

  const allItems = op.groups.flatMap(g => g.items);
  const counts = {
    important: allItems.filter(i => i.status === "important").length,
    minor: allItems.filter(i => i.status === "minor").length,
    good: allItems.filter(i => i.status === "good").length,
  };

  function analyze() {
    setScanning(true); setAnalyzed(false);
    setTimeout(() => { setScanning(false); setAnalyzed(true); }, 1500);
  }

  return (
    <div className="grid" style={{ gap: 16 }}>
      {/* url bar */}
      <div className="card card-pad">
        <div style={{ display: "flex", gap: 12, alignItems: "flex-end" }}>
          <div className="field" style={{ flex: 1 }}>
            <label className="label">URL страницы для анализа</label>
            <div style={{ display: "flex", alignItems: "center", gap: 8, border: "1px solid var(--border-strong)", borderRadius: "var(--r)", padding: "0 12px", height: 40, background: "var(--surface)" }}>
              <span style={{ fontSize: 13, color: "var(--ink-4)", fontWeight: 600 }}>{site.domain}</span>
              <input value={url} onChange={e => setUrl(e.target.value)} style={{ border: "none", outline: "none", flex: 1, fontSize: 13.5, fontWeight: 600, fontFamily: "ui-monospace, monospace", background: "transparent" }} />
            </div>
          </div>
          <button className="btn btn-primary" onClick={analyze} disabled={scanning} style={{ height: 40 }}>
            <Icon name={scanning ? "refresh" : "wrench"} size={16} />{scanning ? "Анализируем…" : "Анализировать"}
          </button>
        </div>
      </div>

      {scanning && <div className="card card-pad" style={{ display: "flex", flexDirection: "column", gap: 10 }}>{[80, 60, 70, 50, 65].map((w, i) => <span key={i} className="skel" style={{ height: 16, width: w + "%" }} />)}</div>}

      {analyzed && !scanning && (
        <div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: 16, alignItems: "start" }}>
          {/* score panel */}
          <div className="card card-pad" style={{ position: "sticky", top: 0, textAlign: "center" }}>
            <Ring value={op.score} size={120} stroke={11} color="var(--accent)" label="SEO-score" />
            <div style={{ fontSize: 14, fontWeight: 800, marginTop: 12 }}>{op.score >= 80 ? "Хорошая страница" : "Можно улучшить"}</div>
            <div style={{ fontFamily: "ui-monospace, monospace", fontSize: 12, color: "var(--ink-4)", fontWeight: 600, marginTop: 4 }}>{site.domain}{op.url}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 18, textAlign: "left" }}>
              <ScoreRow color="var(--orange)" label="Важно исправить" n={counts.important} />
              <ScoreRow color="var(--yellow)" label="Желательно" n={counts.minor} />
              <ScoreRow color="var(--green)" label="В порядке" n={counts.good} />
            </div>
            <button className="btn btn-primary btn-block btn-sm" style={{ marginTop: 18 }}><Icon name="plus" size={14} />Создать задачи из проблем</button>
          </div>

          {/* checklist */}
          <div className="grid" style={{ gap: 14 }}>
            {op.groups.map((g, gi) => (
              <div key={gi} className="card">
                <div className="card-head">
                  <h3>{g.name}</h3>
                  {g.yandex && <span className="badge b-red" style={{ marginLeft: 4 }}><Icon name="target" size={11} />фактор Яндекса</span>}
                  <div className="spacer" />
                  <GroupStatus items={g.items} />
                </div>
                <div>
                  {g.items.map((it, i) => <OnPageItem key={i} it={it} last={i === g.items.length - 1} />)}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function ScoreRow({ color, label, n }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
      <span className="dot" style={{ background: color }} />
      <span style={{ fontSize: 12.5, color: "var(--ink-2)", fontWeight: 600, flex: 1 }}>{label}</span>
      <span className="tnum" style={{ fontWeight: 800, fontSize: 14 }}>{n}</span>
    </div>
  );
}

function GroupStatus({ items }) {
  const bad = items.filter(i => i.status === "important").length;
  const warn = items.filter(i => i.status === "minor").length;
  if (bad) return <span className="badge b-orange">{bad} важных</span>;
  if (warn) return <span className="badge b-yellow">{warn} мелких</span>;
  return <span className="badge b-green"><Icon name="check_circle" size={12} />ок</span>;
}

function OnPageItem({ it, last }) {
  const m = severityMeta[it.status === "important" ? "important" : it.status === "minor" ? "minor" : "good"];
  return (
    <div style={{ display: "flex", gap: 13, padding: "13px 18px", borderBottom: last ? "none" : "1px solid var(--border)" }}>
      <span style={{ color: m.color, marginTop: 1, flex: "0 0 auto" }}><Icon name={it.status === "good" ? "check_circle" : it.status === "important" ? "alert_octagon" : "alert_triangle"} size={18} /></span>
      <div style={{ flex: 1 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ fontSize: 13.5, fontWeight: 700 }}>{it.label}</span>
          <span style={{ fontSize: 12.5, color: "var(--ink-3)", fontWeight: 600 }}>{it.value}</span>
        </div>
        {it.note && <div style={{ fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.45, marginTop: 4 }}>{it.note}</div>}
        {it.fix && <div style={{ marginTop: 8, background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: 8, padding: "8px 11px", fontFamily: "ui-monospace, monospace", fontSize: 12, color: "var(--ink)", display: "flex", alignItems: "center", gap: 8 }}>
          <Icon name="code" size={13} style={{ color: "var(--accent)", flex: "0 0 13px" }} /><span style={{ flex: 1 }}>{it.fix}</span>
        </div>}
        {it.ai && <button className="btn btn-soft btn-sm" style={{ marginTop: 9 }}><Icon name="sparkles" size={13} />Сгенерировать alt через ИИ</button>}
      </div>
    </div>
  );
}

window.OnPage = OnPage;