/* global React */
// Interactive Resume — filter by skill, expand roles
// Themed via CSS custom properties: --r-bg, --r-fg, --r-muted, --r-accent, --r-line, --r-chip, --r-chip-on, --r-chip-on-fg

const { useState, useMemo } = React;

function ResumeBlock({ theme = "warm" }) {
  const data = window.SITE_DATA;
  const [activeSkills, setActiveSkills] = useState([]);
  const [openId, setOpenId] = useState(null);

  const allSkills = useMemo(() => {
    const set = new Set();
    data.experience.forEach((e) => e.skills.forEach((s) => set.add(s)));
    return [...set];
  }, []);

  const toggle = (s) =>
    setActiveSkills((cur) => (cur.includes(s) ? cur.filter((x) => x !== s) : [...cur, s]));

  const filtered = data.experience.filter(
    (e) => activeSkills.length === 0 || activeSkills.every((s) => e.skills.includes(s))
  );

  return (
    <div className={`resume resume-${theme}`}>
      <div className="resume-filterbar">
        <div className="resume-filterlabel">
          <span className="resume-filterlabel-num">{activeSkills.length}</span>
          <span className="resume-filterlabel-text">
            {activeSkills.length === 0
              ? "Filter by skill →"
              : `filter${activeSkills.length === 1 ? "" : "s"} active`}
          </span>
          {activeSkills.length > 0 && (
            <button className="resume-clear" onClick={() => setActiveSkills([])}>
              clear
            </button>
          )}
        </div>
        <div className="resume-chips">
          {allSkills.map((s) => {
            const on = activeSkills.includes(s);
            return (
              <button
                key={s}
                onClick={() => toggle(s)}
                className={`resume-chip ${on ? "resume-chip-on" : ""}`}
              >
                {s}
              </button>
            );
          })}
        </div>
      </div>

      <div className="resume-list">
        {filtered.map((e) => {
          const open = openId === e.id;
          return (
            <article
              key={e.id}
              className={`resume-item ${open ? "resume-item-open" : ""}`}
              onClick={() => setOpenId(open ? null : e.id)}
            >
              <div className="resume-item-row">
                <div className="resume-item-period">{e.period}</div>
                <div className="resume-item-main">
                  <div className="resume-item-role">{e.role}</div>
                  <div className="resume-item-co">
                    {e.company} <span className="resume-item-loc">· {e.location}</span>
                  </div>
                </div>
                <div className="resume-item-toggle">{open ? "—" : "+"}</div>
              </div>
              {open && (
                <div className="resume-item-body" onClick={(ev) => ev.stopPropagation()}>
                  <p className="resume-item-summary">{e.summary}</p>
                  <ul className="resume-item-bullets">
                    {e.bullets.map((b, i) => (
                      <li key={i}>{b}</li>
                    ))}
                  </ul>
                  <div className="resume-item-tags">
                    {e.skills.map((s) => (
                      <span key={s} className="resume-item-tag">
                        {s}
                      </span>
                    ))}
                  </div>
                </div>
              )}
            </article>
          );
        })}
        {filtered.length === 0 && (
          <div className="resume-empty">
            No roles match every selected skill. <button onClick={() => setActiveSkills([])}>Clear filters</button>
          </div>
        )}
      </div>
    </div>
  );
}

window.ResumeBlock = ResumeBlock;