// Hook Registry Table — sortable, filterable
const { useState: HUS, useMemo: HUM } = React;

function shortAddr(addr) {
  if (!addr) return "";
  return addr.slice(0, 6) + "..." + addr.slice(-4);
}
function fmtUSD(v) {
  if (!v || v < 0.01) return "";
  if (v >= 1e9) return "$" + (v / 1e9).toFixed(1) + "B";
  if (v >= 1e6) return "$" + (v / 1e6).toFixed(1) + "M";
  if (v >= 1e3) return "$" + (v / 1e3).toFixed(1) + "K";
  return "$" + v.toFixed(2);
}
function fmtPrice(v) {
  if (!v) return "";
  if (v >= 1000)
    return "$" + v.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  if (v >= 1) return "$" + v.toFixed(2);
  if (v >= 0.01) return "$" + v.toFixed(4);
  return "$" + v.toFixed(6);
}
function shortDate(iso) {
  if (!iso) return "";
  return iso.slice(0, 10);
}
function daysSince(iso) {
  if (!iso) return "";
  var d = new Date(iso);
  var now = new Date();
  var days = Math.floor((now - d) / 86400000);
  if (days < 1) return "today";
  if (days === 1) return "1d";
  if (days < 30) return days + "d";
  if (days < 365) return Math.floor(days / 30) + "mo";
  return Math.floor(days / 365) + "y";
}

function GemBadge({ score }) {
  var cls = score >= 7 ? "high" : score >= 5 ? "mid" : "low";
  return <span className={"gem-score " + cls}>{score}</span>;
}

function FlagDots({ flags }) {
  var order = [
    "beforeInitialize",
    "afterInitialize",
    "beforeAddLiquidity",
    "afterAddLiquidity",
    "beforeRemoveLiquidity",
    "afterRemoveLiquidity",
    "beforeSwap",
    "afterSwap",
    "beforeDonate",
    "afterDonate",
    "beforeSwapReturnsDelta",
    "afterSwapReturnsDelta",
    "afterAddLiquidityReturnsDelta",
    "afterRemoveLiquidityReturnsDelta",
  ];
  return (
    <div
      className="flag-dots"
      title={
        order
          .filter(function (f) {
            return flags[f];
          })
          .join(", ") || "none"
      }
    >
      {order.map(function (f, i) {
        return (
          <span key={i} className={"flag-dot" + (flags[f] ? " on" : "")} />
        );
      })}
    </div>
  );
}

// Sortable column header
function SortHeader({ label, field, sortField, sortDir, onSort }) {
  var active = sortField === field;
  var arrow = active ? (sortDir === "asc" ? " ↑" : " ↓") : "";
  return (
    <th
      onClick={function () {
        onSort(field);
      }}
      style={{ cursor: "pointer", userSelect: "none" }}
    >
      {label}
      {arrow}
    </th>
  );
}

