/* MC Control — Mission Control deck:
   - Live "Months in Orbit" radar with milestones
   - Monthly delivery panel with rotating "current report" preview
   - Keywords as flight strips climbing the chart */

function MCControl() {
  const C = window.CLIENT_DATA;
  const [activeMonth, setActiveMonth] = useState(0);

  return (
    <section className="mc-section">
      <div className="mc-container">
        <Reveal><div className="mc-eyebrow">Kontrollrum · efter lansering</div></Reveal>
        <Reveal delay={0.05}>
          <h2 className="mc-h2" style={{ marginTop: 18, maxWidth: 920 }}>
            Vi slutar inte vid lansering.<br/>
            <span className="mc-grad">Vi sätter sajten i bana</span> — och håller den där.
          </h2>
        </Reveal>
        <Reveal delay={0.1}>
          <p style={{ fontSize: 17, color: "#A3A3A3", maxWidth: 640, marginTop: 18, lineHeight: 1.6 }}>
            Varje månad förbättrar vi sajten och skickar er en rapport. Här är en levande karta över de första sex månaderna i bana.
          </p>
        </Reveal>

        {/* Mission timeline */}
        <div className="mc-stack-mobile" style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
          <Reveal delay={0.15}>
            <div className="mc-panel mc-panel-bracket" style={{ padding: 24 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
                <span className="mono" style={{ fontSize: 11, color: "#737373", letterSpacing: ".15em", textTransform: "uppercase" }}>
                  ▸ Tidslinje efter lansering
                </span>
                <span className="mc-tag ok">pågår</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                {C.monthlyTimeline.map((m, i) => (
                  <button key={i} onClick={() => setActiveMonth(i)} style={{
                    display: "grid", gridTemplateColumns: "44px 1fr auto", gap: 14, alignItems: "center",
                    padding: "12px 14px", borderRadius: 10,
                    background: activeMonth === i ? "rgba(230,57,70,.08)" : "rgba(255,255,255,.02)",
                    border: `1px solid ${activeMonth === i ? "rgba(230,57,70,.3)" : "rgba(255,255,255,.05)"}`,
                    cursor: "pointer", textAlign: "left", color: "#fff",
                    transition: "all .25s",
                  }}>
                    <div style={{
                      width: 36, height: 36, borderRadius: 8,
                      background: activeMonth === i ? "linear-gradient(135deg,#E63946,#FF6B6B)" : "rgba(255,255,255,.04)",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      fontFamily: "ui-monospace, Menlo, monospace", fontSize: 12, fontWeight: 700,
                      color: activeMonth === i ? "#fff" : "#737373",
                    }}>
                      M{i+1}
                    </div>
                    <div>
                      <div style={{ fontSize: 14.5, fontWeight: 600, color: "#fff" }}>{m.title}</div>
                      <div className="mono" style={{ fontSize: 11, color: "#737373", marginTop: 2 }}>{m.month} · {m.items.length} åtgärder</div>
                    </div>
                    <div style={{ color: activeMonth === i ? "#FF6B6B" : "#525252", fontSize: 14 }}>
                      {activeMonth === i ? "●" : "→"}
                    </div>
                  </button>
                ))}
              </div>
            </div>
          </Reveal>

          {/* Active month dossier */}
          <Reveal delay={0.2}>
            <div className="mc-panel mc-panel-bracket mc-no-sticky-mobile" style={{ padding: 0, overflow: "hidden", position: "sticky", top: 80 }}>
              <div style={{ padding: "16px 20px", borderBottom: "1px solid rgba(255,255,255,.06)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span className="mono" style={{ fontSize: 11, color: "#FF6B6B", letterSpacing: ".15em", textTransform: "uppercase" }}>
                  ▸ Månadsrapport · {C.monthlyTimeline[activeMonth].month}
                </span>
                <span className="mc-tag ok">levererad</span>
              </div>
              <div style={{ padding: 24 }} key={activeMonth}>
                <div style={{ animation: "fadeUp .4s" }}>
                  <h3 style={{ fontFamily: "Bricolage Grotesque", fontWeight: 700, fontSize: 26, color: "#fff", margin: 0, letterSpacing: "-.02em" }}>
                    {C.monthlyTimeline[activeMonth].title}
                  </h3>
                  <ul style={{ margin: "20px 0 0", padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
                    {C.monthlyTimeline[activeMonth].items.map((it, j) => (
                      <li key={j} style={{ display: "flex", gap: 12, fontSize: 14, color: "#D4D4D4", lineHeight: 1.55 }}>
                        <span style={{
                          flexShrink: 0, width: 22, height: 22, borderRadius: 6,
                          background: "rgba(16,185,129,.12)", color: "#10B981",
                          display: "inline-flex", alignItems: "center", justifyContent: "center",
                          fontSize: 11, fontWeight: 700,
                          fontFamily: "ui-monospace, Menlo, monospace",
                        }}>✓</span>
                        {it}
                      </li>
                    ))}
                  </ul>

                  {/* Mini stats */}
                  <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}>
                    {[
                      { l: "Trafik", v: `+${15 + activeMonth * 8}%`, c: "#10B981" },
                      { l: "Topp 10", v: `+${activeMonth + 1}`, c: "#FF6B6B" },
                      { l: "Fix", v: C.monthlyTimeline[activeMonth].items.length, c: "#F59E0B" },
                    ].map((s, i) => (
                      <div key={i} style={{ padding: "10px 12px", borderRadius: 8, background: "rgba(255,255,255,.025)", border: "1px solid rgba(255,255,255,.05)" }}>
                        <div className="mono" style={{ fontSize: 10, color: "#737373", letterSpacing: ".1em", textTransform: "uppercase" }}>{s.l}</div>
                        <div style={{ fontFamily: "Bricolage Grotesque", fontWeight: 700, fontSize: 20, color: s.c, marginTop: 2 }}>{s.v}</div>
                      </div>
                    ))}
                  </div>

                  <div style={{ marginTop: 18, padding: 12, background: "rgba(230,57,70,.06)", border: "1px solid rgba(230,57,70,.2)", borderRadius: 8, display: "flex", alignItems: "center", gap: 10, fontSize: 12.5, color: "#D4D4D4" }} className="mono">
                    📎 rapport_{C.monthlyTimeline[activeMonth].month.toLowerCase()}_{C.client.domain.split(".")[0]}.pdf
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>

        {/* Keywords flight strips — only when client-data has keywords */}
        {C.keywords && C.keywords.length > 0 && featureOn("showKeywordsTable") && (
        <div style={{ marginTop: 80 }}>
          <Reveal>
            <div className="mc-eyebrow">Sökord i bana</div>
          </Reveal>
          <Reveal delay={0.05}>
            <h3 style={{ fontFamily: "Bricolage Grotesque", fontWeight: 800, fontSize: "clamp(28px, 4vw, 44px)", color: "#fff", marginTop: 16, letterSpacing: "-.03em" }}>
              Från ingenstans till <span className="mc-grad">förstasidan i Google.</span>
            </h3>
          </Reveal>
          <Reveal delay={0.1}>
            <div className="mc-panel mc-panel-bracket" style={{ marginTop: 32, padding: 0, overflow: "hidden" }}>
              <div style={{ display: "grid", gridTemplateColumns: "2fr 100px 1fr 80px", padding: "14px 24px", borderBottom: "1px solid rgba(255,255,255,.05)" }} className="mono">
                <span style={{ fontSize: 10.5, color: "#737373", letterSpacing: ".15em", textTransform: "uppercase" }}>SÖKORD</span>
                <span style={{ fontSize: 10.5, color: "#737373", letterSpacing: ".15em", textTransform: "uppercase", textAlign: "center" }}>VOLYM</span>
                <span style={{ fontSize: 10.5, color: "#737373", letterSpacing: ".15em", textTransform: "uppercase" }}>TRAJEKTORI</span>
                <span style={{ fontSize: 10.5, color: "#737373", letterSpacing: ".15em", textTransform: "uppercase", textAlign: "right" }}>MÅL</span>
              </div>
              {C.keywords.map((kw, i) => (
                <KeywordStrip key={i} kw={kw} delay={i * 0.05} />
              ))}
            </div>
          </Reveal>
        </div>
        )}
      </div>
    </section>
  );
}

function KeywordStrip({ kw, delay }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); }}, { rootMargin: "0px 0px -10% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // From position 100 (off chart) → after position. Lower = better.
  const beforePos = kw.before === null ? 100 : kw.before;
  const beforeX = (1 - beforePos / 100) * 100;
  const afterX = (1 - kw.after / 100) * 100;

  return (
    <div ref={ref} style={{
      display: "grid", gridTemplateColumns: "2fr 100px 1fr 80px",
      padding: "16px 24px", alignItems: "center",
      borderBottom: "1px solid rgba(255,255,255,.04)",
      opacity: seen ? 1 : 0, transform: seen ? "translateX(0)" : "translateX(-12px)",
      transition: `all .8s cubic-bezier(.16,1,.3,1) ${delay}s`,
    }}>
      <div>
        <div style={{ fontSize: 14.5, color: "#fff", fontWeight: 500 }}>{kw.term}</div>
        <div className="mono" style={{ fontSize: 11, color: "#525252", marginTop: 3 }}>
          {kw.before === null ? "Ej rankat" : `position #${kw.before}`} → <span style={{ color: "#10B981" }}>position #{kw.after}</span>
        </div>
      </div>
      <div style={{ textAlign: "center", fontFamily: "ui-monospace, Menlo, monospace", fontSize: 12, color: "#A3A3A3" }}>
        {kw.volume.toLocaleString("sv-SE")}
      </div>
      <div style={{ position: "relative", height: 24 }}>
        <div style={{ position: "absolute", top: 11, left: 0, right: 0, height: 2, background: "rgba(255,255,255,.04)", borderRadius: 999 }} />
        {/* before tick */}
        <div style={{ position: "absolute", left: `${beforeX}%`, top: 6, transform: "translateX(-50%)" }}>
          <div style={{ width: 12, height: 12, borderRadius: 999, background: "#737373", border: "2px solid #070708" }} />
        </div>
        {/* trajectory line */}
        <div style={{
          position: "absolute", top: 11, left: `${Math.min(beforeX, afterX)}%`,
          width: seen ? `${Math.abs(afterX - beforeX)}%` : 0, height: 2,
          background: "linear-gradient(90deg,#E63946,#10B981)",
          transition: `width 1.2s cubic-bezier(.16,1,.3,1) ${delay + .3}s`,
          boxShadow: "0 0 8px rgba(16,185,129,.4)",
        }} />
        {/* after tick */}
        <div style={{
          position: "absolute", left: seen ? `${afterX}%` : `${beforeX}%`,
          top: 4, transform: "translateX(-50%)",
          transition: `left 1.2s cubic-bezier(.16,1,.3,1) ${delay + .3}s`,
        }}>
          <div style={{ width: 16, height: 16, borderRadius: 999, background: "#10B981", border: "2px solid #070708", boxShadow: "0 0 12px #10B981" }} />
        </div>
      </div>
      <div style={{ textAlign: "right", fontFamily: "Bricolage Grotesque", fontSize: 18, fontWeight: 700, color: "#10B981" }}>
        #{kw.after}
      </div>
    </div>
  );
}
window.MCControl = MCControl;