"use client";

import { ArrowDown, ArrowUp, Star } from "lucide-react";
import clsx from "clsx";

interface MarketPair {
  symbol: string;
  name: string;
  price: number;
  change: number;
  volume: number;
  marketCap: number;
  isWatchlisted?: boolean;
}

interface MarketListProps {
  pairs: MarketPair[];
  onSelectPair: (pair: MarketPair) => void;
  selectedPair?: MarketPair;
}

// Helper function to format large numbers
function formatNumber(num: number): string {
  if (num >= 1e9) {
    return `$${(num / 1e9).toFixed(1)}B`;
  }
  if (num >= 1e6) {
    return `$${(num / 1e6).toFixed(1)}M`;
  }
  return `$${num.toLocaleString()}`;
}

export function MarketList({ pairs, onSelectPair, selectedPair }: MarketListProps) {
  return (
    <div className="rounded-lg bg-card">
      <div className="grid grid-cols-[auto_2fr_1fr_1fr_1fr] gap-2 p-3 text-sm text-text-secondary">
        <div className="w-8"></div>
        <div>Asset</div>
        <div className="text-right">Price</div>
        <div className="text-right">24h</div>
        <div className="text-right">Market Cap</div>
      </div>

      <div className="space-y-px">
        {pairs.map((pair) => {
          const isSelected = selectedPair?.symbol === pair.symbol;
          const isPositive = pair.change >= 0;

          return (
            <button
              key={pair.symbol}
              onClick={() => onSelectPair(pair)}
              className={clsx(
                "w-full grid grid-cols-[auto_2fr_1fr_1fr_1fr] gap-2 p-3 text-sm hover:bg-background",
                isSelected && "bg-background"
              )}
            >
              <div className="flex w-8 items-center justify-center">
                <Star
                  className={clsx(
                    "h-4 w-4",
                    pair.isWatchlisted
                      ? "fill-accent text-accent"
                      : "text-text-secondary"
                  )}
                />
              </div>
              <div className="flex min-w-0 items-center">
                <div className="min-w-0">
                  <div className="truncate font-medium">{pair.symbol}</div>
                  <div className="truncate text-text-secondary">{pair.name}</div>
                </div>
              </div>
              <div className="text-right">
                <div className="font-medium">
                  ${pair.price.toLocaleString(undefined, { 
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2 
                  })}
                </div>
                <div className="text-text-secondary">
                  Vol {formatNumber(pair.volume)}
                </div>
              </div>
              <div
                className={clsx(
                  "flex items-center justify-end whitespace-nowrap",
                  isPositive ? "text-success" : "text-error"
                )}
              >
                {isPositive ? (
                  <ArrowUp className="h-4 w-4 shrink-0" />
                ) : (
                  <ArrowDown className="h-4 w-4 shrink-0" />
                )}
                <span>{Math.abs(pair.change).toFixed(2)}%</span>
              </div>
              <div className="text-right">
                {formatNumber(pair.marketCap)}
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}