function HooksTable({ hooks, chainFilter, focusFilter, query, onSelect }) {
  var [sortField, setSortField] = HUS("gemScore");
  var [sortDir, setSortDir] = HUS("desc");
  var [mcapMin, setMcapMin] = HUS("");
  var [hideUtility, setHideUtility] = HUS(true);

  function onSort(field) {
    if (sortField === field) {
      setSortDir(sortDir === "asc" ? "desc" : "asc");
    } else {
      setSortField(field);
      setSortDir("desc");
    }
  }

  var filtered = HUM(
    function () {
      var list = hooks || [];

      // Chain filter
      if (chainFilter && chainFilter !== "all") {
        list = list.filter(function (h) {
          return h.chain === chainFilter;
        });
      }

      // Focus filters
      if (focusFilter === "has_token")
        list = list.filter(function (h) {
          return h.topToken && h.topToken.priceUSD > 0;
        });
      if (focusFilter === "mcap_1m")
        list = list.filter(function (h) {
          return h.topToken && h.topToken.mcapUSD > 1e6;
        });
      if (focusFilter === "audited")
        list = list.filter(function (h) {
          return h.auditUrl;
        });
      if (focusFilter === "gem7")
        list = list.filter(function (h) {
          return h.gemScore >= 7;
        });
      if (focusFilter === "pending")
        list = list.filter(function (h) {
          return h.registryStatus === "pending";
        });

      // MCap min filter
      if (mcapMin) {
        var min = parseFloat(mcapMin);
        if (!isNaN(min) && min > 0) {
          list = list.filter(function (h) {
            return h.topToken && h.topToken.mcapUSD >= min;
          });
        }
      }

      // Hide utility hooks
      if (hideUtility) {
        list = list.filter(function (h) {
          return h.category !== "utility";
        });
      }

      // Search
      if (query) {
        var q = query.toLowerCase();
        list = list.filter(function (h) {
          return (
            (h.name || "").toLowerCase().includes(q) ||
            (h.address || "").toLowerCase().includes(q) ||
            (h.description || "").toLowerCase().includes(q) ||
            ((h.topToken && h.topToken.symbol) || "").toLowerCase().includes(q)
          );
        });
      }

      // Sort
      var dir = sortDir === "asc" ? 1 : -1;
      list = list.slice().sort(function (a, b) {
        var va, vb;
        switch (sortField) {
          case "name":
            va = (a.name || "").toLowerCase();
            vb = (b.name || "").toLowerCase();
            return va < vb ? -dir : va > vb ? dir : 0;
          case "chain":
            va = a.chain || "";
            vb = b.chain || "";
            return va < vb ? -dir : va > vb ? dir : 0;
          case "mcap":
            va = (a.topToken && a.topToken.mcapUSD) || 0;
            vb = (b.topToken && b.topToken.mcapUSD) || 0;
            return (va - vb) * dir;
          case "price":
            va = (a.topToken && a.topToken.priceUSD) || 0;
            vb = (b.topToken && b.topToken.priceUSD) || 0;
            return (va - vb) * dir;
          case "pools":
            return ((a.poolCount || 0) - (b.poolCount || 0)) * dir;
          case "gemScore":
            return ((a.gemScore || 0) - (b.gemScore || 0)) * dir;
          case "firstSeen":
            va = a.firstSeen || "";
            vb = b.firstSeen || "";
            return va < vb ? -dir : va > vb ? dir : 0;
          case "lastActive":
            va = a.lastActive || "";
            vb = b.lastActive || "";
            return va < vb ? -dir : va > vb ? dir : 0;
          case "tokens":
            return ((a.tokenCount || 0) - (b.tokenCount || 0)) * dir;
          default:
            return ((a.gemScore || 0) - (b.gemScore || 0)) * -1;
        }
      });

      return list;
    },
    [
      hooks,
      chainFilter,
      focusFilter,
      query,
      mcapMin,
      hideUtility,
      sortField,
      sortDir,
    ],
  );

  return (
    <div>
      {/* MCap filter + utility toggle */}
      <div
        style={{
          display: "flex",
          gap: 12,
          alignItems: "center",
          marginBottom: 10,
        }}
      >
        <div style={{ fontSize: 12, color: "var(--fg-2)" }}>
          Showing {filtered.length} of {(hooks || []).length}
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
          <span
            style={{
              fontSize: 11,
              color: "var(--fg-2)",
              fontFamily: "JetBrains Mono",
            }}
          >
            MCap ≥
          </span>
          <input
            type="text"
            placeholder="e.g. 1000000"
            value={mcapMin}
            onChange={function (e) {
              setMcapMin(e.target.value);
            }}
            style={{
              width: 110,
              padding: "4px 8px",
              borderRadius: 4,
              background: "var(--bg-2)",
              border: "1px solid var(--line)",
              color: "var(--fg-0)",
              font: "400 12px JetBrains Mono, monospace",
              outline: "none",
            }}
          />
        </div>
        <label
          style={{
            display: "flex",
            alignItems: "center",
            gap: 4,
            fontSize: 12,
            color: "var(--fg-2)",
            cursor: "pointer",
          }}
        >
          <input
            type="checkbox"
            checked={hideUtility}
            onChange={function () {
              setHideUtility(!hideUtility);
            }}
          />
          Hide utility hooks
        </label>
      </div>

      <table className="hook-table">
        <thead>
          <tr>
            <SortHeader
              label="Name"
              field="name"
              sortField={sortField}
              sortDir={sortDir}
              onSort={onSort}
            />
            <SortHeader
              label="Chain"
              field="chain"
              sortField={sortField}
              sortDir={sortDir}
              onSort={onSort}
            />
            <th>Contract</th>
            <SortHeader
              label="Token"
              field="tokens"
              sortField={sortField}
              sortDir={sortDir}
              onSort={onSort}
            />
            <SortHeader
              label="Price"
              field="price"
              sortField={sortField}
              sortDir={sortDir}
              onSort={onSort}
            />
            <SortHeader
              label="MCap"
              field="mcap"
              sortField={sortField}
              sortDir={sortDir}
              onSort={onSort}
            />
            <SortHeader
              label="Pools"
              field="pools"
              sortField={sortField}
              sortDir={sortDir}
              onSort={onSort}
            />
            <th>Status</th>
            <SortHeader
              label="Created"
              field="firstSeen"
              sortField={sortField}
              sortDir={sortDir}
              onSort={onSort}
            />
            <SortHeader
              label="Last Active"
              field="lastActive"
              sortField={sortField}
              sortDir={sortDir}
              onSort={onSort}
            />
            <th>Links</th>
            <SortHeader
              label="Gem"
              field="gemScore"
              sortField={sortField}
              sortDir={sortDir}
              onSort={onSort}
            />
          </tr>
        </thead>
        <tbody>
          {filtered.map(function (h) {
            return (
              <tr
                key={h.address + h.chain}
                onClick={function () {
                  onSelect(h);
                }}
              >
                <td>
                  <div className="hook-name">{h.name}</div>
                  {h.description && (
                    <div
                      style={{
                        fontSize: 11,
                        color: "var(--fg-2)",
                        marginTop: 2,
                        maxWidth: 250,
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap",
                      }}
                    >
                      {h.description}
                    </div>
                  )}
                </td>
                <td>
                  <span
                    className="hook-chain-badge"
                    style={{ background: "var(--bg-3)", color: "var(--fg-1)" }}
                  >
                    {h.chain}
                  </span>
                </td>
                <td>
                  <span className="hook-addr">{shortAddr(h.address)}</span>
                  <div
                    style={{ fontSize: 10, color: "var(--fg-3)", marginTop: 2 }}
                  >
                    {h.activeFlags}/14 flags
                  </div>
                </td>
                <td>
                  {h.registryStatus === "pending" ? (
                    <span
                      className="badge"
                      style={{
                        background: "rgba(245,158,11,0.15)",
                        color: "#f59e0b",
                      }}
                    >
                      PR#{h.prNumber}
                    </span>
                  ) : h.registryStatus === "merged" ? (
                    <span
                      className="badge"
                      style={{
                        background: "rgba(34,197,94,0.1)",
                        color: "var(--up)",
                      }}
                    >
                      LIVE
                    </span>
                  ) : (
                    ""
                  )}
                </td>
                <td>
                  {h.topToken ? (
                    <span
                      style={{
                        color: "var(--fg-0)",
                        fontFamily: "JetBrains Mono",
                        fontSize: 12,
                      }}
                    >
                      {h.topToken.symbol}
                    </span>
                  ) : h.tokenCount > 0 ? (
                    <span style={{ color: "var(--fg-3)", fontSize: 11 }}>
                      {h.tokenCount} tokens
                    </span>
                  ) : (
                    ""
                  )}
                </td>
                <td
                  style={{
                    fontFamily: "JetBrains Mono",
                    fontSize: 12,
                    color: "var(--fg-1)",
                  }}
                >
                  {h.topToken ? fmtPrice(h.topToken.priceUSD) : ""}
                </td>
                <td style={{ fontFamily: "JetBrains Mono", fontSize: 12 }}>
                  {h.topToken && h.topToken.mcapUSD > 0 ? (
                    <span
                      style={{
                        color:
                          h.topToken.mcapUSD > 1e7
                            ? "var(--up)"
                            : h.topToken.mcapUSD > 1e6
                              ? "var(--fg-0)"
                              : "var(--fg-2)",
                        fontWeight: h.topToken.mcapUSD > 1e7 ? 600 : 400,
                      }}
                    >
                      {fmtUSD(h.topToken.mcapUSD)}
                    </span>
                  ) : (
                    ""
                  )}
                </td>
                <td style={{ textAlign: "center" }}>
                  {h.poolCount > 0 ? (
                    <span className="badge pools">{h.poolCount}</span>
                  ) : (
                    ""
                  )}
                </td>
                <td
                  style={{
                    fontFamily: "JetBrains Mono",
                    fontSize: 11,
                    color: "var(--fg-2)",
                  }}
                >
                  {h.firstSeen ? (
                    <span title={h.firstSeen}>{shortDate(h.firstSeen)}</span>
                  ) : (
                    ""
                  )}
                </td>
                <td style={{ fontFamily: "JetBrains Mono", fontSize: 11 }}>
                  {h.lastActive ? (
                    <span
                      title={h.lastActive}
                      style={{
                        color:
                          daysSince(h.lastActive) === "today"
                            ? "var(--up)"
                            : parseInt(daysSince(h.lastActive)) < 7
                              ? "var(--fg-0)"
                              : "var(--fg-2)",
                      }}
                    >
                      {daysSince(h.lastActive)}
                    </span>
                  ) : (
                    ""
                  )}
                </td>
                <td>
                  {h.auditUrl && <span className="badge audit">AUDIT</span>}
                  {h.website && (
                    <a
                      href={h.website}
                      target="_blank"
                      rel="noopener"
                      className="badge"
                      style={{
                        background: "rgba(99,126,234,0.15)",
                        color: "var(--accent2)",
                        textDecoration: "none",
                      }}
                      onClick={function (e) {
                        e.stopPropagation();
                      }}
                    >
                      WEB
                    </a>
                  )}
                  {h.twitter && (
                    <a
                      href={h.twitter}
                      target="_blank"
                      rel="noopener"
                      className="badge"
                      style={{
                        background: "rgba(29,161,242,0.15)",
                        color: "#1DA1F2",
                        textDecoration: "none",
                      }}
                      onClick={function (e) {
                        e.stopPropagation();
                      }}
                    >
                      X
                    </a>
                  )}
                  {h.github && (
                    <a
                      href={h.github}
                      target="_blank"
                      rel="noopener"
                      className="badge"
                      style={{
                        background: "rgba(255,255,255,0.08)",
                        color: "var(--fg-1)",
                        textDecoration: "none",
                      }}
                      onClick={function (e) {
                        e.stopPropagation();
                      }}
                    >
                      GH
                    </a>
                  )}
                </td>
                <td>
                  <GemBadge score={h.gemScore || 0} />
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

window.HooksTable = HooksTable;