// Full-screen Project Charter takeover.

const { useEffect, useMemo } = React;

function CharterView({ roleId, onClose, onNavigate }) {
  const { ROLES, PROGRAMS } = window.PORTFOLIO_DATA;
  const role = ROLES.find(r => r.id === roleId);

  // Some roles share charters (Ipsos PM/Senior PM)
  const charterRole = role?.sharedCharterWith
    ? ROLES.find(r => r.id === role.sharedCharterWith)
    : role;
  const charter = charterRole?.charter;
  const program = PROGRAMS.find(p => p.id === role?.program);

  // Build ordered list of roles for ←/→ nav (chronological, oldest → newest)
  const ordered = useMemo(() => {
    return [...ROLES].sort((a, b) => a.start - b.start);
  }, [ROLES]);
  const idx = ordered.findIndex(r => r.id === roleId);
  const prev = idx > 0 ? ordered[idx - 1] : null;
  const next = idx < ordered.length - 1 ? ordered[idx + 1] : null;

  useEffect(() => {
    function handler(e) {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowLeft" && prev) onNavigate(prev.id);
      else if (e.key === "ArrowRight" && next) onNavigate(next.id);
    }
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [prev, next, onClose, onNavigate]);

  // Scroll lock body while open
  useEffect(() => {
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = "";
    };
  }, []);

  // Scroll charter to top when role changes
  useEffect(() => {
    const el = document.querySelector(".charter-scroll");
    if (el) el.scrollTop = 0;
  }, [roleId]);

  if (!role || !charter) return null;

  return (
    <div className="charter-overlay" role="dialog" aria-modal="true">
      {/* Sticky top bar */}
      <div className="charter-topbar">
        <button className="back-btn" onClick={onClose}>
          <span className="back-arrow">←</span>
          <span>Back to portfolio</span>
        </button>
        <div className="charter-crumb">
          <span className="crumb-tag" style={{ color: program.color, borderColor: program.color + "55" }}>
            {program.name}
          </span>
          <span className="crumb-sep">/</span>
          <span className="crumb-doc">PROJECT CHARTER</span>
        </div>
        <div className="charter-nav">
          <button className="nav-btn" onClick={() => prev && onNavigate(prev.id)} disabled={!prev} title={prev ? prev.title : "First role"}>
            <span className="nav-key">←</span> Previous role
          </button>
          <span className="nav-pos">{idx + 1} / {ordered.length}</span>
          <button className="nav-btn" onClick={() => next && onNavigate(next.id)} disabled={!next} title={next ? next.title : "Latest role"}>
            Next role <span className="nav-key">→</span>
          </button>
        </div>
      </div>

      {/* Scroll area */}
      <div className="charter-scroll">
        <div className="charter-doc">
          {/* Document header band */}
          <div className="doc-band" style={{ background: program.color }}>
            <div className="doc-band-label">PROJECT CHARTER · v1.0</div>
            <div className="doc-band-status">
              <span className="status-dot" /> STATUS · {role.status?.toUpperCase() || "CLOSED"}
            </div>
          </div>

          <div className="doc-body">
            {/* Title block */}
            <header className="doc-head">
              <div className="doc-eyebrow">
                <span className="doc-prog-name" style={{ color: program.color }}>
                  ● {program.name}
                </span>
                <span className="doc-meta-sep">·</span>
                <span>{program.location}</span>
              </div>
              <h1 className="doc-title">{charter.title || role.title}</h1>
              <div className="doc-sub">
                <div className="doc-sub-item">
                  <div className="doc-sub-k">DURATION</div>
                  <div className="doc-sub-v">{charter.duration}</div>
                </div>
                <div className="doc-sub-item">
                  <div className="doc-sub-k">SPONSOR</div>
                  <div className="doc-sub-v">{charter.sponsor}</div>
                </div>
                <div className="doc-sub-item">
                  <div className="doc-sub-k">PROJECT MANAGER</div>
                  <div className="doc-sub-v">Anrie Steytler, PMP®</div>
                </div>
              </div>
            </header>

            {/* Business case */}
            <section className="doc-section">
              <div className="sec-num">01</div>
              <div className="sec-body">
                <h2 className="sec-title">Business case</h2>
                <p className="sec-para">{charter.businessCase}</p>
              </div>
            </section>

            {/* Scope */}
            <section className="doc-section">
              <div className="sec-num">02</div>
              <div className="sec-body">
                <h2 className="sec-title">Scope</h2>
                <p className="sec-para">{charter.scope}</p>
              </div>
            </section>

            {/* Stakeholders */}
            <section className="doc-section">
              <div className="sec-num">03</div>
              <div className="sec-body">
                <h2 className="sec-title">Key stakeholders</h2>
                <div className="stakeholder-chips">
                  {charter.stakeholders.map((s, i) => (
                    <span key={i} className="sh-chip">{s}</span>
                  ))}
                </div>
                {charter.keyClients && (
                  <>
                    <div className="sub-h">Key clients</div>
                    <div className="stakeholder-chips">
                      {charter.keyClients.map((c, i) => (
                        <span key={i} className="sh-chip sh-chip-strong" style={{ borderColor: program.color, color: program.color }}>
                          {c}
                        </span>
                      ))}
                    </div>
                  </>
                )}
              </div>
            </section>

            {/* Deliverables */}
            <section className="doc-section">
              <div className="sec-num">04</div>
              <div className="sec-body">
                <h2 className="sec-title">Key deliverables</h2>
                <ul className="check-list">
                  {charter.deliverables.map((d, i) => (
                    <li key={i} className="check-item">
                      <span className="check-box" style={{ borderColor: program.color }}>
                        <span className="check-mark" style={{ color: program.color }}>✓</span>
                      </span>
                      <span className="check-text">{d}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </section>

            {/* Benefits */}
            <section className="doc-section">
              <div className="sec-num">05</div>
              <div className="sec-body">
                <h2 className="sec-title">Benefits realised</h2>
                <ul className="benefit-list">
                  {charter.benefits.map((b, i) => (
                    <li key={i} className="benefit-item" style={{ borderLeftColor: program.color }}>
                      {b}
                    </li>
                  ))}
                </ul>
              </div>
            </section>

            {/* Footer / sign-off */}
            <footer className="doc-foot">
              <div className="signoff">
                <div className="signoff-line" style={{ background: program.color }} />
                <div className="signoff-text">
                  <div className="signoff-name">Anrie Steytler, PMP®</div>
                  <div className="signoff-role">Project Manager · Signed off {role.endLabel}</div>
                </div>
              </div>
              <div className="doc-pageno">— end of charter —</div>
            </footer>
          </div>
        </div>

        {/* Bottom nav strip */}
        <div className="charter-bottom-nav">
          {prev ? (
            <button className="bottom-nav-btn bottom-nav-prev" onClick={() => onNavigate(prev.id)}>
              <div className="bn-dir">← PREVIOUS</div>
              <div className="bn-title">{prev.title}</div>
              <div className="bn-sub">{PROGRAMS.find(p => p.id === prev.program).name} · {prev.startLabel} – {prev.endLabel}</div>
            </button>
          ) : <div className="bottom-nav-btn bottom-nav-empty">First role</div>}
          {next ? (
            <button className="bottom-nav-btn bottom-nav-next" onClick={() => onNavigate(next.id)}>
              <div className="bn-dir">NEXT →</div>
              <div className="bn-title">{next.title}</div>
              <div className="bn-sub">{PROGRAMS.find(p => p.id === next.program).name} · {next.startLabel} – {next.endLabel}</div>
            </button>
          ) : <div className="bottom-nav-btn bottom-nav-empty">Latest role</div>}
        </div>
      </div>
    </div>
  );
}

window.CharterView = CharterView;