/* MC Network — issues as a constellation. Each brist is a pulsing node
   in an orbital network. Click one to inspect. */

function MCNetwork() {
  const C = window.CLIENT_DATA;
  const [active, setActive] = useState(0);
  const issues = C.issues;
  const W = 560, H = 480, cx = W/2, cy = H/2;

  // Position issues in a 3-ring orbital pattern based on severity
  const positioned = useMemo(() => {
    return issues.map((iss, i) => {
      const ring = iss.severity === "Allvarligt" || iss.severity === "Kritiskt" ? 0
        : iss.severity === "Viktigt" || iss.severity === "Hög" ? 1 : 2;
      const r = [110, 170, 220][ring];
      const ringIssues = issues.filter((x, j) => {
        const xring = x.severity === "Allvarligt" || x.severity === "Kritiskt" ? 0
          : x.severity === "Viktigt" || x.severity === "Hög" ? 1 : 2;
        return xring === ring;
      });
      const idxInRing = ringIssues.indexOf(iss);
      const total = ringIssues.length;
      const angle = (idxInRing / total) * Math.PI * 2 - Math.PI / 2 + ring * 0.3;
      return {
        ...iss, ring,
        x: cx + Math.cos(angle) * r,
        y: cy + Math.sin(angle) * r,
        i,
      };
    });
  }, [issues]);

  const sevColor = (s) =>
    s === "Allvarligt" || s === "Kritiskt" ? "#FF6B6B"
    : s === "Viktigt" || s === "Hög" ? "#F59E0B"
    : "#A3A3A3";

  return (
    <section className="mc-section">
      <div className="mc-container">
        <Reveal>
          <div className="mc-eyebrow">Diagnostiknätverk</div>
        </Reveal>
        <Reveal delay={0.05}>
          <h2 className="mc-h2" style={{ marginTop: 18, maxWidth: 880 }}>
            Det här är vad er sajt <span className="mc-grad">kostar er varje månad.</span>
          </h2>
        </Reveal>
        <Reveal delay={0.1}>
          <p style={{ fontSize: 17, color: "#A3A3A3", maxWidth: 620, marginTop: 18, lineHeight: 1.6 }}>
            Varje pulserande prick är pengar eller tid som rinner iväg just nu. Klicka på en för att se exakt vad det är värt — och vad vi gör åt det.
          </p>
        </Reveal>

        <div className="mc-stack-mobile" style={{
          marginTop: 56, display: "grid",
          gridTemplateColumns: `minmax(0, ${W}px) 1fr`, gap: 40, alignItems: "start",
        }}>
          {/* Network */}
          <Reveal delay={0.15}>
            <div className="mc-panel mc-panel-bracket mc-network-panel" style={{ padding: 12 }}>
              <svg className="mc-network-svg" width={W} height={H} viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid meet" style={{ display: "block", width: "100%", height: "auto", maxWidth: "100%" }}>
                <defs>
                  <radialGradient id="coreGrad">
                    <stop offset="0%" stopColor="#E63946" stopOpacity="1" />
                    <stop offset="100%" stopColor="#E63946" stopOpacity="0" />
                  </radialGradient>
                  <filter id="glow"><feGaussianBlur stdDeviation="3" /></filter>
                </defs>
                {/* Rings */}
                {[110, 170, 220].map((r, i) => (
                  <circle key={i} cx={cx} cy={cy} r={r}
                    fill="none" stroke="rgba(255,255,255,.05)" strokeDasharray="2 6" strokeWidth="1" />
                ))}
                {/* Connecting lines from core */}
                {positioned.map((p, i) => (
                  <line key={i} x1={cx} y1={cy} x2={p.x} y2={p.y}
                    stroke={i === active ? sevColor(p.severity) : "rgba(255,255,255,.06)"}
                    strokeWidth={i === active ? 1.5 : 1}
                    style={{ transition: "all .4s" }}
                  />
                ))}
                {/* Core — domain */}
                <circle cx={cx} cy={cy} r="36" fill="url(#coreGrad)" opacity=".4" />
                <circle cx={cx} cy={cy} r="22" fill="rgba(230,57,70,.15)" stroke="rgba(230,57,70,.4)" strokeWidth="1" />
                <text x={cx} y={cy + 4} textAnchor="middle"
                  fontFamily="ui-monospace, Menlo, monospace" fontSize="10" fill="#FF6B6B" fontWeight="600">
                  {C.client.domain}
                </text>
                {/* Nodes */}
                {positioned.map((p, i) => {
                  const c = sevColor(p.severity);
                  const isActive = i === active;
                  return (
                    <g key={i} onClick={() => setActive(i)} style={{ cursor: "pointer" }}>
                      <circle cx={p.x} cy={p.y} r={isActive ? 22 : 16} fill={c} opacity=".15" filter="url(#glow)">
                        <animate attributeName="r" values={`${isActive?22:16};${isActive?28:20};${isActive?22:16}`} dur={`${2+i*.2}s`} repeatCount="indefinite" />
                      </circle>
                      <circle cx={p.x} cy={p.y} r={isActive ? 9 : 7} fill={c}
                        stroke={isActive ? "#fff" : "transparent"} strokeWidth="1.5"
                        style={{ transition: "all .3s" }} />
                      <text x={p.x} y={p.y + 3} textAnchor="middle" fontSize="9" fill="#fff" fontWeight="700"
                        fontFamily="ui-monospace, Menlo, monospace" pointerEvents="none">
                        {String(i+1).padStart(2,"0")}
                      </text>
                    </g>
                  );
                })}
              </svg>
              <div style={{ display: "flex", gap: 16, padding: "8px 12px 12px", fontSize: 11, color: "#737373" }} className="mono">
                <span style={{ display:"flex", alignItems:"center", gap:6 }}><span style={{width:8,height:8,borderRadius:999,background:"#FF6B6B"}}/>Allvarligt</span>
                <span style={{ display:"flex", alignItems:"center", gap:6 }}><span style={{width:8,height:8,borderRadius:999,background:"#F59E0B"}}/>Viktigt</span>
                <span style={{ display:"flex", alignItems:"center", gap:6 }}><span style={{width:8,height:8,borderRadius:999,background:"#A3A3A3"}}/>Att förbättra</span>
              </div>
            </div>
          </Reveal>

          {/* Detail panel */}
          <Reveal delay={0.2}>
            <div className="mc-panel mc-panel-bracket mc-no-sticky-mobile mc-network-detail" style={{ padding: 32, position: "sticky", top: 80 }}>
              {issues[active] && (
                <div key={active} style={{ animation: "fadeUp .4s" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <span className={`mc-tag ${issues[active].severity === "Allvarligt" ? "crit" : issues[active].severity === "Viktigt" ? "warn" : "idle"}`}>
                      ▸ {issues[active].severity}
                    </span>
                    <span className="mono" style={{ fontSize: 11, color: "#525252" }}>PUNKT-{String(active+1).padStart(2,"0")}</span>
                  </div>
                  <h3 style={{ fontFamily: "Bricolage Grotesque", fontWeight: 700, fontSize: 28, lineHeight: 1.15, letterSpacing: "-.025em", color: "#fff", margin: "16px 0 16px" }}>
                    {issues[active].title}
                  </h3>
                  {issues[active].cost && (
                    <div style={{
                      display: "inline-flex", alignItems: "center", gap: 8,
                      padding: "8px 14px", borderRadius: 8,
                      background: "rgba(245,158,11,.08)", border: "1px solid rgba(245,158,11,.25)",
                      color: "#F59E0B", fontFamily: "ui-monospace, Menlo, monospace", fontSize: 12.5, fontWeight: 600,
                      marginBottom: 24,
                    }}>
                      <span>💸</span>{issues[active].cost}
                    </div>
                  )}
                  <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 16 }}>
                    <div style={{ padding: 18, borderLeft: "2px solid #FF6B6B", background: "rgba(230,57,70,.04)", borderRadius: "0 12px 12px 0" }}>
                      <div className="mono" style={{ fontSize: 10, fontWeight: 700, color: "#FF6B6B", letterSpacing: ".15em", textTransform: "uppercase", marginBottom: 8 }}>
                        ▸ Vad händer nu
                      </div>
                      <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.65, color: "#D4D4D4" }}>
                        {issues[active].problem}
                      </p>
                    </div>
                    <div style={{ padding: 18, borderLeft: "2px solid #10B981", background: "rgba(16,185,129,.04)", borderRadius: "0 12px 12px 0" }}>
                      <div className="mono" style={{ fontSize: 10, fontWeight: 700, color: "#10B981", letterSpacing: ".15em", textTransform: "uppercase", marginBottom: 8 }}>
                        ▸ Så fixar vi det
                      </div>
                      <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.65, color: "#D4D4D4" }}>
                        {issues[active].solution}
                      </p>
                    </div>
                  </div>
                  <div className="mono" style={{ marginTop: 22, fontSize: 11, color: "#525252", display: "flex", justifyContent: "space-between" }}>
                    <span>‹ {(active === 0 ? issues.length : active) - 0} av {issues.length}</span>
                    <span style={{ display: "flex", gap: 8 }}>
                      <button onClick={() => setActive((active - 1 + issues.length) % issues.length)} style={navBtn}>← föregående</button>
                      <button onClick={() => setActive((active + 1) % issues.length)} style={navBtn}>nästa →</button>
                    </span>
                  </div>
                </div>
              )}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}
const navBtn = {
  background: "rgba(255,255,255,.04)", border: "1px solid rgba(255,255,255,.08)",
  color: "#A3A3A3", borderRadius: 6, padding: "4px 10px",
  fontFamily: "ui-monospace, Menlo, monospace", fontSize: 11, cursor: "pointer",
};
window.MCNetwork = MCNetwork;