// ============================================================
// Publications, Awards, Off-hours, Services
// ============================================================

const { useState: usePub, useEffect: useEffPub, useRef: useRefPub } = React;

function PubItem({ p, highlightMe }) {
  const [showBib, setShowBib] = usePub(false);
  const [copied, setCopied] = usePub(false);
  const [targeted, setTargeted] = usePub(false);

  // Bold "me" in author list
  const renderAuthors = () => {
    const parts = p.authors.split(/(Tony Danjun Wang\*?)/g);
    return parts.map((part, i) =>
      /^Tony Danjun Wang/.test(part)
        ? <span key={i} className="me">{part}</span>
        : <span key={i}>{part}</span>
    );
  };

  // Hash-target highlight
  useEffPub(() => {
    const check = () => {
      if (window.location.hash === `#pub-${p.id}`) {
        setTargeted(true);
        setTimeout(() => setTargeted(false), 1800);
      }
    };
    check();
    window.addEventListener("hashchange", check);
    return () => window.removeEventListener("hashchange", check);
  }, [p.id]);

  const copyBib = async () => {
    try {
      await navigator.clipboard.writeText(p.bibtex);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch {}
  };

  return (
    <li className={"pub" + (p.featured ? " featured" : "") + (targeted ? " targeted" : "")} id={`pub-${p.id}`}>
      {p.featured && <span className="featured-mark">selected</span>}
      <div className="pub-teaser">
        <a href={p.pdf} target="_blank" rel="noopener" tabIndex={-1}>
          <img src={p.image} alt="" loading="lazy" />
          <span className="pub-venue-tag">{p.venue}</span>
        </a>
      </div>
      <div className="pub-body">
        <h3 className="pub-title">
          <a href={p.pdf} target="_blank" rel="noopener">{p.title}</a>
        </h3>
        <p className="pub-authors">
          {renderAuthors()}
          {p.note && <span className="equal">· {p.note}</span>}
        </p>
        <div className="pub-venue">
          <em>{p.venueLong}</em>
          {p.venueMeta && <><span className="dot">·</span><span>{p.venueMeta}</span></>}
        </div>
        <div className="pub-actions">
          {p.pdf  && <a className="pub-btn primary" href={p.pdf}  target="_blank" rel="noopener">PDF</a>}
          {p.code && <a className="pub-btn" href={p.code} target="_blank" rel="noopener">Code</a>}
          {p.page && <a className="pub-btn" href={p.page} target="_blank" rel="noopener">Project</a>}
          {p.bibtex && (
            <button className="pub-btn" onClick={() => setShowBib((v) => !v)} aria-expanded={showBib}>
              BibTeX
            </button>
          )}
          {p.badge && <span className="pub-badge">{p.badge}</span>}
        </div>
      </div>
      {p.bibtex && (
        <div className={"bibtex-block" + (showBib ? " open" : "")}>
          <button className={"bibtex-copy" + (copied ? " copied" : "")} onClick={copyBib}>
            {copied ? "Copied" : "Copy"}
          </button>
          <pre>{p.bibtex}</pre>
        </div>
      )}
    </li>
  );
}

function Publications() {
  return (
    <Section num="04" title="Publications" id="publications">
      <div className="pub-group">
        <h4 className="pub-group-head">Peer-reviewed</h4>
        <ul className="pub-list">
          {window.PUBLICATIONS.map((p) => <PubItem key={p.id} p={p} />)}
        </ul>
      </div>
      <div className="pub-group">
        <h4 className="pub-group-head">Preprints &amp; workshops</h4>
        <ul className="pub-list">
          {window.PREPRINTS.map((p) => <PubItem key={p.id} p={p} />)}
        </ul>
      </div>
    </Section>
  );
}

function Awards() {
  return (
    <Section num="05" title="Awards" id="awards">
      <ul className="awards-list">
        {window.AWARDS.map((a, i) => (
          <li key={i}>
            <span className="award-icon" aria-hidden="true">★</span>
            <span className="award-date">{a.date}</span>
            <span className="award-text">
              <a href={a.href} target={a.href.startsWith("#") ? "_self" : "_blank"} rel="noopener">
                <strong>{a.text}</strong>
              </a>
              <span className="award-detail">{a.detail}</span>
            </span>
          </li>
        ))}
      </ul>
    </Section>
  );
}

function OffHours() {
  return (
    <Section num="06" title="Off-Hours" id="off-hours">
      <div className="off-hours">
        {window.OFF_HOURS.map((c, i) => (
          <div key={i} className="card">
            <div className="card-head">
              <h4>{c.title}</h4>
              {c.tag && <span className="card-tag">{c.tag}</span>}
            </div>
            <p>{c.body}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

function Services() {
  return (
    <Section num="07" title="Service" id="service">
      <p style={{
        fontFamily: "var(--mono)",
        fontSize: 12,
        color: "var(--ink-3)",
        letterSpacing: "0.04em",
        margin: 0,
        padding: "14px 16px",
        border: "1px dashed var(--rule-2)",
        borderRadius: "var(--radius)",
        background: "var(--paper-2)",
      }}>
        // placeholder — coming soon
      </p>
    </Section>
  );
}

Object.assign(window, { PubItem, Publications, Awards, OffHours, Services });