// Hook Detail View — full info with PR links, clickable addresses, project links

function HookDetail({ hook, onBack }) {
  if (!hook) return null;

  var flags = hook.flags || {};
  var props = hook.properties || {};
  var pools = hook.pools || [];

  var flagOrder = [
    "beforeInitialize", "afterInitialize",
    "beforeAddLiquidity", "afterAddLiquidity",
    "beforeRemoveLiquidity", "afterRemoveLiquidity",
    "beforeSwap", "afterSwap",
    "beforeDonate", "afterDonate",
    "beforeSwapReturnsDelta", "afterSwapReturnsDelta",
    "afterAddLiquidityReturnsDelta", "afterRemoveLiquidityReturnsDelta",
  ];

  var explorerUrl = function(chain, addr) {
    var explorers = {
      ethereum: "https://etherscan.io/address/",
      base: "https://basescan.org/address/",
      arbitrum: "https://arbiscan.io/address/",
      optimism: "https://optimistic.etherscan.io/address/",
      polygon: "https://polygonscan.com/address/",
      bnb: "https://bscscan.com/address/",
      unichain: "https://uniscan.xyz/address/",
      monad: "https://monadexplorer.com/address/",
      avalanche: "https://snowtrace.io/address/",
    };
    return (explorers[chain] || "https://etherscan.io/address/") + addr;
  };

  var isPending = hook.registryStatus === "pending";

  return (
    <div className="detail">
      <div className="detail-header">
        <div style={{ flex: 1 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
            <div className="detail-title">{hook.name}</div>
            <span className="hook-chain-badge" style={{ background: "var(--bg-3)", color: "var(--fg-1)", fontSize: 12, padding: "3px 10px" }}>{hook.chain}</span>
            {isPending ? (
              <span className="badge" style={{ background: "rgba(245,158,11,0.15)", color: "#f59e0b" }}>PENDING REVIEW</span>
            ) : (
              <span className="badge" style={{ background: "rgba(34,197,94,0.1)", color: "var(--up)" }}>LIVE</span>
            )}
            {hook.gemScore > 0 && (
              <span className={"gem-score " + (hook.gemScore >= 7 ? "high" : hook.gemScore >= 5 ? "mid" : "low")}>{hook.gemScore}/11</span>
            )}
          </div>
          {hook.address && (
            <a href={explorerUrl(hook.chain, hook.address)} target="_blank" rel="noopener" className="detail-addr" style={{ textDecoration: "none", color: "var(--accent2)" }}>{hook.address}</a>
          )}
          {hook.description && (
            <div style={{ color: "var(--fg-1)", marginTop: 8, fontSize: 14, lineHeight: 1.6 }}>{hook.description}</div>
          )}
          <div style={{ marginTop: 10, display: "flex", gap: 6, flexWrap: "wrap" }}>
            {hook.auditUrl && <span className="badge audit">AUDITED</span>}
            {hook.verified && <span className="badge verified">VERIFIED</span>}
            {hook.poolCount > 0 && <span className="badge pools">{hook.poolCount} POOLS</span>}
          </div>
        </div>
        <button className="detail-back" onClick={onBack}>Back</button>
      </div>

      {/* PR Info */}
      {(hook.prNumber || hook.prUrl) && (
        <div className="detail-section">
          <div className="detail-section-title">Registry PR</div>
          <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
            <a href={hook.prUrl || ("https://github.com/Uniswap/hooklist/pull/" + hook.prNumber)} target="_blank" rel="noopener"
               style={{ color: "var(--accent)", fontSize: 13, textDecoration: "none", fontFamily: "JetBrains Mono" }}>
              PR #{hook.prNumber}
            </a>
            <span style={{ color: "var(--fg-2)", fontSize: 12 }}>
              {isPending ? "Under review" : "Merged" + (hook.mergedAt ? " " + hook.mergedAt.slice(0, 10) : "")}
            </span>
            {hook.prAuthor && <span style={{ color: "var(--fg-3)", fontSize: 12 }}>by {hook.prAuthor}</span>}
          </div>
        </div>
      )}

      {/* Links */}
      <div className="detail-section">
        <div className="detail-section-title">Links</div>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          {hook.address && <a href={explorerUrl(hook.chain, hook.address)} target="_blank" rel="noopener" style={{ color: "var(--accent2)", fontSize: 12, textDecoration: "none", padding: "4px 10px", borderRadius: 6, background: "var(--bg-2)" }}>Explorer</a>}
          {hook.auditUrl && <a href={hook.auditUrl} target="_blank" rel="noopener" style={{ color: "var(--up)", fontSize: 12, textDecoration: "none", padding: "4px 10px", borderRadius: 6, background: "var(--bg-2)" }}>Audit</a>}
          {hook.website && <a href={hook.website} target="_blank" rel="noopener" style={{ color: "var(--accent2)", fontSize: 12, textDecoration: "none", padding: "4px 10px", borderRadius: 6, background: "var(--bg-2)" }}>Website</a>}
          {hook.twitter && <a href={hook.twitter} target="_blank" rel="noopener" style={{ color: "#1DA1F2", fontSize: 12, textDecoration: "none", padding: "4px 10px", borderRadius: 6, background: "var(--bg-2)" }}>Twitter/X</a>}
          {hook.github && <a href={hook.github} target="_blank" rel="noopener" style={{ color: "var(--fg-1)", fontSize: 12, textDecoration: "none", padding: "4px 10px", borderRadius: 6, background: "var(--bg-2)" }}>GitHub</a>}
          {hook.deployer && <a href={explorerUrl(hook.chain, hook.deployer)} target="_blank" rel="noopener" style={{ color: "var(--fg-2)", fontSize: 12, textDecoration: "none", padding: "4px 10px", borderRadius: 6, background: "var(--bg-2)" }}>Deployer {hook.deployer.slice(0, 8)}...</a>}
        </div>
      </div>

      {/* Token Info */}
      {hook.topToken && hook.topToken.priceUSD > 0 && (
        <div className="detail-section">
          <div className="detail-section-title">Token</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: 10 }}>
            <div style={{ background: "var(--bg-2)", padding: 12, borderRadius: 8 }}>
              <div style={{ fontSize: 11, color: "var(--fg-2)", fontFamily: "JetBrains Mono" }}>SYMBOL</div>
              <div style={{ fontSize: 16, fontWeight: 600 }}>
                <a href={explorerUrl(hook.chain, hook.topToken.address)} target="_blank" rel="noopener" style={{ color: "var(--fg-0)", textDecoration: "none" }}>{hook.topToken.symbol}</a>
              </div>
            </div>
            <div style={{ background: "var(--bg-2)", padding: 12, borderRadius: 8 }}>
              <div style={{ fontSize: 11, color: "var(--fg-2)", fontFamily: "JetBrains Mono" }}>PRICE</div>
              <div style={{ fontSize: 16, fontWeight: 600, color: "var(--fg-0)" }}>
                ${typeof hook.topToken.priceUSD === "number" ? (hook.topToken.priceUSD >= 1 ? hook.topToken.priceUSD.toFixed(2) : hook.topToken.priceUSD.toFixed(6)) : hook.topToken.priceUSD}
              </div>
            </div>
            <div style={{ background: "var(--bg-2)", padding: 12, borderRadius: 8 }}>
              <div style={{ fontSize: 11, color: "var(--fg-2)", fontFamily: "JetBrains Mono" }}>MCAP</div>
              <div style={{ fontSize: 16, fontWeight: 600, color: hook.topToken.mcapUSD > 1e7 ? "var(--up)" : "var(--fg-0)" }}>
                {hook.topToken.mcapUSD >= 1e9 ? "$" + (hook.topToken.mcapUSD/1e9).toFixed(1) + "B" : hook.topToken.mcapUSD >= 1e6 ? "$" + (hook.topToken.mcapUSD/1e6).toFixed(1) + "M" : hook.topToken.mcapUSD >= 1e3 ? "$" + (hook.topToken.mcapUSD/1e3).toFixed(1) + "K" : "$" + (hook.topToken.mcapUSD||0).toFixed(0)}
              </div>
            </div>
            {hook.topToken.volume24h > 0 && (
              <div style={{ background: "var(--bg-2)", padding: 12, borderRadius: 8 }}>
                <div style={{ fontSize: 11, color: "var(--fg-2)", fontFamily: "JetBrains Mono" }}>VOL 24H</div>
                <div style={{ fontSize: 16, fontWeight: 600, color: "var(--fg-0)" }}>${(hook.topToken.volume24h >= 1e6 ? (hook.topToken.volume24h/1e6).toFixed(1) + "M" : (hook.topToken.volume24h/1e3).toFixed(0) + "K")}</div>
              </div>
            )}
            {hook.topToken.liquidity > 0 && (
              <div style={{ background: "var(--bg-2)", padding: 12, borderRadius: 8 }}>
                <div style={{ fontSize: 11, color: "var(--fg-2)", fontFamily: "JetBrains Mono" }}>LIQUIDITY</div>
                <div style={{ fontSize: 16, fontWeight: 600, color: "var(--fg-0)" }}>${(hook.topToken.liquidity >= 1e6 ? (hook.topToken.liquidity/1e6).toFixed(1) + "M" : (hook.topToken.liquidity/1e3).toFixed(0) + "K")}</div>
              </div>
            )}
            {hook.topToken.priceChange5m !== undefined && hook.topToken.priceChange5m !== 0 && (
              <div style={{ background: "var(--bg-2)", padding: 12, borderRadius: 8 }}>
                <div style={{ fontSize: 11, color: "var(--fg-2)", fontFamily: "JetBrains Mono" }}>5M</div>
                <div style={{ fontSize: 16, fontWeight: 600, color: hook.topToken.priceChange5m >= 0 ? "var(--up)" : "var(--down)" }}>{hook.topToken.priceChange5m >= 0 ? "+" : ""}{hook.topToken.priceChange5m.toFixed(1)}%</div>
              </div>
            )}
            {hook.topToken.priceChange1h !== undefined && hook.topToken.priceChange1h !== 0 && (
              <div style={{ background: "var(--bg-2)", padding: 12, borderRadius: 8 }}>
                <div style={{ fontSize: 11, color: "var(--fg-2)", fontFamily: "JetBrains Mono" }}>1H</div>
                <div style={{ fontSize: 16, fontWeight: 600, color: hook.topToken.priceChange1h >= 0 ? "var(--up)" : "var(--down)" }}>{hook.topToken.priceChange1h >= 0 ? "+" : ""}{hook.topToken.priceChange1h.toFixed(1)}%</div>
              </div>
            )}
            {hook.topToken.priceChange24h !== undefined && hook.topToken.priceChange24h !== 0 && (
              <div style={{ background: "var(--bg-2)", padding: 12, borderRadius: 8 }}>
                <div style={{ fontSize: 11, color: "var(--fg-2)", fontFamily: "JetBrains Mono" }}>24H</div>
                <div style={{ fontSize: 16, fontWeight: 600, color: hook.topToken.priceChange24h >= 0 ? "var(--up)" : "var(--down)" }}>{hook.topToken.priceChange24h >= 0 ? "+" : ""}{hook.topToken.priceChange24h.toFixed(1)}%</div>
              </div>
            )}
          </div>
          <div style={{ marginTop: 8, fontSize: 11, color: "var(--fg-3)", fontFamily: "JetBrains Mono" }}>
            Contract: <a href={explorerUrl(hook.chain, hook.topToken.address)} target="_blank" rel="noopener" style={{ color: "var(--fg-2)", textDecoration: "none" }}>{hook.topToken.address}</a>
          </div>
        </div>
      )}

      {/* Timeline */}
      {(hook.firstSeen || hook.lastActive) && (
        <div className="detail-section">
          <div className="detail-section-title">Timeline</div>
          <div style={{ display: "flex", gap: 20, flexWrap: "wrap" }}>
            {hook.firstSeen && <div><span style={{ color: "var(--fg-2)", fontSize: 12 }}>First pool: </span><span style={{ color: "var(--fg-0)", fontSize: 12, fontFamily: "JetBrains Mono" }}>{hook.firstSeen.slice(0, 10)}</span></div>}
            {hook.lastActive && <div><span style={{ color: "var(--fg-2)", fontSize: 12 }}>Last pool: </span><span style={{ color: "var(--fg-0)", fontSize: 12, fontFamily: "JetBrains Mono" }}>{hook.lastActive.slice(0, 10)}</span></div>}
            {hook.firstBlock > 0 && <div><span style={{ color: "var(--fg-2)", fontSize: 12 }}>Block range: </span><span style={{ color: "var(--fg-3)", fontSize: 11, fontFamily: "JetBrains Mono" }}>{hook.firstBlock} — {hook.lastBlock}</span></div>}
          </div>
        </div>
      )}

      {/* Flags */}
      <div className="detail-section">
        <div className="detail-section-title">Permission Flags ({hook.activeFlags || 0}/14)</div>
        <div className="flag-matrix">
          {flagOrder.map(function(f) { return <div key={f} className={"flag-item" + (flags[f] ? " on" : "")}><span className="dot" />{f.replace(/([A-Z])/g, " $1").trim()}</div>; })}
        </div>
      </div>

      {/* Properties */}
      {Object.keys(props).length > 0 && (
        <div className="detail-section">
          <div className="detail-section-title">Properties</div>
          <div className="flag-matrix">
            {Object.entries(props).map(function(entry) { return <div key={entry[0]} className={"flag-item" + (entry[1] === true ? " on" : "")}><span className="dot" />{entry[0].replace(/([A-Z])/g, " $1").trim()}: {String(entry[1])}</div>; })}
          </div>
        </div>
      )}

      {/* Gem Reasons */}
      {hook.gemReasons && hook.gemReasons.length > 0 && hook.gemReasons[0] !== "pending" && (
        <div className="detail-section">
          <div className="detail-section-title">Gem Score</div>
          <div className="gem-card-reasons">
            {hook.gemReasons.map(function(r, i) { return <span key={i} className="gem-reason">{r}</span>; })}
          </div>
        </div>
      )}

      {/* Pools */}
      {pools.length > 0 && (
        <div className="detail-section">
          <div className="detail-section-title">Pools ({pools.length})</div>
          {pools.map(function(p, i) {
            return (
              <div key={i} className="pool-row">
                <a href={explorerUrl(hook.chain, p.currency0 || "")} target="_blank" rel="noopener" style={{ color: "var(--fg-0)", textDecoration: "none", fontWeight: 500, fontFamily: "JetBrains Mono", fontSize: 12 }}>{(p.currency0 || "").slice(0, 10)}...</a>
                <span style={{ color: "var(--fg-3)" }}>/</span>
                <a href={explorerUrl(hook.chain, p.currency1 || "")} target="_blank" rel="noopener" style={{ color: "var(--fg-0)", textDecoration: "none", fontWeight: 500, fontFamily: "JetBrains Mono", fontSize: 12 }}>{(p.currency1 || "").slice(0, 10)}...</a>
                <span className="pool-fee">Fee: {p.fee}</span>
                <span className="pool-block">Block #{p.block_number}</span>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

window.HookDetail = HookDetail;