/* eslint-disable */
// Interactive Roadmap that uses the actual page 53 visual from the printed
// Strategy as the artwork, with four clickable year hotspots laid over the
// yellow milestone circles. Clicking a year filters the details panel below
// to show every action + task touching that year, grouped by priority area.

function Roadmap() {
  const data = window.GSC_ROADMAP;
  const index = React.useMemo(() => window.GSC_buildRoadmapIndex(), []);
  const [activeId, setActiveId] = React.useState(data.years[0].id);
  const active = data.years.find(y => y.id === activeId);
  const tasks = index[activeId] || [];

  // If the page was opened with #roadmap in the URL (e.g. clicking the
  // nav link from an inner chapter), the browser tried to scroll to
  // #roadmap before React had mounted this component, so nothing
  // happened. Re-run the scroll once we exist in the DOM.
  React.useEffect(() => {
    if (window.location.hash !== "#roadmap") return;
    const el = document.getElementById("roadmap");
    if (!el) return;
    // Wait one frame so layout settles, then scroll.
    requestAnimationFrame(() => {
      el.scrollIntoView({ behavior: "auto", block: "start" });
    });
  }, []);

  // Group by priority id 1->5
  const grouped = React.useMemo(() => {
    const map = new Map();
    tasks.forEach(t => {
      if (!map.has(t.priorityId)) map.set(t.priorityId, {
        priorityId: t.priorityId,
        priorityTitle: t.priorityTitle,
        priorityShort: t.priorityShort,
        color: t.color, colorRaw: t.colorRaw,
        tasks: []
      });
      map.get(t.priorityId).tasks.push(t);
    });
    return [...map.values()].sort((a, b) => a.priorityId - b.priorityId);
  }, [tasks]);

  // Approximate centre of each year title on the page 53 image, as percentages
  // of the image width/height. The image is 1600 × 2311 px.
  const hotspots = [
    { id: "y2026-2027", x: 23.0, y: 24.0, r: 10 },
    { id: "y2027-2028", x: 63.0, y: 24.0, r: 10 },
    { id: "y2028-2029", x: 68.0, y: 52.0, r: 10 },
    { id: "y2029-2030", x: 69.0, y: 73.5, r: 10 }
  ];

  // Clickable overlays sitting over each line of the "Our Strategic Priorities"
  // box on the image, each linking straight to that priority on the
  // Strategic Priorities page. Values are percentages of the image box.
  const priorityHots = [
    { id: 1, label: "Grow Support at Home",        top: 51.4, height: 4.2 },
    { id: 2, label: "Plan aged care accommodation", top: 54.2, height: 5.6 },
    { id: 3, label: "Shape disability services",     top: 58.7, height: 5.6 },
    { id: 4, label: "Strengthen supported employment and participation pathways", top: 62.7, height: 8.0 },
    { id: 5, label: "Build workforce and systems",   top: 69.4, height: 5.6 }
  ];

  const open = (id) => {
    setActiveId(id);
    requestAnimationFrame(() => {
      const el = document.getElementById("roadmap-details");
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    });
  };

  const roadmapText = () => {
    const intro = "Interactive Roadmap. The Strategy across five years. " +
      "Click any of the four yellow year markers on the roadmap to see every " +
      "action and task that falls in that year, grouped by priority area. " +
      "Click a task to jump straight to it on the Strategic Priorities page. ";
    const years = data.years.map(y => `${y.year}: ${y.title}. ${y.blurb}`).join(" ");
    const ongoing = "Ongoing across all years: " + data.ongoing.join("; ") + ".";
    return intro + years + " " + ongoing;
  };
  return (
    <section className="section roadmap-section" id="roadmap">
      <div className="shell">
        <div className="section__head">
          <div>
            <div className="eyebrow">Interactive Roadmap</div>
            <h2>The Strategy across five years.</h2>
          </div>
          <SpeakButton getText={roadmapText} label="Listen to the roadmap overview" />
        </div>
        <p className="lede">
          Click any of the four yellow year markers on the roadmap to see every
          action and task that falls in that year, grouped by priority area.
          Click a task to jump straight to it on the Strategic Priorities page.
        </p>

        <div className="roadmap-figure">
          <img className="roadmap-figure__img"
               src="../../assets/page53-roadmap.jpg"
               alt="Aged Care and Disability Strategy Overview — five-year roadmap from the printed Strategy, page 53." />
          {hotspots.map(h => {
            const isActive = h.id === activeId;
            const y = data.years.find(yy => yy.id === h.id);
            return (
              <button
                key={h.id}
                className={`roadmap-hot ${isActive ? "is-active" : ""}`}
                style={{ left: `${h.x}%`, top: `${h.y}%`, width: `${h.r * 2}%`, paddingBottom: `${h.r * 2}%` }}
                onMouseEnter={() => setActiveId(h.id)}
                onFocus={() => setActiveId(h.id)}
                onClick={() => open(h.id)}
                aria-label={`Show actions for ${y.year} — ${y.title}`}
              >
                <span className="roadmap-hot__ring" />
                <span className="sr">{y.year} {y.title}</span>
              </button>
            );
          })}
          {priorityHots.map(p => (
            <a
              key={p.id}
              className="roadmap-prio"
              href={`strategic-priorities.html#priority-${p.id}`}
              style={{ top: `${p.top}%`, height: `${p.height}%` }}
              aria-label={`Go to Strategic Priority ${p.id}: ${p.label}`}
            >
              <span className="sr">Priority {p.id}: {p.label}</span>
            </a>
          ))}
        </div>

        <div id="roadmap-details" className="roadmap-details">
          <div className="roadmap-details__head">
            <div className="yr">{active.year}</div>
            <div className="ti">{active.title}</div>
            <p>{active.blurb}</p>
            <div className="roadmap-details__yearpicker">
              {data.years.map(y => (
                <button
                  key={y.id}
                  className={`pick ${y.id === activeId ? "is-active" : ""}`}
                  onClick={() => setActiveId(y.id)}
                >
                  <strong>{y.year}</strong>
                  <span>{y.title}</span>
                </button>
              ))}
            </div>
          </div>

          {grouped.length === 0 && (
            <div className="roadmap-details__empty">No actions fall in this year band.</div>
          )}

          <div className="roadmap-details__grid">
            {grouped.map(g => (
              <div key={g.priorityId} className="roadmap-details__group" style={{ "--p-color": g.color }}>
                <h5><span className="dot" /> Priority {g.priorityId} · {g.priorityShort}</h5>
                {g.tasks.map((t, i) => (
                  <a key={i} className="roadmap-details__task" href={`strategic-priorities.html#${t.anchor}`}>
                    <span className="meta">{t.action} · {t.time} · {t.cost}</span>
                    {t.task}
                  </a>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Roadmap });