import type { Position } from '../../gen/trading_pb';

interface Props {
  positions?: Position[];
  loading?: boolean;
}

export function PositionsTable({ positions = [], loading }: Props) {
  return (
    <div>
      <div className="flex items-center justify-between px-3 py-1.5 border-b border-[var(--color-border)]">
        <span className="text-sm font-medium">Positions</span>
        <span className="text-xs text-[var(--color-text-secondary)]">
          {positions.length} active
        </span>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full text-xs">
          <thead>
            <tr className="text-[var(--color-text-secondary)] border-b border-[var(--color-border)]">
              <th scope="col" className="text-left px-3 py-2 font-medium">Symbol</th>
              <th scope="col" className="text-left px-3 py-2 font-medium">Side</th>
              <th scope="col" className="text-right px-3 py-2 font-medium">Qty</th>
              <th scope="col" className="text-right px-3 py-2 font-medium">Avg Price</th>
              <th scope="col" className="text-right px-3 py-2 font-medium">Mkt Value</th>
              <th scope="col" className="text-right px-3 py-2 font-medium">P&L</th>
            </tr>
          </thead>
          <tbody>
            {loading && (
              <tr>
                <td colSpan={6} className="text-center py-8 text-[var(--color-text-secondary)]">
                  Loading...
                </td>
              </tr>
            )}
            {!loading && positions.length === 0 && (
              <tr>
                <td colSpan={6} className="text-center py-8 text-[var(--color-text-secondary)]">
                  No open positions
                </td>
              </tr>
            )}
            {positions.map((pos) => {
              const isLong = pos.quantity >= 0;
              return (
                <tr
                  key={`${pos.symbol}-${pos.quantity}`}
                  className="border-b border-[var(--color-border)] hover:bg-[var(--color-bg-primary)]"
                >
                  <td className="px-3 py-2 font-medium">{pos.symbol}</td>
                  <td className="px-3 py-2">
                    <span
                      className={
                        isLong
                          ? 'text-[var(--color-green)]'
                          : 'text-[var(--color-red)]'
                      }
                    >
                      {isLong ? 'LONG' : 'SHORT'}
                    </span>
                  </td>
                  <td className="px-3 py-2 text-right">{Math.abs(pos.quantity)}</td>
                  <td className="px-3 py-2 text-right">{pos.averagePrice.toFixed(2)}</td>
                  <td className="px-3 py-2 text-right">{pos.marketValue.toFixed(2)}</td>
                  <td
                    className={`px-3 py-2 text-right font-medium ${
                      pos.unrealizedPnl >= 0
                        ? 'text-[var(--color-green)]'
                        : 'text-[var(--color-red)]'
                    }`}
                  >
                    {pos.unrealizedPnl >= 0 ? '+' : ''}
                    {pos.unrealizedPnl.toFixed(2)}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}
