import { useUserOrders } from "@0xmonaco/react";

function OrdersPanel() {
  const { orders, loading, subscribed } = useUserOrders(100);

  // Filter active orders
  const activeOrders = orders.filter(
    o => o.status === "SUBMITTED" || o.status === "PARTIALLY_FILLED"
  );

  return (
    <div>
      <p>Live: {subscribed ? "Connected" : "Disconnected"}</p>
      <h3>Active Orders ({activeOrders.length})</h3>
      {activeOrders.map(order => (
        <div key={order.id}>
          {order.trading_pair}: {order.side} {order.quantity}
          {order.filled_quantity !== "0" && (
            <span>Filled: {order.filled_quantity}</span>
          )}
        </div>
      ))}
    </div>
  );
}

// Cancel specific orders
const result = await sdk.trading.batchCancelOrders({
  orderIds: ['order_123', 'order_456', 'order_789']
});

console.log(`Cancelled ${result.total_cancelled} of ${result.total_requested} orders`);

// Check individual results
result.results.forEach(r => {
  if (r.success) {
    console.log(`Order ${r.order_id} cancelled at ${r.cancelled_at}`);
  } else {
    console.log(`Order ${r.order_id} failed: ${r.error?.message}`);
  }
});

// Cancel ALL active orders
const allCancelled = await sdk.trading.batchCancelOrders({ cancelAll: true });
console.log(`Emergency exit: cancelled ${allCancelled.total_cancelled} orders`);

// Before (v0.5.4)
type OrderStatus =
  | "PENDING"          // ❌ Removed
  | "ACKNOWLEDGED"     // ❌ Removed
  | "SUBMITTED"
  | "PARTIALLY_FILLED"
  | "FILLED"
  | "CANCELLED"
  | "REJECTED"
  | "EXPIRED"
  | "SETTLED";

// After (v0.5.5)
type OrderStatus =
  | "SUBMITTED"        // Orders start here
  | "PARTIALLY_FILLED"
  | "FILLED"
  | "CANCELLED"
  | "REJECTED"
  | "EXPIRED"
  | "SETTLED";

// Before
if (order.status === 'PENDING' || order.status === 'ACKNOWLEDGED') {
  // Wait for order to be processed
}

// After
if (order.status === 'SUBMITTED') {
  // Order is active and waiting to be filled
}

// Before (v0.5.4 and earlier)
const balance = await sdk.vault.getBalance(assetId);
console.log('Balance:', balance.formatted);

// After (v0.5.5+)
const balance = await sdk.profile.getUserBalanceByAssetId(assetId);
console.log('Available:', balance.available_balance);
console.log('Locked:', balance.locked_balance);
console.log('Total:', balance.total_balance);

// Old approach
const vaultBalance = await sdk.vault.getBalance(assetId);
console.log(`Balance: ${vaultBalance.formatted}`);

// New approach
const profileBalance = await sdk.profile.getUserBalanceByAssetId(assetId);
console.log(`Available: ${profileBalance.available_balance}`);
console.log(`Locked in orders: ${profileBalance.locked_balance}`);
console.log(`Total: ${profileBalance.total_balance}`);

const { balances } = await sdk.profile.getUserBalances({ limit: 100 });
balances.forEach(b => {
  console.log(`${b.symbol}: ${b.total_balance}`);
});

// Before (v0.5.4)
interface GetUserBalancesResponse {
  balances: AccountBalance[];
  total: number;  // Old field name
  limit: number;
  offset: number;
}

// After (v0.5.5+)
interface GetUserBalancesResponse {
  balances: AccountBalance[];
  total_count: number;  // Renamed for consistency
  limit: number;
  offset: number;
}

const response = await sdk.profile.getUserBalances();
console.log(`Total: ${response.total_count}`);  // Changed from response.total

// After (v0.5.5+)
interface AccountBalance {
  asset_id: string;                // NEW: Asset UUID
  token: string;
  symbol: string | null;
  decimals: number;
  available_balance: string;
  locked_balance: string;
  total_balance: string;
  available_balance_raw: string;   // NEW: Raw balance (wei)
  locked_balance_raw: string;      // NEW: Raw balance (wei)
}

interface LedgerMovement {
  // ... existing fields ...
  amount_raw: string;              // NEW: Raw amount
  symbol: string | null;           // Now explicitly nullable
  decimals: number;
  balance_before_raw: string | null;   // NEW
  balance_after_raw: string | null;    // NEW
  locked_before: string | null;        // NEW
  locked_before_raw: string | null;    // NEW
  locked_after: string | null;         // NEW
  locked_after_raw: string | null;     // NEW
  reference_id: string | null;         // NEW
  reference_type: string | null;       // NEW
  tx_hash: string | null;              // NEW
  block_number: number | null;         // NEW
}

interface MarketMetadata {
  // These fields are null if no trades have occurred yet
  last_price: string | null;
  last_price_timestamp: number | null;

  // These fields are null if less than 24 hours of data
  high_24h: string | null;
  low_24h: string | null;
  volume_24h: string | null;
  price_change_24h: string | null;
  price_change_percent_24h: string | null;

  // Null if not available
  market_initialization_timestamp: number | null;
}

const metadata = await sdk.market.getMarketMetadata(tradingPairId);

// Before (v0.5.4) - assumed values always present
const price = metadata.last_price;

// After (v0.5.5) - handle null values
const price = metadata.last_price ?? 'N/A';
if (metadata.last_price !== null) {
  console.log(`Last price: ${metadata.last_price}`);
} else {
  console.log('No trades yet');
}

interface BatchCancelOrdersResponse {
  success: boolean;              // Overall operation success
  total_requested: number;       // Total orders requested to cancel
  total_cancelled: number;       // Total orders successfully cancelled
  total_failed: number;          // Total orders that failed to cancel
  results: BatchCancelResult[];  // Individual results for each order
}

interface BatchCancelResult {
  order_id: string;              // Order identifier
  success: boolean;              // Whether cancellation was successful
  cancelled_at?: string;         // ISO 8601 timestamp when cancelled
  error?: {                      // Error details if failed
    code: string;
    message: string;
  };
}

npm install @0xmonaco/[email protected] @0xmonaco/[email protected]