// Renders the resume as a document with stable data-cite IDs on each
// element so the AI can highlight a specific line as it speaks.
//
// The activeCite prop is the currently-cited element ID; we add the
// `.cited-active` class to it (and `.cited` to every id the model has
// referenced this turn). A single `.cite-spotlight` overlay tweens its
// position to follow the active element.

function ResumeDocument({ activeCite, allCites }) {
  const r = window.RESUME || {};
  const docRef = React.useRef(null);
  const [spot, setSpot] = React.useState(null);

  // Move the spotlight rectangle to follow the cited element.
  React.useLayoutEffect(() => {
    if (!activeCite || !docRef.current) {
      setSpot(null);
      return;
    }
    const target = docRef.current.querySelector(`[data-cite="${activeCite}"]`);
    if (!target) { setSpot(null); return; }
    const doc = docRef.current.getBoundingClientRect();
    const t = target.getBoundingClientRect();
    setSpot({
      top: t.top - doc.top + docRef.current.scrollTop - 4,
      left: t.left - doc.left - 6,
      width: t.width + 12,
      height: t.height + 8
    });
    const docEl = docRef.current;
    const targetTop = t.top - doc.top + docEl.scrollTop;
    const visibleTop = docEl.scrollTop;
    const visibleBottom = visibleTop + docEl.clientHeight;
    if (targetTop < visibleTop + 60 || targetTop + t.height > visibleBottom - 60) {
      docEl.scrollTo({
        top: targetTop - docEl.clientHeight / 2 + t.height / 2,
        behavior: "smooth",
      });
    }
  }, [activeCite]);

  const citedSet = React.useMemo(() => new Set(allCites || []), [allCites]);
  const cls = (id) =>
    "doc-line" +
    (activeCite === id ? " cited-active" : "") +
    (citedSet.has(id) ? " cited" : "");

  return (
    <div className="resume-doc-wrap">
      <div className="resume-doc" ref={docRef}>
        {/* Header */}
        <header className="doc-header">
          <h1 className="doc-name">{r.name}</h1>
          <div className="doc-meta">
            <span>{r.title}</span>
            <span className="doc-dot">·</span>
            <span>{r.location}</span>
            {r.email && (
              <>
                <span className="doc-dot">·</span>
                <a href={`mailto:${r.email}`}>{r.email}</a>
              </>
            )}
          </div>
        </header>

        {/* Summary */}
        {r.summary && (
          <section className="doc-section">
            <h2 className="doc-h">Summary</h2>
            <p className={cls("summary")} data-cite="summary">{r.summary}</p>
          </section>
        )}

        {/* Experience (current) */}
        {(r.experience || []).length > 0 && (
          <section className="doc-section">
            <h2 className="doc-h">Experience</h2>
            {r.experience.map((e, i) => (
              <div key={i} className="doc-job">
                <div className={cls(`exp-${i}`)} data-cite={`exp-${i}`}>
                  <div className="doc-job-head">
                    <span className="doc-role">{e.role}</span>
                    <span className="doc-co">— {e.company}</span>
                  </div>
                  <div className="doc-period">{e.period}</div>
                </div>
                <ul className="doc-bullets">
                  {e.bullets.map((b, j) => (
                    <li
                      key={j}
                      className={cls(`exp-${i}-b${j}`)}
                      data-cite={`exp-${i}-b${j}`}
                    >{b}</li>
                  ))}
                </ul>
              </div>
            ))}
          </section>
        )}

        {/* Prior roles (history) */}
        {(r.history || []).length > 0 && (
          <section className="doc-section">
            <h2 className="doc-h">Prior Roles</h2>
            {r.history.map((h, i) => (
              <div key={i} className="doc-job doc-job-compact">
                <div className={cls(`hist-${i}`)} data-cite={`hist-${i}`}>
                  <div className="doc-job-head">
                    <span className="doc-role">{h.role}</span>
                    <span className="doc-co">— {h.company}</span>
                  </div>
                  <div className="doc-period">{h.period}</div>
                </div>
                {h.summary && (
                  <p
                    className={cls(`hist-${i}-s`)}
                    data-cite={`hist-${i}-s`}
                  >{h.summary}</p>
                )}
                {h.tags && h.tags.length > 0 && (
                  <div className="doc-tags">
                    {h.tags.map((t) => (
                      <span key={t} className="doc-tag">{t}</span>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </section>
        )}

        {/* Skills */}
        {r.skills && Object.keys(r.skills).length > 0 && (
          <section className="doc-section">
            <h2 className="doc-h">Skills</h2>
            <dl className="doc-skills">
              {Object.entries(r.skills).map(([k, v]) => (
                <div
                  key={k}
                  className={cls(`skills-${k}`)}
                  data-cite={`skills-${k}`}
                >
                  <dt>{k}</dt>
                  <dd>{v.join(" · ")}</dd>
                </div>
              ))}
            </dl>
          </section>
        )}

        {/* Projects */}
        {(r.projects || []).length > 0 && (
          <section className="doc-section">
            <h2 className="doc-h">Projects</h2>
            <ul className="doc-projects">
              {r.projects.map((p, i) => (
                <li
                  key={i}
                  className={cls(`proj-${i}`)}
                  data-cite={`proj-${i}`}
                >
                  <span className="doc-proj-name">{p.name}</span>
                  <span className="doc-proj-desc"> — {p.desc}</span>
                </li>
              ))}
            </ul>
          </section>
        )}

        {/* Education (if any) */}
        {(r.education || []).length > 0 && (
          <section className="doc-section">
            <h2 className="doc-h">Education</h2>
            {r.education.map((e, i) => (
              <div
                key={i}
                className={cls(`edu-${i}`)}
                data-cite={`edu-${i}`}
              >
                <span className="doc-degree">{e.degree}</span>
                <span className="doc-school">, {e.school}</span>
                <span className="doc-period-inline"> · {e.period}</span>
              </div>
            ))}
          </section>
        )}

        {/* Moving spotlight */}
        {spot && (
          <div
            className="cite-spotlight"
            style={{
              top: spot.top,
              left: spot.left,
              width: spot.width,
              height: spot.height,
            }}
          />
        )}
      </div>
      <div className="resume-doc-hud">
        <span className="hud-label">DOC.{activeCite ? "READING" : "STANDBY"}</span>
        {activeCite && <span className="hud-cite">{activeCite}</span>}
      </div>
    </div>
  );
}

window.ResumeDocument = ResumeDocument;