import { moduleLayout } from "../lib/missions";

const connections = [
  ["kernel", "packages"],
  ["kernel", "pipes"],
  ["kernel", "processes"],
  ["packages", "storage"],
  ["pipes", "permissions"],
  ["processes", "shell"],
  ["storage", "network"],
  ["permissions", "network"],
  ["permissions", "security"],
  ["shell", "security"]
];

function center(module) {
  return {
    x: module.x + module.width / 2,
    y: module.y + module.height / 2
  };
}

export default function SystemBlueprint({
  completedModules,
  activeModule,
  online
}) {
  const byId = Object.fromEntries(moduleLayout.map((item) => [item.id, item]));
  const completed = new Set(completedModules);

  return (
    <section className="blueprint-panel" aria-labelledby="blueprint-title">
      <div className="panel-kicker">
        <span>LIVE-BUILD</span>
        <span className={online ? "status-online" : "status-assembling"}>
          {online ? "SYSTEM ONLINE" : "MONTAGE LÄUFT"}
        </span>
      </div>
      <h2 id="blueprint-title">Dein Linux-System</h2>
      <p className="blueprint-copy">
        Jedes abgeschlossene Kapitel schaltet ein Systemmodul frei.
      </p>

      <div className={`blueprint ${online ? "is-online" : ""}`}>
        <svg
          viewBox="0 0 640 450"
          role="img"
          aria-label={`${completed.size} von 9 Linux-Modulen aufgebaut`}
        >
          <defs>
            <pattern
              id="grid"
              width="24"
              height="24"
              patternUnits="userSpaceOnUse"
            >
              <path d="M 24 0 L 0 0 0 24" className="grid-line" />
            </pattern>
            <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur stdDeviation="4" result="blur" />
              <feMerge>
                <feMergeNode in="blur" />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>
          </defs>

          <rect width="640" height="450" rx="18" className="blueprint-bg" />
          <rect width="640" height="450" rx="18" fill="url(#grid)" />

          <g className="connections">
            {connections.map(([from, to]) => {
              const a = center(byId[from]);
              const b = center(byId[to]);
              const isActive = completed.has(from) && completed.has(to);
              return (
                <path
                  key={`${from}-${to}`}
                  d={`M ${a.x} ${a.y} C ${a.x} ${(a.y + b.y) / 2}, ${b.x} ${(a.y + b.y) / 2}, ${b.x} ${b.y}`}
                  className={isActive ? "wire active" : "wire"}
                />
              );
            })}
          </g>

          {moduleLayout.map((module, index) => {
            const isDone = completed.has(module.id);
            const isActive = activeModule === module.id;
            return (
              <g
                key={module.id}
                className={`system-module ${isDone ? "done" : ""} ${isActive ? "current" : ""}`}
                transform={`translate(${module.x} ${module.y})`}
              >
                <rect
                  width={module.width}
                  height={module.height}
                  rx="8"
                  className="module-case"
                  filter={isDone ? "url(#glow)" : undefined}
                />
                <circle cx="18" cy="18" r="5" className="module-led" />
                <text x="32" y="23" className="module-number">
                  MOD-{String(index + 1).padStart(2, "0")}
                </text>
                <text
                  x={module.width / 2}
                  y={module.height / 2 + 15}
                  textAnchor="middle"
                  className="module-label"
                >
                  {module.label}
                </text>
                {!isDone && (
                  <path
                    d={`M ${module.width - 29} 13 h16 v16 h-16 z M ${module.width - 25} 13 v-4 a4 4 0 0 1 8 0 v4`}
                    className="module-lock"
                  />
                )}
              </g>
            );
          })}

          <g className="core-mark">
            <text x="320" y="438" textAnchor="middle">
              {online ? "BOOT SEQUENCE COMPLETE" : "LPIC SYSTEM ASSEMBLY // 101→102"}
            </text>
          </g>
        </svg>
      </div>
    </section>
  );
}
