// New Pools — real-time feed of newly created Uniswap pools

function NewPools({ onSelect }) {
  var pools = (window.NEW_POOLS || {}).pools || [];
  var updatedAt = (window.NEW_POOLS || {}).updatedAt || "";

  var explorerUrl = function(addr) {
    return "https://etherscan.io/address/" + addr;
  };

  var dexColor = { v4: "var(--accent)", v3: "var(--accent2)", v2: "var(--fg-2)" };

  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
        <div>
          <div style={{ fontSize: 13, color: "var(--fg-2)" }}>{pools.length} pools in last 24h</div>
          {updatedAt && <div style={{ fontSize: 11, color: "var(--fg-3)", fontFamily: "JetBrains Mono" }}>Feed: {updatedAt.slice(0, 19)}</div>}
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <span style={{ fontSize: 11, color: "var(--accent)", fontFamily: "JetBrains Mono" }}>v4 = Uniswap v4</span>
          <span style={{ fontSize: 11, color: "var(--accent2)", fontFamily: "JetBrains Mono" }}>v3 = Uniswap v3</span>
          <span style={{ fontSize: 11, color: "var(--fg-2)", fontFamily: "JetBrains Mono" }}>v2 = Uniswap v2</span>
        </div>
      </div>

      {pools.length === 0 ? (
        <div style={{ textAlign: "center", padding: "60px 20px", color: "var(--fg-2)" }}>
          <div style={{ fontSize: 40, marginBottom: 12 }}>📡</div>
          <div>Waiting for new pools...</div>
          <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 6 }}>The pool watcher monitors Uniswap v2/v3/v4 in real-time via WebSocket</div>
        </div>
      ) : (
        <div>
          {pools.map(function(p, i) {
            var token = p.newToken || {};
            var hasHook = p.has_hook;
            var dex = p.dex || "?";
            var time = p.discoveredAt ? p.discoveredAt.slice(11, 19) : "";

            return (
              <div key={i} style={{
                background: hasHook ? "rgba(168,85,247,0.05)" : "var(--bg-1)",
                border: "1px solid " + (hasHook ? "rgba(168,85,247,0.3)" : "var(--line)"),
                borderLeft: "3px solid " + (hasHook ? "var(--gem)" : dexColor[dex] || "var(--fg-3)"),
                borderRadius: 8, padding: "12px 16px", marginBottom: 8,
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                      <span style={{ fontWeight: 700, fontSize: 15, color: "var(--fg-0)" }}>
                        {token.symbol || "Unknown"}
                      </span>
                      <span style={{
                        fontSize: 10, fontFamily: "JetBrains Mono", padding: "2px 6px",
                        borderRadius: 4, background: "var(--bg-3)", color: dexColor[dex] || "var(--fg-2)"
                      }}>
                        {dex}
                      </span>
                      {hasHook && (
                        <span style={{ fontSize: 10, fontFamily: "JetBrains Mono", padding: "2px 6px", borderRadius: 4, background: "rgba(168,85,247,0.2)", color: "var(--gem)" }}>
                          HOOK
                        </span>
                      )}
                      {token.name && token.name !== token.symbol && (
                        <span style={{ fontSize: 12, color: "var(--fg-2)" }}>{token.name}</span>
                      )}
                    </div>
                    <div style={{ marginTop: 4, display: "flex", gap: 12, flexWrap: "wrap", fontSize: 11, fontFamily: "JetBrains Mono", color: "var(--fg-2)" }}>
                      {token.address && (
                        <a href={explorerUrl(token.address)} target="_blank" rel="noopener" style={{ color: "var(--accent2)", textDecoration: "none" }}>
                          {token.address.slice(0, 10)}...{token.address.slice(-6)}
                        </a>
                      )}
                      {hasHook && p.hooks && (
                        <span>
                          hook: <a href={explorerUrl(p.hooks)} target="_blank" rel="noopener" style={{ color: "var(--gem)", textDecoration: "none" }}>
                            {p.hooks.slice(0, 10)}...
                          </a>
                        </span>
                      )}
                      {p.hookToken && (
                        <span>
                          hookToken: <a href={explorerUrl(p.hookToken)} target="_blank" rel="noopener" style={{ color: "var(--gem)", textDecoration: "none" }}>
                            {p.hookToken.slice(0, 10)}...
                          </a>
                        </span>
                      )}
                    </div>
                  </div>
                  <div style={{ textAlign: "right", flexShrink: 0 }}>
                    <div style={{ fontSize: 12, fontFamily: "JetBrains Mono", color: "var(--fg-1)" }}>
                      {time}
                    </div>
                    <div style={{ fontSize: 11, fontFamily: "JetBrains Mono", color: "var(--fg-3)" }}>
                      blk {p.block}
                    </div>
                    <a href={p.etherscan || ""} target="_blank" rel="noopener" style={{ fontSize: 10, color: "var(--fg-3)", textDecoration: "none" }}>
                      tx
                    </a>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

window.NewPools = NewPools;