import { useListEvmBorrowProducts } from "@coinbase/cdp-hooks";

function BorrowProductList() {
  const { data, status, error } = useListEvmBorrowProducts({
    network: "base",
    protocol: "morpho_blue",
  });

  if (status === "pending") return <p>Loading...</p>;
  if (status === "error") return <p>Error: {error?.message}</p>;

  return (
    <ul>
      {data?.borrowProducts.map((p) => (
        <li key={p.borrowProductId}>
          {p.name} — {p.assets.map((a) => a.token.symbol).join(" / ")}
        </li>
      ))}
    </ul>
  );
}

import { useGetEvmBorrowProduct } from "@coinbase/cdp-hooks";

function BorrowProductDetail({ productId }: { productId: string }) {
  const { data, status, error } = useGetEvmBorrowProduct({
    borrowProductId: productId,
  });

  if (status === "pending") return <p>Loading...</p>;
  if (status === "error") return <p>Error: {error?.message}</p>;
  if (!data) return null;

  const { marketParams } = data.protocolDetails;

  return (
    <div>
      <h3>{data.name}</h3>
      <p>LLTV: {(marketParams.lltvBps / 100).toFixed(2)}%</p>
      <p>Collateral: {marketParams.collateralToken.symbol}</p>
      <p>Loan: {marketParams.loanToken.symbol}</p>
    </div>
  );
}

import { useListBorrowPositions, useCurrentUser } from "@coinbase/cdp-hooks";

function BorrowPositions() {
  const { currentUser } = useCurrentUser();
  const smartAccount = currentUser?.evmSmartAccounts?.[0];

  const { data, status, error } = useListBorrowPositions({
    evmSmartAccount: smartAccount,
    enabled: !!smartAccount,
  });

  if (status === "pending") return <p>Loading...</p>;
  if (status === "error") return <p>Error: {error?.message}</p>;
  if (!data?.borrowPositions.length) return <p>No positions found.</p>;

  return (
    <table>
      <thead>
        <tr>
          <th>Product</th>
          <th>Collateral</th>
          <th>Debt</th>
          <th>Health</th>
        </tr>
      </thead>
      <tbody>
        {data.borrowPositions.map((pos) => (
          <tr key={pos.borrowProductId}>
            <td>{pos.borrowProductId}</td>
            <td>
              {pos.onchainState.collateral.map((c) => (
                <div key={c.assetId}>
                  {c.token.symbol}: {c.amount}
                </div>
              ))}
            </td>
            <td>
              {pos.onchainState.debt.map((d) => (
                <div key={d.assetId}>
                  {d.token.symbol}: {d.amount}
                </div>
              ))}
            </td>
            <td>{pos.onchainState.healthStatus}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

import { useCreateBorrowPosition } from "@coinbase/cdp-hooks";

function OpenPosition() {
  const { createBorrowPosition, data, status, error } =
    useCreateBorrowPosition();

  const handleOpen = async () => {
    await createBorrowPosition({
      borrowProductId: "bp_07fb56c0-9afe-5440-8ff2-5b0e115458df",
      collateralAmount: "1",   // 1 cbBTC
      loanAmount: "10000",     // 10,000 USDC
      useCdpPaymaster: true,
    });
  };

  return (
    <div>
      <button
        onClick={handleOpen}
        disabled={status === "pending"}
      >
        {status === "pending" ? "Opening..." : "Open Position"}
      </button>
      {status === "success" && data?.userOpHash && (
        <p>Confirmed: {data.userOpHash}</p>
      )}
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

import { useAdjustBorrowPosition } from "@coinbase/cdp-hooks";

function AdjustPosition() {
  const { adjustBorrowPosition, data, status, error } =
    useAdjustBorrowPosition();

  // Example: add collateral and borrow more in a single request
  const handleAdjust = async () => {
    await adjustBorrowPosition({
      borrowProductId: "bp_07fb56c0-9afe-5440-8ff2-5b0e115458df",
      addCollateralAmount: "0.5",  // add 0.5 cbBTC
      borrowLoanAmount: "5000",    // borrow 5,000 more USDC
      useCdpPaymaster: true,
    });
  };

  return (
    <div>
      <button
        onClick={handleAdjust}
        disabled={status === "pending"}
      >
        {status === "pending" ? "Adjusting..." : "Adjust Position"}
      </button>
      {status === "success" && data?.userOpHash && (
        <p>Confirmed: {data.userOpHash}</p>
      )}
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

import { useCloseBorrowPosition } from "@coinbase/cdp-hooks";

function ClosePosition() {
  const { closeBorrowPosition, data, status, error } =
    useCloseBorrowPosition();

  const handleClose = async () => {
    await closeBorrowPosition({
      borrowProductId: "bp_07fb56c0-9afe-5440-8ff2-5b0e115458df",
      useCdpPaymaster: true,
    });
  };

  return (
    <div>
      <button
        onClick={handleClose}
        disabled={status === "pending"}
      >
        {status === "pending" ? "Closing..." : "Close Position"}
      </button>
      {status === "success" && data?.userOpHash && (
        <p>Confirmed: {data.userOpHash}</p>
      )}
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}