// ==== Skills matrix ==================================================

function Skills() {
  const [q, setQ] = useState("");
  const [activeGroup, setActiveGroup] = useState(null);
  const groups = AYUSH.SKILLS;
  const filter = q.trim().toLowerCase();

  // count of matches per group
  const counts = groups.map(g =>
    !filter ? g.items.length : g.items.filter(i => i.toLowerCase().includes(filter)).length
  );
  const totalMatching = counts.reduce((a, b) => a + b, 0);

  return (
    <section id="skills" className="scene" data-screen-label="13 Skills">
      <div className="scene-head">
        <div className="eyebrow">Stack</div>
        <h2>What I <em>reach for</em>.</h2>
          <p className="lede">
            Six categories. {AYUSH.SKILLS.reduce((s, g) => s + g.items.length, 0)} tools across them. Outlined pills are core. Try the search.
          </p>
      </div>

      <div className="skills-wrap">
        <div className="skills-bar">
          <div className="skills-search">
            <span className="prefix">›</span>
            <input
              type="text"
              placeholder="filter — try 'mcp', 'rust', 'owasp'…"
              value={q}
              onChange={e => setQ(e.target.value)}
            />
            {q && <button className="clear" onClick={() => setQ("")}>×</button>}
          </div>
          <div className="skills-summary mono">
            {filter ? (
              <><span style={{color:"var(--mint)"}}>{totalMatching}</span> matching</>
            ) : (
              <><span style={{color:"var(--mint)"}}>{AYUSH.SKILLS.reduce((s, g) => s + g.items.length, 0)}</span> tools</>
            )}
          </div>
        </div>

        <div className="skills-grid">
          {groups.map((g, i) => {
            const matchedItems = filter
              ? g.items.filter(i => i.toLowerCase().includes(filter))
              : g.items;
            const dim = filter && matchedItems.length === 0;
            const focus = activeGroup === i;
            return (
              <div
                key={i}
                className={"skill-group" + (dim ? " dim" : "") + (focus ? " focus" : "")}
                onMouseEnter={() => setActiveGroup(i)}
                onMouseLeave={() => setActiveGroup(null)}
              >
                <div className="skill-group-head">
                  <h4>{g.group}</h4>
                  <span className="count">{matchedItems.length}/{g.items.length}</span>
                </div>
                <div className="skill-list">
                  {matchedItems.map((it, j) => (
                    <span
                      key={j}
                      className={"skill-pill" + (g.hot && g.hot.includes(it) ? " hot" : "")}
                    >
                      {filter ? highlight(it, filter) : it}
                    </span>
                  ))}
                  {filter && matchedItems.length === 0 && (
                    <span className="mono muted" style={{fontSize: 11}}>no matches in this group</span>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function highlight(text, q) {
  const i = text.toLowerCase().indexOf(q);
  if (i < 0) return text;
  return (
    <>
      {text.slice(0, i)}
      <mark>{text.slice(i, i + q.length)}</mark>
      {text.slice(i + q.length)}
    </>
  );
}

Object.assign(window, { Skills });