// Gem Radar — Top-scoring hooks worth investigating
function GemRadar({ onSelect }) {
  const gems = window.GEM_SIGNALS || [];

  if (gems.length === 0) {
    return (
      <div style={{ textAlign: "center", padding: "60px 20px", color: "var(--fg-2)" }}>
        <div style={{ fontSize: 40, marginBottom: 12 }}>💎</div>
        <div>No gems detected yet. Run the pipeline to score hooks.</div>
      </div>
    );
  }

  return (
    <div>
      <div style={{ fontSize: 12, color: "var(--fg-2)", marginBottom: 12 }}>
        {gems.length} hooks scoring 5+ out of 11. Higher score = more signals of a serious project.
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(400px, 1fr))", gap: 10 }}>
        {gems.map((g, i) => {
          const fullHook = (window.HOOKS || []).find(h =>
            h.address.toLowerCase() === g.address.toLowerCase() && h.chain === g.chain
          );
          return (
            <div key={g.address + g.chain} className="gem-card" onClick={() => fullHook && onSelect(fullHook)}>
              <div className="gem-card-header">
                <div>
                  <div className="gem-card-name">{g.name}</div>
                  <div className="gem-card-chain">{g.chain}</div>
                </div>
                <span className={"gem-score " + (g.score >= 7 ? "high" : "mid")}>
                  {g.score}/11
                </span>
              </div>
              <div className="gem-card-reasons">
                {g.reasons.map((r, j) => (
                  <span key={j} className="gem-reason">{r}</span>
                ))}
              </div>
              {g.auditUrl && (
                <div style={{ marginTop: 6 }}>
                  <a href={g.auditUrl} target="_blank" rel="noopener"
                     style={{ color: "var(--up)", fontSize: 11, textDecoration: "none" }}
                     onClick={(e) => e.stopPropagation()}>
                    View Audit Report
                  </a>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.GemRadar = GemRadar;