// Gantt chart — career as a project portfolio.
// Rows are programs (companies); bars within a row are roles (sequential).

const { useState, useEffect, useRef, useMemo } = React;

const TIME_START = 2007;
const TIME_END = 2026 + 4 / 12; // small headroom past today

function pct(year) {
  return ((year - TIME_START) / (TIME_END - TIME_START)) * 100;
}

function CareerGantt({ onOpenCharter, openRoleId }) {
  const { PROGRAMS, ROLES } = window.PORTFOLIO_DATA;
  const [activeProgs, setActiveProgs] = useState(() => new Set(PROGRAMS.map(p => p.id)));
  const [hoverRole, setHoverRole] = useState(null);
  const [coachDismissed, setCoachDismissed] = useState(false);
  const ganttRef = useRef(null);

  // years on the axis — every other year to keep it clean
  const years = [];
  for (let y = 2007; y <= 2026; y += 1) years.push(y);
  const majorYears = years.filter(y => y % 2 === 1 || y === 2026);

  const today = 2026 + 4 / 12;
  const todayPct = pct(today);

  function toggleProg(id) {
    setActiveProgs(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      // never let all be off
      if (next.size === 0) return new Set(PROGRAMS.map(p => p.id));
      return next;
    });
    setCoachDismissed(true);
  }

  function selectAll() {
    setActiveProgs(new Set(PROGRAMS.map(p => p.id)));
  }

  const filteredPrograms = PROGRAMS.filter(p => activeProgs.has(p.id));
  const allOn = activeProgs.size === PROGRAMS.length;

  return (
    <div className="gantt-wrap" ref={ganttRef}>
      {/* Filter chips */}
      <div className="filter-row">
        <span className="filter-label">FILTER</span>
        <button
          className={"chip" + (allOn ? " chip-all" : "")}
          onClick={selectAll}
          aria-pressed={allOn}
        >
          <span className="chip-dot chip-dot-all" />
          All programs
          <span className="chip-count">{PROGRAMS.length}</span>
        </button>
        {PROGRAMS.map(p => {
          const on = activeProgs.has(p.id);
          return (
            <button
              key={p.id}
              className={"chip" + (on ? " chip-on" : " chip-off")}
              onClick={() => toggleProg(p.id)}
              aria-pressed={on}
              style={on ? { "--chip-c": p.color, "--chip-s": p.colorSoft } : {}}
            >
              <span className="chip-dot" style={{ background: p.color }} />
              {p.name}
            </button>
          );
        })}
        <span className="filter-meta">
          Showing <strong>{ROLES.filter(r => activeProgs.has(r.program)).length}</strong> of {ROLES.length} roles
        </span>
      </div>

      {/* Coach mark above gantt */}
      <div className={"click-hint" + (coachDismissed ? " click-hint-dim" : "")}>
        <span className="click-hint-pulse" />
        <span className="click-hint-text">
          <span className="kbd-hint">CLICK</span> any role bar to open its Project Charter
          <span className="arrow-right">→</span>
        </span>
      </div>

      {/* Gantt */}
      <div className="gantt">
        {/* Year axis (top) */}
        <div className="gantt-axis">
          <div className="gantt-axis-track">
            {years.map(y => (
              <div
                key={y}
                className={"axis-tick" + (majorYears.includes(y) ? " axis-major" : "")}
                style={{ left: `${pct(y)}%` }}
              >
                {majorYears.includes(y) && <span className="axis-year">{y}</span>}
              </div>
            ))}
          </div>
        </div>

        {/* Rows */}
        <div className="gantt-rows">
          {/* Grid background */}
          <div className="gantt-grid">
            {years.map(y => (
              <div
                key={y}
                className={"grid-col" + (majorYears.includes(y) ? " grid-major" : "")}
                style={{ left: `${pct(y)}%` }}
              />
            ))}
          </div>

          {filteredPrograms.map((prog, pIdx) => {
            const progRoles = ROLES.filter(r => r.program === prog.id);
            const progStart = Math.min(...progRoles.map(r => r.start));
            const progEnd = Math.max(...progRoles.map(r => r.end));
            return (
              <div className="gantt-row" key={prog.id}>
                <div className="row-meta" style={{ "--prog-c": prog.color }}>
                  <div className="row-meta-top">
                    <span className="row-meta-dot" style={{ background: prog.color }} />
                    <span className="row-meta-name">{prog.name}</span>
                  </div>
                  <div className="row-meta-tag">{prog.tag}</div>
                  <div className="row-meta-loc">{prog.location}</div>
                </div>
                <div className="row-track">
                  {/* Program span ghost */}
                  <div
                    className="prog-span"
                    style={{
                      left: `${pct(progStart)}%`,
                      width: `${pct(progEnd) - pct(progStart)}%`,
                      background: prog.colorSoft,
                      borderColor: prog.color + "44",
                    }}
                  />
                  {progRoles.map((role, rIdx) => {
                    const left = pct(role.start);
                    const width = pct(role.end) - pct(role.start);
                    const isOpen = openRoleId === role.id;
                    const isHover = hoverRole === role.id;
                    return (
                      <button
                        key={role.id}
                        className={
                          "role-bar" +
                          (role.current ? " role-current" : "") +
                          (isOpen ? " role-open" : "") +
                          (isHover ? " role-hover" : "")
                        }
                        style={{
                          left: `${left}%`,
                          width: `${width}%`,
                          background: prog.color,
                          color: prog.textOnBar,
                          animationDelay: `${pIdx * 0.12 + rIdx * 0.08}s`,
                        }}
                        onMouseEnter={() => setHoverRole(role.id)}
                        onMouseLeave={() => setHoverRole(null)}
                        onClick={() => {
                          setCoachDismissed(true);
                          onOpenCharter(role.id);
                        }}
                        aria-label={`Open Project Charter for ${role.title}`}
                      >
                        <span className="role-bar-inner">
                          {width > 4 && <span className="role-bar-label">{role.short}</span>}
                        </span>
                        {role.current && <span className="role-pulse" />}
                      </button>
                    );
                  })}
                  {/* Tooltip */}
                  {hoverRole &&
                    progRoles.find(r => r.id === hoverRole) &&
                    (() => {
                      const r = progRoles.find(rr => rr.id === hoverRole);
                      const midPct = (pct(r.start) + pct(r.end)) / 2;
                      return (
                        <div
                          className="role-tooltip"
                          style={{ left: `${midPct}%` }}
                        >
                          <div className="tt-title">{r.title}</div>
                          <div className="tt-dates">
                            {r.startLabel} → {r.endLabel}
                          </div>
                          <div className="tt-cta">Click to open charter →</div>
                        </div>
                      );
                    })()}
                </div>
              </div>
            );
          })}
        </div>

        {/* Bottom legend / count */}
        <div className="gantt-foot">
          <div className="foot-left">
            <span className="foot-key"><span className="foot-swatch" style={{background: "#A3E635"}} /> Program span</span>
            <span className="foot-key"><span className="foot-bar" /> Role (clickable)</span>
          </div>
          <div className="foot-right">
            2007 — 2026 · 19 years · 3 programs · 8 roles
          </div>
        </div>
      </div>
    </div>
  );
}

window.CareerGantt = CareerGantt;