/* Aifit — circular "Life Platform" navigator (interactive).
   8 services on a ring around the Aifit core; selecting a node swaps the
   center panel to that service. Entrance is JS-gated so the visible
   end-state is the resting style (robust to frozen timeline / print).
   Exposes window.Platform */
(function () {
  const { useState, useEffect } = React;
  const Icon = window.Icon;
  const R = 39; // ring radius in 0–100 coords

  function nodePos(i, n) {
    const a = (-90 + (360 / n) * i) * (Math.PI / 180);
    return [50 + R * Math.cos(a), 50 + R * Math.sin(a)];
  }

  function Platform({ nodes, selected, onSelect }) {
    const [drawn, setDrawn] = useState(false);
    const cur = nodes.find((x) => x.key === selected);

    useEffect(() => {
      setDrawn(false);
      let r = requestAnimationFrame(() => (r = requestAnimationFrame(() => setDrawn(true))));
      const t = setTimeout(() => setDrawn(true), 120);
      return () => { cancelAnimationFrame(r); clearTimeout(t); };
    }, []);

    const circ = 2 * Math.PI * R;

    return (
      <div className={"plat" + (drawn ? " is-drawn" : "")}>
        <svg className="plat-svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
          <circle className="plat-ring" cx="50" cy="50" r={R}
            style={{ strokeDasharray: circ, "--circ": circ }} />
          {cur && (() => {
            const i = nodes.indexOf(cur);
            const p = nodePos(i, nodes.length);
            return <line className="plat-spoke" x1="50" y1="50" x2={p[0]} y2={p[1]}
              stroke={cur.color} style={{ strokeDasharray: 100, "--len": 100 }} />;
          })()}
        </svg>

        {/* center core */}
        <div
          className={"plat-core" + (cur ? " has-sel" : "")}
          style={cur ? { "--node": cur.color } : null}
          role="button"
          tabIndex={0}
          onClick={() => cur && onSelect(null)}
          onKeyDown={(e) => { if (cur && (e.key === "Enter" || e.key === " ")) { e.preventDefault(); onSelect(null); } }}
          aria-label={cur ? "選択を解除して Aifit に戻る" : "Aifit Life Platform"}
        >
          {cur ? (
            <span className="pc-detail" key={cur.key}>
              <Icon name={cur.icon} className="pc-detail-ic" strokeWidth={1.5} />
              <span className="pc-detail-label">{cur.lead}</span>
              <span className="pc-detail-body">{cur.body}</span>
              <a className="pc-detail-more" href={cur.href || "#"}
                target={/^https?:/.test(cur.href || "") ? "_blank" : undefined}
                rel={/^https?:/.test(cur.href || "") ? "noopener" : undefined}
                onClick={(e) => e.stopPropagation()}>詳しく見る <Icon name="arrow" strokeWidth={1.8} /></a>
            </span>
          ) : (
            <span className="pc-brand">
              <img className="pc-brand-logo" src="logo/aifit-logo.png" alt="aifit" />
              <span className="pc-brand-en">Life Platform</span>
              <span className="pc-brand-jp">想いをつなぐ<br />プラットフォーム</span>
            </span>
          )}
        </div>

        {/* service nodes */}
        {nodes.map((t, i) => {
          const p = nodePos(i, nodes.length);
          const isSel = selected === t.key;
          return (
            <button
              key={t.key}
              className={"plat-node" + (isSel ? " is-selected" : "") + (cur && !isSel ? " is-dim" : "")}
              style={{ left: p[0] + "%", top: p[1] + "%", "--node": t.color, "--d": (0.25 + i * 0.07) + "s" }}
              aria-pressed={isSel}
              aria-label={t.label}
              onClick={() => onSelect(isSel ? null : t.key)}
            >
              <span className="plat-node-disc">
                <Icon name={t.icon} strokeWidth={1.5} />
              </span>
              <span className="plat-node-label">
                {t.label}{t.sub && <i>（{t.sub}）</i>}
              </span>
            </button>
          );
        })}
      </div>
    );
  }

  window.Platform = Platform;
})();