/* ============================================================
   screen_reports.jsx — Отчёты для клиентов (M18)
   Конфиг + превью брендированного PDF
   ============================================================ */
function Reports({ ctx }) {
  const [siteId, setSiteId] = React.useState(ctx.activeSite === "all" ? DATA.report.site : ctx.site);
  const [period, setPeriod] = React.useState("Май 2026");
  const site = DATA.sites.find(s => s.id === siteId);
  const r = DATA.report;

  return (
    <div style={{ display: "grid", gridTemplateColumns: "300px 1fr", gap: 18, alignItems: "start" }}>
      {/* config */}
      <div className="card card-pad" style={{ position: "sticky", top: 0, display: "flex", flexDirection: "column", gap: 16 }}>
        <h3 style={{ margin: 0, fontSize: 15, fontWeight: 800 }}>Параметры отчёта</h3>
        <div className="field">
          <label className="label">Сайт</label>
          <select className="select" value={siteId} onChange={e => setSiteId(e.target.value)}>
            {DATA.sites.map(s => <option key={s.id} value={s.id}>{s.title}</option>)}
          </select>
        </div>
        <div className="field">
          <label className="label">Период</label>
          <select className="select" value={period} onChange={e => setPeriod(e.target.value)}>
            <option>Май 2026</option><option>Апрель 2026</option><option>1 квартал 2026</option>
          </select>
        </div>
        <div style={{ height: 1, background: "var(--border)" }} />
        <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
          <Toggle label="Динамика позиций" on />
          <Toggle label="Выполненные работы" on />
          <Toggle label="Графики до/после" on />
          <Toggle label="План на следующий месяц" on />
          <Toggle label="Сопроводительное письмо (ИИ)" />
        </div>
        <div style={{ height: 1, background: "var(--border)" }} />
        <button className="btn btn-primary btn-block"><Icon name="download" size={16} />Скачать PDF</button>
        <button className="btn btn-ghost btn-block btn-sm"><Icon name="download" size={14} />Экспорт в Excel</button>
      </div>

      {/* preview paper */}
      <div style={{ background: "var(--bg-sunken)", borderRadius: 16, padding: 28, display: "flex", justifyContent: "center" }}>
        <div style={{ width: "100%", maxWidth: 680, background: "#fff", boxShadow: "var(--sh-3)", borderRadius: 6, overflow: "hidden" }}>
          {/* branded header */}
          <div style={{ background: "linear-gradient(120deg, var(--accent), #1769b8)", color: "#fff", padding: "28px 36px", display: "flex", alignItems: "center", gap: 14 }}>
            <div style={{ width: 44, height: 44, borderRadius: 11, background: "rgba(255,255,255,.18)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 22, flex: "0 0 44px" }}>K</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, opacity: .85, letterSpacing: ".04em" }}>KANT STUDIO · SEO-ОТЧЁТ</div>
              <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-.01em", marginTop: 2 }}>{site.title}</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontSize: 12, opacity: .8 }}>Период</div>
              <div style={{ fontSize: 16, fontWeight: 800 }}>{period}</div>
            </div>
          </div>

          <div style={{ padding: "28px 36px", display: "flex", flexDirection: "column", gap: 26 }}>
            {/* metrics before/after */}
            <section>
              <ReportH>Результаты за период</ReportH>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 12, marginTop: 12 }}>
                {r.metrics.map((m, i) => {
                  const up = m.invert ? m.after < m.before : m.after > m.before;
                  return (
                    <div key={i} style={{ border: "1px solid var(--border)", borderRadius: 12, padding: "14px 16px" }}>
                      <div style={{ fontSize: 12, color: "var(--ink-3)", fontWeight: 600 }}>{m.label}</div>
                      <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginTop: 6 }}>
                        <span className="tnum" style={{ fontSize: 15, color: "var(--ink-4)", fontWeight: 700, textDecoration: "line-through" }}>{m.before.toLocaleString("ru")}</span>
                        <Icon name="arrow_right" size={14} style={{ color: "var(--ink-4)" }} />
                        <span className="tnum" style={{ fontSize: 24, fontWeight: 800, letterSpacing: "-.02em" }}>{m.after.toLocaleString("ru")}<span style={{ fontSize: 12, color: "var(--ink-4)", fontWeight: 600 }}>{m.unit}</span></span>
                        <span className={"delta tnum " + (up ? "up" : "down")} style={{ marginLeft: "auto" }}><Icon name={up ? "arrow_up" : "arrow_down"} size={13} /></span>
                      </div>
                    </div>
                  );
                })}
              </div>
            </section>

            {/* chart */}
            <section>
              <ReportH>Динамика позиций</ReportH>
              <div style={{ border: "1px solid var(--border)", borderRadius: 12, padding: "14px 14px 6px", marginTop: 12 }}>
                <LineChart series={[{ name: "Google", data: DATA.googleHistory, color: "var(--accent)" }, { name: "Яндекс", data: DATA.yandexHistory, color: "var(--green)" }]} updates={[]} height={150} />
              </div>
            </section>

            {/* works */}
            <section>
              <ReportH>Выполненные работы</ReportH>
              <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 12 }}>
                {r.works.map((w, i) => (
                  <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13, color: "var(--ink-2)" }}>
                    <Icon name="check_circle" size={16} style={{ color: "var(--green)", flex: "0 0 16px", marginTop: 1 }} />{w}
                  </div>
                ))}
              </div>
            </section>

            {/* plan */}
            <section>
              <ReportH>План на следующий месяц</ReportH>
              <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 12 }}>
                {r.plan.map((p, i) => (
                  <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13, color: "var(--ink-2)" }}>
                    <span style={{ width: 18, height: 18, borderRadius: 5, background: "var(--accent-soft)", color: "var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 800, flex: "0 0 18px", marginTop: 1 }}>{i + 1}</span>{p}
                  </div>
                ))}
              </div>
            </section>

            <div style={{ borderTop: "1px solid var(--border)", paddingTop: 16, display: "flex", alignItems: "center", gap: 8, fontSize: 11.5, color: "var(--ink-4)", fontWeight: 600 }}>
              <div style={{ width: 20, height: 20, borderRadius: 6, background: "var(--accent)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 11 }}>K</div>
              Kant Studio · Калининград · kant.studio · Отчёт сформирован автоматически
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ReportH({ children }) {
  return <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--accent)", borderBottom: "2px solid var(--accent-soft)", paddingBottom: 6 }}>{children}</div>;
}

function Toggle({ label, on: defaultOn }) {
  const [on, setOn] = React.useState(!!defaultOn);
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer" }} onClick={() => setOn(o => !o)}>
      <span style={{ width: 34, height: 20, borderRadius: 999, background: on ? "var(--accent)" : "var(--border-strong)", position: "relative", transition: "background .15s", flex: "0 0 34px" }}>
        <span style={{ position: "absolute", top: 2, left: on ? 16 : 2, width: 16, height: 16, borderRadius: 999, background: "#fff", transition: "left .15s", boxShadow: "var(--sh-1)" }} />
      </span>
      <span style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ink-2)" }}>{label}</span>
    </div>
  );
}

window.Reports = Reports;
window.Toggle = Toggle;